1.浮动
元素的浮动属性floatFloat: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
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 15 16
17
2)边框合并问题.png
3)父子元素之前的边框合并现象.png
4).png
浮动的清除
浮动的影响
如果在一个大的没有设置高的div中有两个小的div，那么这个大的div的高就是这两个小div之和，但是一旦两个小的div都浮动了，那么大的div就没有高了---------浮动之后div不会撑开父容器。
去除浮动的影响
设置具体的高度。(可以用尽量用)
但是，有时间页面上的某些容器，不能直接设置高度，那么高度不能确定，必须使用清除浮动。
①clear 浮动清除clear:left clear:right clear:both
19
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
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 59 60
61总结：这样清除也很方便，但是不推荐使用。如果页面一旦出现了定位，那么定位可能会受到影响
③使用伪元素来清除：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.初始化CSShtml, 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相关文章
作者：楚简约
链接：https://www.jianshu.com/p/27c956ca1a52
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
