CSS浮动、定位详解、标签嵌套显示隐藏、CSS初始化-原创手记-慕课网

1.浮动

元素的浮动属性float

Float:left/right;

元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

浮动可以理解为：在一个游泳中，标准流是我们在池底放盒子，浮动就相当于放的这个盒子“飘起来了”。“飘起来了”的盒子会遮住池底盒子。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值;}

webp

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>

webp

2)边框合并问题.png

webp

3)父子元素之前的边框合并现象.png

webp

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        }

总结：使用伪元素来清除浮动，虽然代码比较多，但是是现在使用的最多方法。

webp

伪元素来清除浮动.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）并且遵守一个约定：父元素使用相对定位，子元素使用绝对定位。

webp

定位.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.定位(但是相对定位没有脱离标准流,绝对定位和固定定位脱离标准流)

作者：楚简约
链接：https://www.jianshu.com/p/27c956ca1a52