CSS属性

继承

子元素会继承父元素的某些属性
一般都是跟文字相关的属性才会被继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

属性值的计算过程

一个元素在渲染的过程中，该元素的每个css属性都必须值
整个网页渲染的流程：
DOM树
css属性值从无到有的过程

1. 确定声明值

2. 层叠冲突
   样式层叠冲突的时候，如何处理？
   2.1 重要性
   2.2 比较特殊性 选择器的权重计算
   2.3 比较代码属性的顺序，后来者居上

3. 使用继承

4. 使用默认值

面试题：
以下代码中，a元素和p元素的颜色分别是什么？
css <style> div { color: red; } </style>
html <div> <a href="#">link</a> <p>Lorem, ipsum.</p> </div>
a元素用的是浏览器设置的默认字体颜色
p元素用的是从父元素中继承过来的颜色

两个特殊的CSS取值

1. inherit ： 手动（强制）继承
2. initial ：初始值，将该元素设置为默认值

元素布局排列的三种方式：

1. 常规流
2. 浮动

浮动

文字环绕的问题
横向排列

基本特征 浮动的元素

1. 当一个元素浮动后，元素必定为块盒

更改display值为block
所以在浮动的盒子里面不可能有行盒的参与
需要修改float属性的值
默认值:none

    left 
    right

2. 浮动元素的包含块(父元素)，和常规流一样 为父元素的内容盒

浮动后 盒子尺寸

1. 宽度为auto时，适应内容宽度
2. 高度为auto时，与常规流一样，适应内容的高度
3. margin： auto 为0
   具体的值有效

浮动后盒子的排列

1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子靠上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时 ，无视浮动盒子 浮动盒在前，常规流盒在后
5. 行盒在排列的时候，会避开浮动盒子
   如果文字没有在行盒中，浏览器会自动生成一个不可见的行盒包裹文字，该行盒叫做匿名行盒
6. 外边距合并不会发生

定位

1、什么是定位
元素该出现在网页的哪个位置处
2、定位方式
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
又称为 文档流定位
网页元素默认定位方式
页面元素
块级元素-从上到下的方式排列
行内元素-从左到右的方式排列

4、浮动定位

什么是浮动定位

如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示

属性

属性：float
取值：
1、none
默认值，无浮动定位
2、left
左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
3、right
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
5、浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
块级元素：允许修改尺寸
行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。
6、清除浮动影响
属性：clear
取值：
1、none
默认值，不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响
3、right
清除该元素右边的浮动元素所带来的影响
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0
解决方案：
1、直接设置父元素高度
弊端：必须要知道父元素高度是多少
2、设置父元素也浮动
弊端：对后续元素会带来位置的影响
3、为父元素设置 overflow 属性
取值：hidden 或 auto
弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both

高度塌陷

高度塌陷的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
高度坍塌：在流式布局中十分常见。当父元素没有高度，子元素设置了float时。
原因：子元素脱离文档流，无法撑开父元素

怎么解决？

.content:after{
        clear: both;
        content: '';
        display: block;
        height: 0;
    }
.content-middle{ *zoom:1; } 

使用CSS伪类选择器在其后添加一个新的’content’
并设置display: block;height: 0;clear: both;
缺一不可
优点：不用加一个div给加大浏览器负担，避免better-scroll不能使用（高度写死）,不用担心overflow:hidden隐藏的问题

清除浮动带来的影响

CSS属性clear:
    默认值：none
    left：清除左浮动，该元素必须出现在前面所有浮动盒子的下方
    right：清除有浮动，该元素必须出现在前面所有有浮动盒子的下方
    both：清除左右浮动，该元素必须出现在前面所有浮动元素盒子的下方

1. 创建一个空元素 ，专门用来清除浮动带来的影响 并不推荐
   因为会多创建一个元素
2. 伪元素选择器

<style>
/*clearfix写在高度塌陷的元素上*/
    .clearfix::after {
        /* height: 50px;
        background-color: orange;
        clear: left; */
        content: " ";
        display: block;
        clear: both;
    }
</style>

补充

有什么不同
visibility:hidden
隐藏 元素隐藏，位置保留
display:none
隐藏 元素隐藏，位置不保留
opacity：0 设置透明度，取值0-1之间，0 透明 1 不透明
也能达到隐藏的效果，位置保留

overflow:hidden 隐藏的是从父元素中溢出的部分

3. 定位