WEB阶段学习总结

元素的分类

块元素

块元素独占其父元素页面的一行，可以设置宽、高，默认的宽度是其父元素的宽度，默认的高度由内容决定，可以嵌任何类型的元素（除p元素外）。

行内元素

正常情况下，行内元素不会换行，会在一行排不开的情况下自动换行，不可以设置宽、高，其宽高都是由其内容决定的，行内元素大多数用来嵌套文本或其他的行内元素，一般不会嵌套块级元素。

行内块元素

行内块元素不会独占一行，可以设置宽、高。

选择器的分类

选择器分为基础选择器、复合选择器、关系选择器、属性选择器和伪类选择器。

基础选择器又包括元素选择器、id选择器、类选择器和通配符选择器；复合选择器分为交集选择器和并集选择器两种；关系选择器包括子代选择器、后代选择器、兄弟选择器。

CSS三大特性（层叠性、优先级、继承性）

层叠性

当有多个相同的选择器选中同一个元素，并且为该元素设置同一个样式属性，但是属性值设置的不一样，此时会优先使用靠近元素的选择器所设置的样式。但是如果选择器的优先级不同，无法通过层叠性解决样式冲突，此时需要使用优先级。

优先级

优先级同样是用来解决样式冲突的，各类选择器优先级由低到高依次为：通配符选择器，元素选择器，类/伪类选择器，id选择器，行内样式，!import。选择器最终的优先级是变化的，可以进行叠加，但是只能改变最高位，不能突破等级。

继承性

通过继承性可以减少代码的书写量，一些样式可以通过继承实现，不需要频繁的去写代码。可以继承的属性有字体相关的属性、列表相关的属性、文本相关的属性。

盒模型

网页实际可以看成是由一个一个的小盒子组成的，这些小盒子就是盒模型，它由四部分组成：内容区（content）、边框（border）、内边距（padding）和外边距（margin）。块元素的盒子具备margin、border、padding并且任何方向设置都有效，都会影响页面的布局。行内元素的盒子同样也具备margin、border、padding，但是垂直方向的属性是不会影响页面布局的。

正常情况下都是标准盒模型，可见框的大小=内容区+内边距+边框，但是可以通过css属性box-sizing更改成为IE盒模型（怪异盒），此时盒模型可见框的大小=width+hight。

在这里存在一个外边距折叠问题，外边距折叠问题的本质就是两个盒子共享一个外边距，只有垂直方向上才存在外边距折叠问题，水平方向不存在。

解决外边距折叠问题有以下几种方法：

1. 手动给父元素加一个边框。
2. 给父元素加一个内边距。
3. 给父元素开启BFC。

浮动

通过设置float属性，让一个子元素向其父元素的左侧或者右侧浮动，该属性有三种取值：none（默认值，不浮动），left（左浮动），right（右浮动）。浮动元素具备以下特点：

1. 脱离文档流，不在占据文档流中的位置，所以后续的元素会自动向上。
2. 向父元素的左侧或者右侧浮动。
3. 浮动元素默认情况下不会超出其父元素。
4. 浮动元素向左或者向右移动时不会超过它前面的浮动元素。
5. 如果浮动元素上面是一个没有浮动的正常块元素，浮动元素会停止上移。
6. 如果浮动元素的后面是一个正常的没有浮动的块元素，则正常元素会自动上移。

脱离文档流的元素的特点：

1. 元素一旦脱离文档流，将不再占据文档流中的位置。
2. 脱离文档流后，元素不再有任何的区分，统一视作一致的。
3. 脱离文档流的元素可以设置宽高，不会独占一行。

浮动元素由于无法撑开父元素，所以在父元素没有设置高度的情况下会造成父元素的高度塌陷问题，解决方法有以下几种方式：

1. 手动给浮动元素的父元素设置具体的高度。
2. 通过给父元素设置浮动，开启BFC。
3. 通过overflow:hidden;为父元素开启BFC。
4. 通过为父元素设置display:table;开启BFC。

定位

定位是一种布局手段，通过定位可以将元素摆放到任意位置，它包括静态定位static、相对定位relative、绝对定位absolute、固定定位fixed、粘滞定位sticky。

相对定位

相对定位是元素相对于自身最开始占据文档流的位置进行定位的。元素开启相对定位后，不设置偏移量不会有位置上的变化，相对定位会提升元素的层级关系，相对定位的元素不会脱离文档流，元素的特性不会被改变。

绝对定位

绝对定位的元素是相对于其最近的开启了定位的包含块的元素进行定位的。元素开启绝对定位后不设置偏移量同样不会发生位置上变化，开启绝对定位后元素会脱离文档流，不再占据页面的实际位置，绝对定位会改变元素的性质，不再区分行、块、行内块的概念，绝对定位会提高元素的层级。

固定定位

固定定位也是一种绝对定位，它的大部分特点与绝对定位是一样的，唯一不同的是定位的参照基准不一样，固定定位是相对于浏览器的视口进行定位的，并且固定定位的元素不会随着网页的滚动条进行滚动。

粘滞定位

粘滞定位和相对定位的特点基本一致，不同点是粘滞定位可以在元素到达某个点时将其固定。