版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/sxzxiaofeng168/article/details/99423772

Css知识点复习总结

标准文档流

页面内的元素由左到右、由上到下按照顺序依次排列

特点:

1、空白折叠:多个空格会被合并成一个空格(解决办法:使用&nbsp来解决)

2、自动换行，一行满以后会自动换行3、所有元素默认都是底边对齐

2.标准文档流元素分类

行内元素和块级元素

(行内块元素:里边是块属性套了一个行属性的壳)

行属性:行内显示、不能设置宽高、只能嵌套行标签

块属性:独占一-行换行显示、可以设置宽高、可以嵌套行和块(p和h除外)

行内块: input、 img、 textarea 可以设置 宽和高(目前学习的标签中这3个元素也被称称作为替换元素）

行和块的互相转换:

display (控制元素显示方式) :元素的出生是自带一个默认display属性决定元素该怎么样显示

block转成块属性

inline转成行属性

inline-block 转成行内块属性

none不显示(元素已经加载到了，但是我们只是控制它不显示而已)

3，控制元素隐藏有两种方法:

display: none :

visibility: hidden

对比:

1: display: none不 占用空间visibility: hidden占 用空间

2、display:none不继承直接把当前元素包括所有元素的内容全部隐藏掉了

visibility: hidden继承，只隐藏当前的元素，但是子元素之类的元素都是继承了visibility属性，所以才隐藏，如果我们改变了继承的属性，那么子元素也是可以显示的

4，什么是盒子模型:

1、在htm1中，把每一一个元素都当做成一一个盒子，拥有盒子的平面外形和空间。

2、盒子模型由内容(content) 内边距(padding) 边框(border) 外边距( margin) 4个组成

3、盒子模型分为标准盒子模型和怪异盒子模型(混杂模式、ie6、 box-sizing:
border-box)

4、标准盒模型所占用大小是内容+内边距+边框+外边距

怪异盒模型所占用的大小是内容 (width) +外边距

内容: width为我们设置内容的区域

盒子模型的补充:

内容区域的盒子:content- -box .

内边距区域的盒子: padding-box

边框区域的盒子:border-box

padding:

1、可以显示背景颜色和背景图

2、不可以为负值

3、主要是用来撑开元素的内容和边框之间的距离常用在撑开父子之间的距离

border:

边框下也有背景颜色和背景图片(背景图片默认显示原点位置是padding的左上角) 2、border-width border-style border-color

margin:

行属性标签不支持上下的margin设置（例如span标签）

1、不能显示背景颜色也不能显示任何的内容

2、只要用来撑开兄弟之间的距离

3、如果第一个子元素和最后一个子元素分别拥有上magrin和 下margin 那么可能会出现父级塌陷

4、上边元素的下margin和下边元素的上:margin会进行重合，然后取大的 值作为两个之间的距离

5、margin还可以做水平居中操作，当一个元素设置宽度以后，设置左右m argin为auto,那么元素的左margin和右margin为自动平分进行居中

6、margin可以设负值:

上为负元素向上移动

左为负:元素向左移动

右负:元素所占用的宽度减小，但是实际显示没有发生变化

下为负: 元素所占用的高度减小，但是实际显示也没有发生变化

元素的重叠:

1、负margin:负margin移动元素以后，原来位置不再保留。

负margin让元素占用空间变小，后边的元素可以覆盖当前元素

2、定位:

相对定位:原来位置保留并且不会挤到其他元素，只会重叠

绝对定位:不保留原来位置离页面流

3、浮动

原来位置不保留,并且可以盖住其他元素，脱离页面流

元素的浮动:

浮动主要做文字环绕特效，水槽原理

浮动元素不能超过上一个兄弟元素(无论是否浮动)

浮动元素在一行排列， 顶部对齐

浮动的影响:

浮动对于行标签:可以设置宽高，完美支持margin

浮动对块标签:可以设置宽高，不再独占行

清除浮动的原因及方法

清浮动:清浮动并不是不让元素浮动，而是清除浮动元素脱离页面流之后，对父级的影响(不占用父级的空间）

清浮动有5种方法：

方法一:在父级书写overflow: hidden 等开启BFC的代码，常用overf1ow: hidden但是BFC代码都有自己的其他效果，在不影响代码的情况下可以使 用BFC清浮动overflow: hidden;

方法二:在所有浮动元素的最下边书写一个空标签(块级标签)书写clear属性 为 both；在结构中多书写一行标签，有时候会影响代码可读性
<div style= "clear: both; "></div>

方法三:
在浮动元素后边书写一- 个br,给br标签 书写一个属性: clear: all属性
<br clear="all">

方法四:
给父级设置高度也可以清除浮动，但是基本不用；height: 330px;

方法五:
给父级书写after伪元素替代直接在浮动元素 下书写空标签的方法
般可以直接命名一个清浮动的类名， 将来如果需要清浮动直接把类名给浮动元素的父元素即可

/*css hack清浮动：因为低版本的IE不支持伪元素，所以要在低版本IE中      给父元素开启haslayout (其实就是我们现代浏览器的BFC)

.clearFix{*zoom: 1;}  是css hack
设置zoom有个作用是 启haslayout

clearFix: after{
/伪元 素没有cbntent属性是不生效的/
content:”\200B”;/空字符/
height:0;/高度为0不占用空间/
display: block; /清浮动的标签是一个块 元素/
clear: both;
}

定位

相对定位:

1、相对自身的位置定位(ex: right: 100px元素向 左移动)
2、不会脱离页面流
3、left right top bottom控制元素的定位位置left 和top具有优先性
4、一个元素设置相对定位，不会影响这个元素的其他属性
5、一般用在书写包含块或者是给非定位的元素设置堆叠顺序(只有定位属性  才支持z-index)

绝对定位:

1、相对包含块的位置进行定位2、脱离页面流
3、1eft right top bottom控制元素的定位位置left和top 具有优先性
4、改变元素的属性
1) :行标签:可以设置宽高，完美支持margin
2) :块标签:不再独占一行
5、在浮动解决不了的布局下可以使用;在元素层叠的时候也可以使用

相对浏览器窗口定位(固定定位) :

1、相对于浏览器窗口定位位置只和浏览器窗口相关
2、脱离页面流
3、left right top bottom 控制元素的定位位置left和top具 有优先性
4、改变元素的属性
1) :行标签:可以设置宽高，完美支持margin
2) :块标签:不再独占一行
5、无论页面滚动条或窗口大小怎么改变，元素的位置始终相对窗口定位
6、ie678不支持

设置元素的堆叠顺序:

Z-index，整数；z- index默认为auto，值越大越靠前；值为负，会到当前页面流元素的后边