从零开始学_JavaScript_系列(17)——CSS<4>(定位、遮罩、float、弹性布局flex)

  1. 云栖社区>
  2. 博客>
  3. 正文

从零开始学_JavaScript_系列(17)——CSS<4>(定位、遮罩、float、弹性布局flex)

零零水 2016-05-06 17:56:00 浏览999
展开阅读全文

部分可能不兼容低版本浏览器(比如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

值:

bothleftrightnone(默认)、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

flexIE9及以下不兼容,主要应用于移动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>

 


网友评论

登录后评论
0/500
评论
零零水
+ 关注