前言：我把CSS样式的一些基础知识总结了一下，作为自己的复习

---

1.内联与块

内联元素：内联元素不会占用一整行，他只会占用他自己元素大小的空间
块级元素：会独占一行的元素，无论他的内容有多少他都会独占一整行
a元素可以包含除了他本身以外的任意元素，p元素不能包含其他任何块元素

2.CSS选择器

选择器	语法
元素选择器	标签名{}
id选择器	#id属性值{}
类选择器	.class属性名
选择器分组	选择器1，选择器2，选择器3{}（通过选择器分组可以同时选中多个选择器对应的元素）
通配选择器	*{}（它可以用来选中页面中的所有元素）
复合选择器	选择器1选择器2选择器3{}（可以选中同时满足多个选择器的元素）
后代元素选择器	祖先元素 后代元素{}（选中指定元素的指定后代元素）
子元素选择器	父元素>子元素（选中指定父元素的指定子元素）
伪类选择器	a:link ->为没有访问过的链接添加样式，a:visited ->为访问过的链接修改样式，a:hover ->为鼠标移入链接时修改状态，a:active ->表示的是超链接被点击的状态，:focus伪类->获取焦点
伪元素控制样式	:first-letter表示设置第一个字符的样式，:before表示元素最前边的部分，一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些元素，:after同理
属性选择器	[属性名]选取含有指定属性的元素，[属性名=”属性值”]选取含有指定属性值的元素，[属性名^=”属性值”]选取属性值以指定内容开头的元素,[属性名$=”属性值”]选取属性值以指定内容结尾的元素，[属性名*=”属性值”]选取属性值以包含指定内容的元素。（可以根据元素中的属性或属性值来选取指定元素）
子元素的伪类	first-child 可以选中第一个子元素，last-child 可以选中最后一个子元素，nth-child 可以选中任意位置的子元素：该选择器后边可以指定一个参数，指定要选中第几个子元素，even 表示偶数位置的子元素，odd 表示奇数位置的子元素
兄弟选择器	（可上网搜索语法）
否定伪类	:not(选择器)（可以从已选中的元素中剔除某些元素）

3.选择器优先级

（1）内联样式——1000

（2）id选择器——100

（3）类和伪类——10

（4）元素选择器——1

（5）通配选择器——0

（6）继承的样式——无优先级

当选择器中包含有多种选择器是，需要将多种选择器的优先级相加然后再比较。但是注意，选择器优先级计算不会超过他的最大数量级，如果选择器的优先级一样，则使用靠后的样式。

并集选择器的优先级是单独计算。

可以在样式的最后添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式。
#4.链接标签的伪类顺序
最好以link、visited、hover、active的顺序写，否则由于这四个选择器的优先级是一样的，会造成一些样式的覆盖。
#5.盒子模型

盒子的可见框大小由内容区，内边距和边框共同决定

内边距：由padding属性来设置，内边距会影响盒子的可见框大小，元素的背景会延申到内边距

外边距：外边距指的是当前盒子于其他盒子之间的距离，他不会影响盒子可见框的大小，而会影响到盒子的位置。通过margin属性来设置。margin值可以设置为一个负值，那么则会导致指定位置的边距向相反方向移动，值还可以设置为auto，可以使用 margin:0 auto 来使得元素在父元素中水平居中

外边距的重叠：垂直外边距的重叠，在网页中垂直方向的相邻外边距会发生外边距的重叠，这种情况是指兄弟元素之间的相邻外边距会取最大值而不是取和，注意是相邻外边距，如果有其他元素使得两个元素分开，则不会重叠。而如果父子元素的外边距相邻了，那么子元素的外边距将会设置给父元素。

内联元素：不能设置width和height,但是可以设置水平竖直方向的内边距和边框，水平方向的内边距以及边框会影响布局，而竖直方向的则不会影响，会产生覆盖的效果。内联元素支持水平方向的外边距，但是不支持垂直方向的外边距，并且水平方向的外边距不会重叠，而是求和。

6.元素在文档流中的特点

块元素：

（1）块元素在文档流中会独占一行，块元素会自上向下排列

（2）块元素在文档流中默认宽度是父元素的100%

（3）当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距

（4）块元素在文档流的高度默认被内容撑开

内联元素：

（1）内联元素在文档流中只占自身的大小，会默认从左到右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右

（2）在文档流中内联元素的高度和宽度默认都被内容撑开
#7.盒模型的浮动
当我们设置一个元素脱离文档流之后，它下边的元素会立即向上移动，而浮动的元素会尽量的向页面的左上或者右上漂浮，直到遇到父元素的边框或者其他的浮动元素。
如果浮动元素上边是一个没有浮动的元素，则浮动元素不会超过块元素。浮动的元素不会超过他上边的兄弟元素，最多一边齐而且浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果在文档流中，子元素的宽度默认占据父元素的全部，但是当元素设置浮动之后，会完全的脱离文档流，高度和宽度都是被内容撑开的。而且在内联元素开启浮动以后就会变成块元素，就可以随便设置宽度和高度了。

8.高度坍塌问题

高度塌陷

当我们为子元素设置浮动以后，子元素就会脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷，由于父元素的高度塌陷了，就会导致父元素下面的所有元素向上移动，从而导致布局混乱。

探讨解决高度塌陷的方法

我们可以打开元素的BFC，当开启元素的BFC以后

• （1）父元素的垂直外边距不会和子元素重叠
• （2）开启BFC的元素不会被浮动元素所覆盖
• （3）开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC：

• 1.设置元素浮动
• 2.设置元素的绝对定位

使用以上两种方式开启虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题。

• 3.设置元素为inline-block

这种方式可以解决问题，但是会导致宽度丢失

• 4.将元素的overflow设置为一个非visible的值

这是比较推荐的方法，将overflow设置为hidden是副作用最小的方式

解决高度坍塌的改良办法

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能，clear可以用来清除其他浮动元素对当前元素的影响，none是默认值不会清除浮动，left会清除左侧浮动元素对当前元素的影响，right会清除右侧浮动元素对当前元素的影响，而both则会清除两侧浮动元素中，对他影响最大的那个元素的浮动。

（1）我们可以直接在高度塌陷的父元素的最后添加一个空白的div，由于这个div没有浮动，所以他是可以撑开父元素的高度的，基本没有副作用

（2）可以通过after伪类向元素的最后一个添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理是一样的，几乎没有副作用

.clearfix:after{
/*添加一个内容*/
content:"";
/*转换为一个块元素*/
display:block;
/*清除两侧的浮动*/
clear:both;
}

可以向需要处理的元素中添加这个样式就不会出现高度塌陷问题了

9.定位属性

static

默认值

relative

1.当开启了元素的相对定位以后，而不设置偏移量，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位

3.相对定位的元素不会脱离文档流

4.相对定位的元素会使元素提升一个层次
5.相对定位不会改变元素的性质，块还是块，内联还是内联

absolute

1.当开启了元素绝对定位，会使元素脱离文档流

2.当开启了元素的绝对定位以后，而不设置偏移量，元素不会发生任何变化

3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位的元素会提升一个层级

5.绝对定位会改变元素的性质，内联元素会变成块元素，块元素的高度和宽度会被内容撑开

fixed

固定定位也是一种特殊的绝对定位，大部分特点和绝对定位一样，但是固定定位永远都会相对于浏览器窗口进行定位，并且永远会固定在浏览器窗口的某个位置，不会随着滚动条移动

如果定位元素的层级是一样的，那么下边的元素会盖住上边的，我们还可以通过z-index属性来设置元素的层级，可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高越优先显示，但是对于没有开启定位的元素不能使用z-index，而且父元素的层级再高也不会盖住子元素