1.浮动
元素的浮动属性float
Float:left/right;
元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
浮动可以理解为：在一个游泳中，标准流是我们在池底放盒子，浮动就相当于放的这个盒子“飘起来了”。“飘起来了”的盒子会遮住池底盒子。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值;}
float属性值.png
浮动的特点：
1）浮动找浮动，不浮动找不浮动。浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。 2）浮动的盒子中上对齐，并且左浮动与右浮动位置相反的。 3）浮动只会影响当前盒子以下的内容，以上的内容不会影响。 总结：浮动的出现，使得页面的布局更加灵活，但是一般情况能够不使用浮动的话，尽可能的不要使用浮动（浮动相对于SEO来说不太友好，因为它脱离标准流）。 4）如果一个div没有设置高，这个div中的所有的元素都浮动了，那么这个div的高是0; 5) 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。 6)浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。 浮动根据元素书写的位置来显示相应的浮动。 7)一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
这个地方稍微提一下版心的概念和布局流程
版心:
“版心”是指网页中主体内容所在的区域。 一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px等。
布局流程:
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
注意:在制作网页的过程中，如果涉及到了页面的宽高的问题，最好用width和height去解决，再用padding,最后才考虑margin。例如边框合并问题
因为margin在布局中会存在兼容性的问题
1）ie6的双边距bug。（使用了浮动，浮动之后用margin-left） 2）边距合并现象：（只出现块级元素：不包括行内元素以及行内块级元素） 3）父子元素之前的边框合并现象： 如果父子元素之间没有边框，那么给子元素设置一个margin-top,那么父元素也会拥有这个属性。 解决方法：A)给父元素设置边框。B)给父元素一个属性：overflow:hidden.4）如果给页面的第一个div设置浮动，页面的第二个div不浮动，但是有margin-top,那么将来第一个浮动的div会加上第二个div的margin-top显示。
如果两个同级的div上下排序，上面div有下margin,下面的div有上margin，就会出现边距的合并现象，两者之间的取值是按最大值来计算。
1 <style type="text/css">2 div {
3 width: 200px;
4 height: 200px;
5 background: red;
6 }
7 .tom {
8 margin-bottom: 50px;
9 }
10 .jerry {
11 margin-top: 100px;
12 background: blue;
13 }
14 </style>15 </head>16 <body>17 <div class="tom"></div>18 <div class="jerry"></div>
2)边框合并问题.png
3)父子元素之前的边框合并现象.png
4).png
浮动的清除
浮动的影响
如果在一个大的没有设置高的div中有两个小的div，那么这个大的div的高就是这两个小div之和，但是一旦两个小的div都浮动了，那么大的div就没有高了---------浮动之后div不会撑开父容器。
去除浮动的影响
设置具体的高度。（可以用尽量用）
但是，有时间页面上的某些容器，不能直接设置高度，那么高度不能确定，必须使用清除浮动。
①clear 浮动清除
clear:left clear:right clear:both
19 <div class="father">20 <div class="son1"></div>21 <div class="son2"></div>22 <div class="clear"></div>23 </div>24 .father {
25 width: 600px;
26 background: blue;
27 border: 1px solid #000;
28 /* height: 100px; */
29 }
30 .son1, .son2 {
31 width: 100px;
32 height: 100px;
33 background: red;
34 float: left;
35 }
36 .clear {
37 clear: both;
38 }总结：这种方法操作起来比较简单，但是如果一旦页面上要清除浮动的元素较多，那么会造成结构混乱（但是也不推荐使用）。
②使用overflow:hidden清除浮动:
39 <style type="text/css">40 .father {
41 width: 600px;
42 background: blue;
43 border: 1px solid #000;
44 overflow: hidden;/*清除子元素的浮动*/
45 }
46 .son1, .son2 {
47 width: 100px;
48 height: 100px;
49 background: red;
50 float: left;
51 }
52 .nav {
53 width: 600px;
54 height: 60px;
55 background: purple;
56 }
57 /*浮动以后的子元素，不会撑开父容器*/
58 </style>59 </head>60 <body>61 <div class="father">62 <div class="son1"></div>63 <div class="son2"></div>64 </div>65 <div class="nav"></div>66 </body>总结：这样清除也很方便，但是不推荐使用。如果页面一旦出现了定位，那么定位可能会受到影响
③使用伪元素来清除：
67 .clearfix:after {68 content:"";69 height: 0;70 line-height: 0;71 visibility: hidden;72 display: block;73 clear: both;74 }75 .clearfix {76 zoom: 1;/*兼容ie浏览器*/77 }总结：使用伪元素来清除浮动，虽然代码比较多，但是是现在使用的最多方法。
伪元素来清除浮动.png
overflow属性
Hidden: 超出部分隐藏。 Scroll: 滚动条（超出的部分会显示在滚动条之内） Auto: 如果内容超出会显示滚动条，如果没有那么会自动隐藏。(一般会使用Auto)
2.定位position
position 属性指定了元素的定位类型。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
定位的分类, position 属性的四个值：
1）static:（静态） 默认情况下浏览器中所有的盒子都是静态的，（用来清除定位的） HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right影响。2）absolute（绝对定位） a）如果盒子没有父盒子，那么在绝对定位的时候这个位置是相对于body的。 b)如果盒子有父盒子，那么在绝对定位的时候这个位置还是相对于body的。 c)如果盒子有父盒子并且父盒子有定位，那么这个时候我们的盒子定位是相对于父盒子的。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。3) fixed 固定定位 Position: fixed; 固定定位是否占据页面的位置：不占。 表现：不管页面到了哪里，图片永远都停留在屏幕的同一位置。 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持. Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。4) relative 相对定位 相对定位元素的定位是相对其正常位置,相对于自己原来的位置(想当年)。 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。 相对定位元素经常被用来作为绝对定位元素的容器块。
一般情况下定位的使用:
1）父元素中使用子元素定位 2）并且遵守一个约定：父元素使用相对定位，子元素使用绝对定位。
定位.png
3.CSS标签嵌套显示影藏
常见行内元素和块级元素
行内元素：span,u,b,i,strong块级元素：h1,h2,h3--h6,div,p
标签嵌套原则:
1）行内元素可以嵌套行内元素，但是不能嵌套块级元素 2）块级元素可以嵌套行内元素。 3）少数块级元素不可以嵌套其它的块行元素： 在p标签中不可以使用div。 在h标签中最好不要用div。
标签的显示和隐藏
Overflow:hidden;隐藏超出父容器的内容Display:none; 隐藏元素Visibility: 隐藏元素
Display会完全隐藏原来的div是不占位置的Visibility也会隐藏原来的div但是div还是会占据着自己的位置不放，屏幕上显示的是空白。Display:none;------->Display:block; 隐藏 显示
4.初始化CSS
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img ,input,button{ margin:0; padding:0; }顺带提一下图片和文字共存时, 图片的居中设置
vertical-align: middle;垂直居中。 如果在文字和图片中设置这个属性，那么它们之间的对齐方式是：以两者的中线为标准对齐。 Vertical-align不适用于块级元素。只适合行内元素： Vertical-align跟inline-block是更配 Margin是盒子模型的一部分，但是我们在计算盒子宽度的时候，一般不将这个计算在内，为的是因为方便计算。
总结一下脱离标准流的方法:
1.浮动 2.定位(但是相对定位没有脱离标准流,绝对定位和固定定位脱离标准流)
CSS相关文章
《CSS简介,语法,选择器分类使用,属性设置》
《CSS盒子模型、内外边距、边框、行高、背景》
《CSS浮动、定位详解、标签嵌套显示隐藏、CSS初始化》
《CSS精灵图、滑动门详解》
作者：楚简约
链接：https://www.jianshu.com/p/27c956ca1a52
共同学习，写下你的评论
评论加载中...
作者其他优质文章
