上海张江前端开发薪资|web前端开发可以自学吗|前端开发和网页设计一样吗
第一,左侧定宽,右侧自适应。
html 代码
<!doctype html>
<html>
<head>
<title>前端开发所学专业能力要求</title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
.fl {
float: left;
width: 200px;
background: pink;
}
.fr {
width: auto;
min-height: 200px;
background: blue;
overflow: hidden;
}
</style>
<body>
<div class=”main”>
<div class=”fl”></div>
<div class=”fr”></div>
</div>
</body>
</html>
反思:在我运用这个浮动时,我脑海中的印象是我需要把左右两边的div都增加float:left这个属性。
但是实际上,当我加上float的时候,这个就出现问题了。
html 代码
<!doctype html>
<html>
<head>
<title>硕士web前端开发 薪资</title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
.fl {
float: left;
width: 200px;
background: pink;
}
.fr {
float: left;
width: auto;
min-height: 200px;
background: blue;
overflow: hidden;
}
</style>
<body>
<div class=”main”>
<div class=”fl”></div>
<div class=”fr”></div>
</div>
</body>
</html>
原先一直想不通,不是说加了浮动就可以在同一行上显示了吗?为什么会出现这样的情况?
然后,询问了群里的大神们,发现一些以前忽略的东西。
关于float属性,所有主流浏览器都支持浮动,但是任何的版本的IE(包括IE8)都不支持属性值:“inherit”;在 css 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
第二,两边定宽,中间自适应。
正确姿势:
html 代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
/*两边定宽 中间自适应*/
.fl2 {
float: left;
width: 200px;
background: #0968DE;
}
.fr2 {
float: right;
width: 200px;
background: #32EF64;
}
.cen2 {
margin-left: 200px;
margin-right: 200px;
background: red;
}
</style>
<body>
<div class=”main”>
<div class=”fl2″></div>
<div class=”fr2″></div>
<div class=”cen2″></div>
</div>
</body>
</html>
仔细看看上面的html,是不是看到不一样的东西了?不一样的地方就是我刚刚接触这个布局不懂的地方。一般来说,我写html,都是从上到下,从左到右的;但是在这个布局中把位于中间部分的div写在了最后的部分。
按照我的理解,按照顺序写div,会造成下面的这种后果:
html 代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
/*两边定宽 中间自适应*/
.fl2 {
float: left;
width: 200px;
background: #0968DE;
}
.fr2 {
float: right;
width: 200px;
background: #32EF64;
}
.cen2 {
margin-left: 200px;
margin-right: 200px;
background: red;
}
</style>
<body>
<div class=”main”>
<div class=”fl2″></div>
<div class=”cen2″></div>
<div class=”fr2″></div>
</div>
</body>
</html>
关于div标签,所有的主流浏览器都支持;在默认情况下,一个div会显示一行,俗的来说就是,每个div在默认下都会自动换行。
前端开发笔试题一套|indexof/ .zip web前端开发规范手册|前端开发编码规范
» 本文来自:前端开发者 » 《前端开发 布局问题_浮动》
» 本文链接地址:https://www.rokub.com/4966.html
» 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册