网易微专业之《前端工程师》学习笔记（5）-CSS布局属性（草稿）

2016-01-05  本文已影响392人  荷小音

网页的布局其实在我理解起来，就类似于排版的问题。有点像平面设计中的内容排版。只不过平面设计中的排版是在photoshop里做的，而网页的排版却要通过写代码来实现。排版的意思，把这块东西放在网页的哪个地方，和别的东西怎么协调起来排版。布局要搞明白的意思大概就是这个。

布局会涉及到的几个CSS属性大致有这么一些。display，主要是用来设置元素的显示方式，position主要是用来给元素定位的，你可以用这个属性任意给元素定位到网页的任何一个地方。float也是用来定位的，只不过它的定位方式跟position有点不同，他只有两个方向，就是让元素左浮动或者又浮动。flex是很新鲜的一种流式布局方法，可以用它来做一些不是很复杂的响应式布局。下面我们来详细介绍下这几个属性。

01.display：设置元素的显示方式

它的值有很多，看下面我收集到的表格。
（1）display的值有哪些？

值 描述
none 此元素不会被显示
block 此元素将显示为块级元素。
inline 默认，此元素会被显示为内联元素。
inline-block 行内块元素
list-item 此元素会作为列表显示
table 此元素会作为块级表格来显示（类似<table>）
inline-table 此元素会作为内联表格来显示(类似<table>)
table-row-group 此元素会作为一个或多个行的分组来显示（类似<tbody>）
table-header-group 此元素会作为一个或多个行的分组来显示（类似<thead>）
table-footer-group 此元素会作为一个或多个行的分组来显示（类似<tfoot>）
table-row 此元素会作为一个表格行显示（类似<tr>）
table-column-group 此元素会会作为一个或多个列的分组来显示（类似<colgroup>）
table-column 此元素会作为一个单元格列显示（类似<col>）
table-cell 此元素会作为一个表格单元格显示（类似<td>和<th>）
table-caption 此元素会作为一个表格标题显示（类似<caption>）

其中display最主要的三个值我下面再简单介绍下，其他的值不是很常用，不过我上面列出来的display的值只是其中的大部分，还算比较常用，如果有能力都要尝试下，当然除了我下面重点介绍的三个最常用的值之外，其他的值浏览器支持的不是很好。

（2）display最常用的三个值介绍

display 默认宽度 可设置宽高 起始位置 代表元素有哪些
block 父元素宽度 是 换行 div\p\h1~h6\ol\ul\dl\table\address\blockquot\form
inline 内容宽度 否 同行 a\span\br\i\em\strong\label\q\var\cite\code
inline-block 内容宽度 是 同行 input\textarea\select\button

display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，那么在IE6、IE7下，怎么实现块级元素的inline-block属性值设置呢？

E6、IE7支持对html行内元素设置inline-block。实际上只是看起来支持而已，IE6、IE7并不识别inline-block这个属性值，只是触发了layout，让行内元素有了inline-block的表征，比如说：行内显示且可设置宽高等等。

而对html块级元素设置inline-block，也只是触发了layout，对块级元素设置行内块级属性的目的没有达到。那么在IE6、IE7下，怎么实现块级元素的inline-block属性值设置呢？

常见有2种方法：
1.先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为行内对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失），代码如下：

div {display:inline-block;}
div {display:inline;}

2.直接让块元素设置为行内对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等），代码如下：

div { display:inline-block; _zoom:1;_display:inline;}/*推荐IE6*/
div { display:inline-block; *zoom:1;*display:inline;}/*推荐IE6或IE7*/

（3）display:none与visibility:hidden的区别

给元素设置了display:none以后，元素就消失了，在元素下面的元素会取代那个消失的元素的位置，而visibility：hidden设置的元素，是显示隐藏，但是在文档流中，它原先的位置还在，只是那个位置是空白的，在该元素下面的元素不会窜上来取代它的位置。

02.position:设置定位方式

设置定位方式最重要的是设置参照物。且要配合别的属性一起使用，有这些属性：top、right、bottom、left、z-index。

left等方向值代表的意思

position定位工作原理是先通过设定position：absolute/relative/fixed来确定要定位的参照物。然后通过left\right\top\bottom来设置元素与参照物之间的距离可以从图中看出，left\right\top\bottom表示元素边缘与参照物之间的距离。

然后再来讲讲position：absolute/relative/fixed的意思。relative相对定位，absolute绝对定位，fixed固定定位。三个定位各有自己的特色。

相对定位relative

如果给中间的那个橘黄小块设置了相对定位，它的位置是不会有变化的。仍然在文档流中。而且它的参照物是元素自己本身。所以一旦给这个元素再追加设置方向值topleft，意思就是相对于元素本身这个参照物原来的位置，左边距偏移了20px，上边距偏移了10px。

这个相对定位的属性，由于是以元素本身作为参照物的，而且如果单纯只是给元素设置相对定位的话，元素本身的位置是不发生变化的，因此，它常常用来作为下面要讲的绝对定位元素的参照物来设置。


绝对定位absolute

如果给图片中位于中间的那个深橘色的小块设置了绝对定位。那么按照绝对定位的特点，这个小块会脱离文档流，这样一来，位于下面的浅色橘黄小块就会窜上来，取代原先那个深色橘黄小块的位置。而且由于设置了绝对定位的关系，深色橘黄小块的宽度会缩小，变成内容宽度。

如果再给这个深色橘黄小块追加方向值top\left，绝对定位的小块的参照物如果不设置的话就是html的根元素，如果设置了的话，一般要看它祖先元素是不是设置了相对定位的，设置了的话，就按照那个相对定位的元素为参照物进行位置的偏移。

fixed固定定位

如果给位于中间的深橘色小块设置了position:fixed;那么这个小块会根据固定定位的特色，宽度会收缩成内容宽度，并且脱离文档流，而位于它下方的浅橘色小块会窜上来取代它的位置。而固定定位的参照物是浏览器视窗，所以一旦给这个深橘色小块追加方向值left\bottom，那么它位置的偏移就会按照浏览器的视窗作为参照物。偏移的结果就看上图的样子了。position:fixed 在ie6及以下不支持

03.float

float浮动

如果给这个深橘色的小块添加float:right;那么这个小块的宽度会收缩成内容宽度，并且脱离文档流，设置了右浮动，就会向右边一直移动，直到碰到边界。左浮动就向左边。

另外，值得注意的是，float对于元素来说是脱离文档流的，但是对于元素的内容来说是占据文档流的。这句话怎么理解呢，看下面的图：

float半脱离文档流

其实对于上图中的那个浅橘色的小块来说，它的大小是包括了那个深橘色的小块的，只不过它左边的地方被深橘色小块覆盖掉了，所以对于浅橘色小块这个元素来说，深橘色这个float元素是脱离文档流的。但是奇怪的是浅橘色小块的内容，确实如图中这样显示的，说明，对内容来说，float元素还是在文档流占据位置的。

关于清除浮动的方法有两个，一个是在浮动元素后面加一个空白的元素，给这个空白的元素添加样式{clear:both;}就好了。比如在浮动元素后面加一个

<br class="cb"/>

.cb{clear:both;height:0;overflow:hidden;visibility:hidden;}

另一种办法就是clearfix。给浮动元素的父元素添加一个clearfix的类。

.clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}

另外关于为什么要加zoom:1的原因，zoom的作用可以看看这篇文章《CSS中zoom:1的作用 ，小标签大作用》

04.flex

从缺，有空补~~

上一篇下一篇

猜你喜欢

热点阅读