标签:
部分可能不兼容低版本浏览器(比如IE)
部分图片来自网易云课堂,侵、私信、删
(60)定位
①position
②值:
static:默认,无定位
relative:相对定位,仍在文档流之中(其他的元素不变),参照物相对于原来的位置进行定位。会压在其他的元素上面。作用是为绝对定位元素提供参照物。
absolute:绝对定位,脱离文档流(后续元素会在绝对定位元素的前序元素的后面),默认宽度是内容宽度,参照物是第一个定位的祖先/根元素(根元素是html元素),如果祖先没有定位元素,那么会导致其参照物是html。
(应用场景:比如轮播图,通过相对定位——背景图和绝对定位——标题、轮播按钮结合)
fixed:固定定位,脱离文档流,默认宽度是文本宽度,参照物是视窗(我觉得可以认为是浏览器可视范围),假如其bottom:0px,浏览器上下有滚动条——html高度大于浏览器可视范围高度,那么这个元素将一直位于浏览器可视范围的底部(而不是html的最底部))。(IE6不兼容)
应用场景:固定顶栏(无论怎么滚动,都在浏览器的上方,同理也有底栏);
③位置属性(描述所在位置):
top、right、bottom、left
只有在设置position属性的前提下,才能生效
假设4个方向都被设置,会导致元素被撑开。
z-index:越高的值,排序更前(即高的覆盖低的),默认为0。
④z-index的栈 概念:
祖先元素的z-index的值更高的,将覆盖祖先元素的z-index的值更低的元素。(需要假设这两个祖先元素是在同一个父元素下)。
如图:
如果z-index一样的话,文档流在更后面的,将覆盖在前面的上面。
(61)遮罩
①利用固定定位:position:fixed
②另外需要设置z-index,
一般设置为:
{
position:fixed;
z-index:999;
top:0;
left:0;
height:100%;
width:100%;
background-color:#000;
opacity:0.3;
}
(62)三行自适应布局
①指顶栏最上、底部的最下、中间的内容区高度自适应;
②例子:
.top
{
position:absolute;
top:0; /*上为0*/
left:0;
height:100px; /*顶部的高度*/
width:100%;
background-color:#eee;
}
.body
{
position:absolute;
bottom:100px; /*和下方距离100px*/
top:100px; /*和上方距离100px*/
left:0; /*由于设置了四个方向所以撑满高度*/
right:0; /*由于设置了四个方向所以撑满宽度*/
background-color:#ccc;
overflow:auto;
}
.foot
{
position:absolute;
bottom:0; /*和下方距离0*/
left:0;
height:100px; /*顶部的高度*/
width:100%;
background-color:#aaa;
}
注意:body不能高度和宽度设置为100%(因为会相对于其父元素<body>标签)
③于是可以在中间的class="body"里面设置高度为5000px(那么中间部分会出现滚动条);
④需要注意的是:
<1>中间部分若过短的话,会导致可能和下方foot留有空白;
<2>若想让下方自适应,那么中间的元素(?或者所有子元素?)设置为绝对定位(脱离文档流)会导致下方直接跟到head后面去。
(64)浮动float
①float
②值:
left 向左浮动
right 向右浮动
③特点:
默认宽度——内容宽度(但可以通过width和height设置);
脱离文档流(非完全脱离);
向指定方向一直移动(根据值),移动到不能移动为止
④float的元素,在同一个文档流(所以同一个文档流中的float元素,不会重叠);
float,对元素而言,脱离文档流;对内容,在文档流(不会遮挡内容);
为了说明上面那点,来一个代码:
<html>
<head>
<metacharset=utf-8"/>
<style>
.a{
width:500px;
height:150px;
background-color:green;
}
#b{
float:left;
width:50px;
height:50px;
background-color:#ccc;
}
#c{
width:50px;
height:100px;
background-color:#aaa;
}
</style>
</head>
<body>
<div class="a">
<divid="b">
ABC
</div>
<divid="c">
FEDCBA
</div>
</div>
</body>
</html>
b的高度是50px;c的高度是100px。在没有float的情况下,b和c的高度正好撑满了外面的div(因为div是块级元素,所以默认情况下他们不会同行显示);
若完全脱离文档流,那么会导致b和c重叠,即无法看到c(把float改为position:absolute;)或者b(两个都加上position:absolute;)的内容。
然而,使用float的实际情况如图:
A挡住了B的一部分,但是并没有挡住B的内容(注意,是内容FEDCBA,而不是content区域);
⑤所以可以利用float会使内容不会被遮挡的特性,来达成某些目的。
潜在问题:假设float元素在A块中,但由于其脱离文档流的特性,其高度/宽度不会被A块所考虑。假设float元素的高度比A块要大,到了B块的范围内了。
会导致float元素覆盖B块的区域,B块的内容将避开该区域。
如图:
⑥解决占用后续元素位置空间的办法:
clear
值:
both、left、right、none(默认)、inherit(继承)
特点:
应用于float的后续元素+块级元素;
方法一:
在float元素后,你想要清除浮动的地方,加一个块,然后给其附上clear:both的css属性。这里是一个加空块的示例:
HTML:<divclass="clearfloat"></div>
CSS:
.clearfloat{
width:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
举个例子,假设有A块和B块,然后A块有子块a1块和a2块(div)。而a1块是float元素。(注意,除a1块和B块之外,都没有设置高度)
正常情况下:a2块位于a1块右边(行级元素),a1块因为设置css样式时高度比较高,占用了B块的一部分(遮挡了部分B块的区域);
《1》在a2块前加入这个标签,于是a2块出现在a1块的下方(浮动无效),A块的float元素没有遮挡B块,A块和B块的正常的相对位置。另外,a1块后a2块前,是属于A块的部分。
《2》在A块后加入这个标签,a2块依然位于a1块后面(浮动有效),但是B块不再被遮挡。另外,A块后,B块前有一部分,其属于A、B的父元素的区域。
《3》在a2块中加入这个标签(内容前和内容后两种情况),内容前则a2的内容在a1的下方,内容后则a2的内容在a1的右方。另外,这两种情况,a1块后都是a2块的部分。
总结:
也就是说,在不设置浮动元素的父元素、兄弟元素的高度情况下,其父元素、兄弟元素的高度,可以根据 clearfloat所在的标签来自适应。
(注:若设置的话,则不能自适应)
附HTML代码,可以自己试试放在不同的情况。
<html>
<head>
<metacharset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
}
.A{
width:100px;
background-color:blue;
outline:2px dashed blue;
}
.a1{
height:100px;
float:left;
background-color:#ccc;
}
.a2{
background-color:green;
}
.clearfloat {
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.B{
width:100px;
height:100px;
background-color:Yellow;
}
</style>
</head>
<body>
<div class="main">
<divclass="A">
<divclass="a1">
aaa
</div>
<divclass="a2">
bbbb
<br class="clearfloat"/>
</div>
</div>
<divclass="B">
ppp
</div>
</div>
</body>
</html>
方法二:
设置一个类class="clearfloat",然后利用伪类选择器“:after”,来给该样式的块后面添加一个块级元素。当你想要清除某个块的float浮动时,给其添加一个clearfloat的class即可。
例如CSS样式:
.clearfloat:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
你想要清除A块之后的浮动(达成上面《2》的目的),在A块的标签class属性中,像这样<divclass="Aclearfloat">添加绿色字体部分即可。
如果想要达成上面《1》中的目的,那么在a2的样式中添加clear:both这条CSS属性即可。
注意,不知为何,在float元素中添加.clearfloat,然后利用其after是无效的。可能是因为after依然属于float元素吧。
总结:
也就是说,如果通过加样式的方法,若是想从哪个元素之后,float的浮动不生效,那么就在其的class加入上述代码(float元素本身不可加)。
若是从哪个元素开始,float浮动不生效,那么就把伪类选择器的after改为before,并在这个元素的class中加入clearfloat即可。
⑦对于IE不支持伪类选择器after的处理方式:
添加:
.clearfloat{zoom:1;}来处置(具体不懂,用的时候再说)
⑧应用场景:
对于三行两列布局(两列浮动),对中间那行的标签,添加clearfloat的样式。
(65)弹性布局flex
flex对IE9及以下不兼容,主要应用于移动web页面中
①display: flex;
②在父元素中设置display: flex;,那么其子元素就可能是弹性元素。
弹性元素有:
《1》子元素中的块级元素、float元素,行级元素;
非弹性元素有:
《1》脱离文档流的元素(position:absolute),孙元素;
③flex-direction: 弹性的方向
值:
row 默认,行(从左到右)
row-reverse 反向行(从右到左)
column 列(从上到下)
column-reverse 反向列(从下到上)
④如代码:
<html>
<head>
<metacharset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
display:flex;
flex-direction:row;
}
.a{
background:red;
margin:5px;
text-align:center;
line-height:50px;
}
</style>
</head>
<body>
<div class="main">
<divclass="a">
A
</div>
<divclass="a">
B
</div>
<divclass="a">
C
</div>
</div>
</body>
</html>
解释:
《1》排列方向会依次排列,如果排列方向的宽高(比如方向row则为width)大于总宽高(3个元素,每个width为200px,总width为300px),那么其宽度将自适应(从200px变为100px)
《2》非排列方向会撑满高度。(不设置其宽高的情况下,比如方向row元素的height未设置)
《2》方向有点类似float的顺序,
⑤flow-wrap 换行设置
值:
nowrap 不换行(默认)
wrap 换行
wrap-reverse 反向换行
解释:
《1》假设排列方向row,总宽度300px,单个元素宽度200px。总高度100px,单个高度未设置。
《2》不换行的情况下,其宽度自适应为100px;
《3》wrap的情况下,宽度为200px(每行只能放一个),高度为自适应(33.3px),顺序从上往下;
《4》wrap-reverse的情况下,宽度为200px,高度自适应(33.3px),顺序是从下往上。
《5》假设单个高度设置为100px,那么只能容纳一个,剩下的将溢出(到父块外面去了)。若设置overflow:hidden,那么超出部分将不会显示。
如代码:
<html>
<head>
<metacharset=utf-8"/>
<style>
.main{
width:300px;
height:100px;
background-color:#ddd;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.a{
background:red;
margin:5px;
width:200px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<divclass="a">
A
</div>
<div class="a">
B
</div>
<divclass="a">
C
</div>
</div>
</body>
</html>
⑥flex-flow: 理解为flex-direction和flex-wrap的缩写
值:
是flex-direction和flex-wrap的值,可以写一个,也可以写两个;
默认值是:
flex-flow:row nowrap;
⑦order 顺序
值:number,是一个数字,初始值是0
排列的时候,先排列order值小的,再排列order值大的。
假设一个的order属性的值设置为1,那么值为0的按顺序排列之后,才会排列值为1的。
值可以是负值。
⑧flex-basis flex元素的初始宽高(推测是根据方向决定是width还是height)
值:
main-size 主轴方向的宽高(例如row则是元素内容的宽度)
width 也可以设置为像100px这样的。
如果值是0的话,则没有宽高,但文字会溢出显示。
⑨flex-grow 弹性空间分配
值:number 默认值为0,可以是1或者更多
效果:将多余空间,按照flex-grow的属性值占全部flex-grow的和的比例,分配给各个元素。
假设总宽度是200px,3个元素的宽度为50px,那么只占用了150px(剩余50px没有被使用)。
若其中一个元素设置flex-grow:1; 那么这个元素的宽度将变为50px(初始)+50px(未被占用的)=100px的宽度。
若其中两个都是值1,那么这2个元素分别拿走25px的宽度;
若一个是值4,一个值是1,那么值4的拿走40px,值1的拿走10px;
如果基数是0,两个值1,一个值2,那么值2的宽度(100px)是值1宽度(50px)的两倍。
⑩flex-shrink 对于剩余空间为负的值的处理
值:number 默认为1
假如3个元素每个元素宽度为200px,总宽度为300px,那么因为自适应,则每个元素变为100px(不换行的情况下)。三个元素分别减少了100px(平分超出的300px)
假设其中两个是默认值,另外一个值为2。那么值为2的元素,减少了150px(剩余50px),值为1的两个元素,分别减少75px(剩余125px)
也就是说,值越大的,减少的越多。
【11】flex: 缩写
值:flex-grow flex-shrink flex-basis 多、少、基础
默认值:0 1 main-size
可以不全写,但若写一个,则默认是flex-grow的值
(66)flex对齐
和flex有关,是父元素的属性
①justify-content 设置主轴方向的对齐方式
值:
如图:(灰色部分为剩余空间)
②align-items: 设置辅轴方向的对齐方式
值:如图(默认值是flex-start,需要设置子元素高度后才有效)
③align-self:
设置单个元素(非父元素属性),在辅轴方向的对齐方式。
值参考align-items
④align-content: 对于多行元素的辅轴方向对齐方式
值如图:
(67)三行两列自适应布局
①首先设置三行(中间一行自适应)的布局;
《1》body和html设置为height:100%
《2》body设置display:flex; 然后设置head和foot的高度(由于flex的特性,其宽度将自适应);
《3》设置中间部分的main的CSS属性为flex:1(这里的1表示对多余空间的分配,全部被中间拿走),于是中间高度撑满;
此时三行布局完成。
②设置两列自适应;
《1》首先确定中间这一行的宽度如何,是定宽,还是为自适应。自适应则不需要设置(因为其父元素默认非主轴宽高为自适应),如果是定宽,则设置其宽度。
《2》决定两列的布局方式,是铺满,或者左、中、右有缝隙;
《3》其次确定左右列的情况,是定宽,还是按比例宽(比如左1右2);
《4》定宽设置flex-basis属性,按比例宽度则设置flex-grow。
《5》此时,基本两列的情况已定。
③示例代码:
上下两行撑满,中间那行定宽且居中,左右两行根据比例分配宽度,且中间有缝隙(10px)
<html>
<head>
<metacharset=utf-8"/>
<style>
html,body{
height:100%;
}
body{
display:flex;
flex-flow:column;
}
.head,.foot{
background:#ddd;
line-height:100px;
}
.main{
flex:1;
display:flex;
width:1000px;
justify-content:center;
align-self:center;
}
.left{
flex:2;
margin-right:10px;
background:red;
}
.right{
flex:1;
background:blue;
}
</style>
</head>
<body>
<div class="head">
head
</div>
<div class="main">
<divclass="left">
left
</div>
<divclass="right">
right
</div>
</div>
<div class="foot">
foot
</div>
</body>
</html>
从零开始学_JavaScript_系列(17)——CSS<4>(定位、遮罩、float、弹性布局flex)
标签:
原文地址:http://blog.csdn.net/qq20004604/article/details/51333471