一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概的css代码。
- 方式1
<style type="text/css">
#box{
width: 900px;
height: 100px;
display:flex;
flex-direction: row;
align-items:center;
border: 1px solid yellow;
}
.left{
height: 100%;
background-color: red;
flex-basis: 100px;
-webkit-flex-basis: 100px;
}
.right{
background-color: green;
flex-grow: 1;
height: 100%;
}
</style>
<div id="box">
<div class="left"></div>
<div class="right"></div>
</div>
- 方式2:浮动布局
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width: 220px;
background-color: red;
float: left;
}
.right{
background-color: blue;
margin-left: 220px;
}
</style>
<div class="left">left siderbar</div>
<div class="right">right siderbar</div>
定位(position)
点击链接:css布局说
点击链接:定位详解
理解:相对于一个元素来定义另一个元素位置
position属性:
static(默认):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分
relative:相对定位,元素框相对于之前正常文档流中的位置发生偏移,并且原先的位置仍然被占据。发生偏移的时候,可能会覆盖其他元素。
absolute:绝对定位,相对父元素定位,情况有两种
a.设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素 b.如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。
fixed:绝对定位,元素框不再占有文档流位置,并且相对于浏览器窗口(body)进行定位
sticky:(这是css3新增的属性值)粘性定位,相当于relative和fixed混合。最初会被当作是relative,相对于原来的位置进行偏移;一旦移出偏移范围后,会被当成fixed定位,相对于视口进行定位。目前适用于浏览器只有FireFox和iOS的Safari
demo:固定页头和页脚
<style type="text/css">
.header{
width: 100%;
height: 100px;
background-color: yellow;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.center{
width: 100%;
height: 800px;
background-color: yellowgreen;
margin-top: 100px;
}
.footer{
width: 100%;
height: 100px;
background-color: yellow;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">头部头部头部</div>
<div class="center">中间部分中间部分中间部分</div>
<div class="footer">底部底部底部</div>
</body>
position:absolute和float的异同
相同点:均可以让元素脱离文档流,并且设置其宽高
不同点:position会覆盖文档流的其他元素,float仍会占据位置
浮动
浮动之前需要了解盒子模型:
分为两种盒子模型:
- W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分
- IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding
一般情况下使用W3C盒子模型
避免两种盒子在不同浏览器显示不同,可以在代码加上
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
浮动发生的原因
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下,则被挤到下一行):如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐,当页面需要两个元素并排排列,此时就需要清除浮动
清除浮动
清除浮动的原因
当一个父元素包含了多个浮动的子元素,且页面的内容设置了一个宽度,子元素的浮动确定了他们的位置,但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷,从而使父元素的高度为“0”,以及忽略其他的属性。
清除浮动的方法
1.添加一个空的div
给浮动元素的同级下加一个空标签div,并将其属性设置为clear:both,让父级div自己获取高度,
父容器现在必须考虑非浮动子元素的位置,而空标签肯定出现在浮动元素下方,所以显示出来,
父容器就把所有子元素都包括进去了。
<style type="text/css">
.div1{
background-color:red;
}
.left{
float:left;
width:45%;
height:100px;
background-color:yellow;
}
.right{
float:left;
width:45%;
height:100px;
background-color: green;
}
.empty{
clear: both;
}
.div2{
background-color: mediumseagreen;
height: 100px;
margin-top: 10px;
}
</style>
</head>
<div class="div1">
<div class="left"></div>
<div class="right"></div>
<div class="empty"></div>
</div>
<div class="div2"></div>
优点:简单,代码少,浏览器支持好
缺点:有过多的空标签,代码冗余,刚开始理解不了,如果页面浮动过多,则不推荐使用。
2.运用overflow:hidden
用hidden或者auto 均可,区别在于一个可以查看隐藏部分,一个不可以
必须设置宽度或者用zoom:1的同时不能使用height,使用溢出隐藏时,浏览器会自动检测浮动区域的高度。
当代码中没有用溢出隐藏时,div1会失去高度,div2取代div1的高度。
<style type="text/css">
.div1{
background-color: red;
overflow: hidden;
width: 98%;
}
.left{
float: left;
background-color: green;
width:20%;
height:200px;
}
.right{
float: right;
background-color: yellow;
width: 50%;
height: 100px;
}
.div2{
width: 98%;
height: 200px;
background-color: mediumseagreen;
margin-top: 10px;
}
</style>
优点:代码简单 理解方便,浏览器支持好
缺点:不能和position一起使用,因为超出的部分会被隐藏
3.给父级定义一个伪类clearfloat
在父级中加一个clearfloat的class名,然后给clearfloat加上样式,在clearfloat的元素的结尾添加content中的内容,
在这里添加了一个空的元素,并且把它的display设置成block;高度设为0;
clear设为both;visibility设为隐藏。这样就可以撑开父元素。
<style type="text/css">
.div1{
background-color: red;
}
.left{
float: left;
background-color: green;
width:20%;
height:200px;
}
.right{
float: right;
background-color: yellow;
width: 50%;
height: 100px;
}
.div2{
height: 200px;
background-color: mediumseagreen;
margin-top: 10px;
}
.clearfloat:after{
display: block;
clear:both;
content:"";
visibility: hidden;
height: 0;
}
</style>
<div class="div1 clearfloat">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="div2"></div>
优点:浏览器支持好,大型浏览器都适用,如腾讯、网易、新浪等
缺点:代码多,难以理解,需要两行代码配合才能被主流浏览器使用
4.给父级元素也加浮动(float:left)
优点:容易理解
缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用
5.给父元素手动加高度,解决了父级div无法获取高度的问题
优点:代码量少,容易理解
缺点:只适合高度固定的布局,如果子元素高度和父元素不一样,则不能用
用z-index定位
元素的“z-index”值越高将会出现在越上面,给元素设置“z-index”属性,首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。
三栏布局
圣杯布局
包含三个盒子,左中右
<style type="text/css">
.contain{
height:200px;
overflow: hidden;
padding: 0 200px;
}
.middle{
width: 100%;
height: 200px;
background-color: indigo;
float: left;
}
.left{
width: 200px;
height:200px;
background-color: yellowgreen;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
height: 200px;
background-color: pink;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
<div class="contain">
<div class="middle">aaa中间弹性区中间弹性区中间弹性区
中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
分析:
中间盒子宽度为100%,占一行
左右两边盒子,用负边距(margin-left),让三个盒子在同一行,左边(margin-left: -100%),右边(margin-left: -200px)
父盒子设置左右内边距,把三个盒子向中间挤
给左右盒子加相对定位,让他们占住留出来的左右内边距,此时中间盒子不会被盖住。
双飞翼布局
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style type="text/css">
#main{
float: left;
width: 100%;
height: 200px;
background-color: pink;
}
#main-inner{
background-color: red;
padding: 0 200px;
}
#left{
width: 200px;
height: 200px;
float: left;
background-color: yellowgreen;
margin-left: -100%;
}
#right{
width: 200px;
height: 200px;
float: left;
background-color: yellow;
margin-left: -200px;
}
</style>
</head>
<body>
<div id="main">
<div id="main-inner">aa双飞翼布局双飞翼布局双飞翼布局双飞翼布局
双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
双飞翼布局双飞翼布局双飞翼布局</div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
分析: 父盒子包含左中右三个盒子,其中中间的盒子再加上一个子盒子
中间盒子宽度100%
左右盒子用负边距,将两边盒子和中间盒子在同一行
中间盒子的子盒子设置内边距(或者外边距)给左右盒子留空
两种布局的异同
相同点:都是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
不同点:如何使中间盒子的内容不被左右盒子遮挡:
圣杯布局的方法:设置父盒子的 padding 值为左右盒子留出空位,再利用相对布局对左右盒子调整位置占据 padding 出来的空位;
双飞翼布局的方法:在中间盒子里再增加一个子盒子,直接设置这个子盒子的 margin(padding)值来让出空位,而不用再调整左右盒子。
用浮动实现
<style type="text/css">
#container{
width: 100%;
height:200px;
overflow: hidden;
}
.left{
width: 200px;
height:200px;
background-color: red;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: yellow;
float: right;
}
.middle{
width:100%;
height: 200px;
background-color: pink;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div id="container">
<div class="left">aaa</div>
<div class="right">bbb</div>
<div class="middle">ccc中间弹性区中间弹性区中间弹性区中间弹性区
中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
中间弹性区中间弹性区</div>
</div>
对负margin的解释
三栏布局中用到了负margin对浮动元素的影响,当给一个浮动元素设置margin-left: -200px时,就意味着元素左移200px,
即在圣杯布局和双飞翼布局中,由于父盒子设置左右内边距,把三个盒子向中间挤,左右盒子都被中间盒子所覆盖,用margin-left让左盒子左移动一整行到最左边,让右盒子左移自己的宽度,到第一行的空位置处
居中布局
水平居中
- 行内元素(主要针对文本):text-align:center
- 块级元素(block):给元素设宽度,并把marigin-left 和 margin-right 设成 auto
- 多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;;或者使用 flex 布局(flex布局最后记录)
demo
<style type="text/css">
p{
text-align: center;
}
.kuai{
width: 200px;
background-color: pink;
margin-right: auto;
margin-left: auto;
}
#box{
width: 100%;
text-align: center;
height: 200px;
}
.box1,.box2,.box3{
width: 200px;
height: 200px;
display:inline-block ;
}
.box2{
background-color: pink;
}
.box3{
background-color: yellow;
}
.box1{
background-color: red;
}
</style>
</head>
<body>
<p>abcdefg</p>
<div class="kuai">
aaa
</div>
<div id="box">
<div class="box1">aaa</div>
<div class="box2">bbb</div>
<div class="box3">ccc</div>
</div>
</body>
垂直居中
行内元素
a.单行:上下padding相同,或者line-height和height相同 b.多行: 上下padding相同,或者设置 display: table-cell; 和 vertical-align: middle;或者使用 flex 布局;或者使用伪元素
块级元素:必须父元素相对布局
a.已知高度:元素使用绝对布局 top: 50%;,再用负的 margin-top 把子元素往上拉一半的高度 b.未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%); c.使用 Flexbox:选择方向,justify-content: center;
<style type="text/css">
.simple-line{
width: 200px;
padding-top: 50px;
padding-bottom: 50px;
background-color: red;
}
#box{
width: 500px;
height:700px;
position: relative;
}
.box1{
width: 200px;
height: 100px;
position: absolute;
top:50%;
margin-top: -50px;
background-color: yellow;
}
.box2{
width: 200px;
position: absolute;
top:50%;
transform: translateY(-50%);
background-color: pink;
}
</style>
</head>
<body>
<div class="simple-line">aaaaaaa</div>
<div id="box">
<div class="box1">aaa</div>
<div class="box2">bbb</div>
</div>
水平垂直居中
- 定高定宽:先用绝对布局 top: 50%; left: 50%;,再用和宽高的一半相等的负 margin 把子元素回拉
- 高度和宽度未知:先用绝对布局 top: 50%; left: 50%;,再设置 transform: translate(-50%, -50%);
- 使用 Flexbox:justify-content: center; align-items: center;
<style type="text/css">
#box{
width: 200px;
height:200px;
background-color: yellowgreen;
position: absolute;
top:50%;
left: 50%;
margin:-100px;
}
.box1{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
aaa
</div>
<div class="box1">
bbb
</div>
</body>