CSS基础总结

css 盒子模型：

什么是盒子模型？
（只要是一个标签，这个标签就是盒子） 一个盒子是有内容区域，也就是指width和height。
通常对于一个盒子可以通过6大属性来设置
6大属性：宽，高，边框，内边距，外边距，背景颜色
（1） 内容的宽高：width 和 height
（2）内边距： padding 分四个方向 指内容与边框之间的距离
（3）边框: border border:1px solid red; border-top:1px solid red;
（ 4） 外边距：margin 分四个方向 水平居中。
对于块标签，可以设置width和height
对于行内标签，不能设置widht和height
注意：

【1】 如果width没有设置，它的值是auto，不同类的标签，auto的含义不同。
如果是块级标签，auto具有贪婪性，如果是行级标签，auto具有懒惰性。

【2】height没有设置，它的值是内容的高度，如果内容一样，它的高度是根据font-size来决定的。

【3】width和height除设置px外，还可以设置百分比。

【4】 默认情况下，背景（背景颜色和背景图片）会填充padding的。

【5】对于块级元素，padding在垂直方向上也是占据空间的。

【6】 对于行级元素，padding在垂直方向上是不影响空间的高度，水平方向上还是有影响的。

小总结：
    对于块级元素，padding在四个方向上都占据空间，对于行级元素，padding仅仅是水平方向上占据空间，在垂直方向上不占据空间，但是如果设置背景，也是会填充的。
    对于块级标签，margin在四个方向上都有效，对于行级标签，margin在垂直方向上无效，在水平方向上有效。

对于上下两个块级元素（兄弟元素），如果都设置了Margin，那么它们的margin有可能重叠在一起。最终的margin是取大优先。

父元素的margin-top和它的第一个子元素的margin-top会重叠。最终的margin是取大优先。

父元素的margin-bottom和它的最后一个子元素的maring-bottom也会重叠，也是取大优先。

取消重叠：
    1，父子元素之间重叠
        加border-top  border-bottom 
        加padding-top  padding-bottom 
        把元素设置成行内块（重叠一定是发生在块级元素的,并是垂直方向上才有重叠，水平方向上是没有重叠的）
    2，兄弟元素之间重叠
        把元素设置成行内块
        浮动
        ☆ 写页面时，要避免重叠问题，最好是要么设置上面的盒子下margin，要么设置上下盒子的上margin

如果margin是正值，如margin-top:20px。就表示这个盒子距离上一个盒子或浏览器边界有20px的距离。或这样理解，如果是正值，表示向下移动20px。
如果margin是负值，如margin-top:-20px。就表示向上移动20px

应用：
    1，大盒中有四个小盒子，每个小盒子中间没有间隙，只有1px的边框
        方案1 ： 只设置一个边框 
        方案二：margin-right:-1px;

浮动

标签的分类：
块级标签 独占一行，支持宽和高
行内标签 并排显示，不支持宽和高
行内块标签 并排显示，支持宽高
标准文档流：默认情况下块标签独占一行，行标签并排显示，满一行自动换行，这种模式叫标准文档流。
（1）浮动的作用：让块级元素可以并排显示。
如果元素浮动了，它就破坏了标准文档流，让块级元素也能并排显示了。当有了浮动，浮动就脱离了标准文档流，也就是说标准文档流中的有一些规则就不再适用。

浮动元素并没有完全脱离标准文档流，仅仅半脱离。
好处：让块给元素并排显示了。
块级盒子没有设置宽度，那么宽度就是父元素（body）的100%，也就是占满整个屏幕。浮动之后：

（3）浮动的块级元素具有包裹性：宽度尽可能小，最终仅仅是内容的宽度。
前提是 块级元素 且没有指定宽度和高度它 浮动了
（4）浮动可以让行内标签变成块级标签
说白了，一个行内标签浮动了，那么它就成了块级标签，也就是可以设置宽度和高度了。
（5）浮动具有破坏性，浮动会造成两方面的影响，
第1个对父元素的影响，那么这个父元素的高度和塌陷的，也就是说高度变成了0，让兄弟元素往上跑。 父元素高度塌陷的前提是子元素全部浮动。如果有子元素没有浮动，也是不会有高度塌陷问题。
如何解决高度塌陷（如何清除浮动元素对父元素造成影响）：
1，给父元素加高度，加高法
2，给父元素加上一个overlflow:hidden
3，父元素也浮动了
第2个是对它后面的元素的影响。
也就是不想让后面的元素钻上去，也就是所谓的清除浮动所造成的影响。
clear:left 清除左浮动造成的影响 基本不用
clear:right 清除右浮动造成的影响 基本不用
clear:both 清除左右浮动造成的影响 用的最多
谁受到影响了，那么就在谁的身上加上clear:both
所以 所谓的清除浮动就是去清除浮动所造成的影响。
影响包括两个方面：一个是对父元素的影响，另一个是对后面的元素的影响。
清除对父元素的影响：
1，加高法
2，overflow:hidden （本身这个属性是超出部分隐藏）在这里清除浮动造成的影响。
相反，在它设置超出部分隐藏时，也让盒子清除浮动了。
3。让父元素也浮动 （半脱离文档流的浮动的儿子们也受父亲的管控，所以父元素浮动了，就是带着儿子们一起出国了）
清除对兄弟元素的影响：
1，clear:both
上面的的几种写法，也会用，但是通常我们会作用伪元素来清除浮动。
先来普及一下小知识：
伪类：不存在真实的class=“xx” 例如:hover（鼠标放置时的状态）
伪元素：不存在真实的一个元素 例如：：after
这里 当父元素高度塌陷了，可以使用伪元素来清除浮动。

所以呀！做项目时通常会封装一个清除浮动的类：

    .clear:after{
        content: "";
        display: block;
        clear: both; /* 清除对兄弟元素造成的影响 */
        overflow: hidden;   /* 清除对父元素造成的影响 */
    }

（6）字围效果
浮动的元素是半脱离标准文档流，如果前面的元素浮动了，后面的元素就是向上移动，如果后面的元素中有文字，文字会围绕着浮动的元素，也叫字围效果。
如果完全脱离，是不会有字围效果的，也就是说明了，浮动为什么仅仅是半脱离标准文档流。
（7）浮动元素的贴靠性
如果父元素的宽度一直减小，那么浮动的元素有贴靠性，也就是说，如果父元素中装不了三个子元素，那么老三先去贴才老大，前提是老大能贴上去。如果贴不上去，那么它就贴父元素的边框。
（8）浮动元素是半脱离标准文档流，也是受父元素的管控。
浮动元素是半脱离标准文档流，也是受父元素的管控
如果子元素全部浮动了，并且父元素也浮动了，也不会有高度塌陷问题。

层布局

CSS中常用的布局方案：
1，流式布局 遵循标准文档进行的布局
男标签上独占一行 女标签要并排显示，满一行自动换行

    2，浮动布局 
         让男标签在一行在并排显示。
         浮动有很多的特点：
            A，破坏性
            B，字围性  浮动半脱离标准文档流
            C，包裹性  如果一个块级元素浮动了，在没有设置宽高时，宽高就是内容宽高
            D，让行级标签变成块级标签  一个行级元素浮动了，就可以设置宽高了
            E，贴靠性
            F，造成影响（对父元素的影响，对兄弟元素的影响）  加高法  overflow:hidden  clear:both  伪元素
            G，并排显示（脱标）
            F，...

    3，层布局  
        实现层布局，就是使用定位。层布局的元素是完全脱离标准文档流的。

    4，flex布局  
        不需要浮动   在写移动端时用的非常多

层布局：
  	定位的元素是完全脱离标准文档流的
    通过定位来实现，定位也是CSS中的一个属性，叫position。
    static  默认值   不定位 
    relative  相对定位    相对于它本身应该出现的位置 
    absolute  绝对定位   是根据参考点进行定位 
    fixed  固定定位  浏览器窗口  

相对定位：
    position:relative  只使用position:relative还是不行的，需要配合(边偏移)top,left,right,bottom，其它一个或两个来设置偏移量。
         应用场景：
        1，局部的位置调整  
        2，作为绝对定位的一个参考点 

position:absolute:绝对定位是根据参考点进行定位，参考点可以设置到父元素上面，也可以设置到父元素的父元素上面的，如果没有设置参考点，最后就以body作为参考点。
如何设置呢？
通过一个属性来设置：position:relative。此时，这个属性就不再表达相对定位了，它仅仅表示是一个参考点。
也就是说，不只position:relative，position:absolute/fixed也可以作为参考点。
得是往往我们就心positon:relative作为参考点，也就是所说的父相子绝
绝对定位也是需要通过top,left,right,bottom来设置偏移量。
如果一个行内元素定位了，也是会变成块级元素。

z-index:
    如果多个元素都绝对定位，有可能重叠到一起了，可以通过z-index来改变它们的前后顺序。

绝对定位的应用场景：
    1，把一个小元素定位到一个大元素上面的。

固定定位：
position:fixed。参考点是整个页面。

flex 布局

（参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

flex布局四大概念：
    容器：如果给一个盒子加上了display:flex，这个盒子就是一个容器。
    项目：容器中的直接子元素就是项目
    主轴：默认情况下，项目在是主轴上进行排列的，主轴默认是水平向右的
    交叉轴：和主轴垂直的那个轴叫交叉轴

有了flex布局，就可以让div在水平方向并排显示，不需要浮动了。
flex布局，在flex布局中不需要浮动。webapp用的最多的是flex布局。

学习flex布局，主要是学习关于容器中的一些属性和关于项目中的一些属性。
富余空间概念：在主轴上，项目排列完后，还剩余的空间。

容器中相关的属性：
    flex-direction: row / row-reverse / column / column-reverse  改变主轴方向
    flex-wrap: wrap / nowrap  控制容器中的项目是否换行
    justify-content  处理富余空间  
         flex-start  富余空间在后面
         flex-end  富余空间在前面
         center  富余空间在两侧
         space-between 富余空间位于项目中间 
         space-around 富余空间环绕项目
    flex-flow:是flex-direction 和 flex-wrap的复合属性
    align-items: 设置项目在交叉轴上的位置  flex-start   flex-end    center
    align-content: 如果有多根主轴，设置多根主轴的位置关系, 如果项目只有一根主轴，该属性不起作用。说白了，就是垂直方向上的富余空间。

项目中的属性：
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 如果有富余空间，里面的项目如何分配。分配富余空间。
flex-shrink 在同一行上，如果项目装不下，也没有换行，怎么去压缩项目。
flex-basis 如果项目没有设置宽度，默认的宽度是内容的宽度，可以通过flex-basis来设置项目在主轴占据的宽度
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self 单独去设置某一个项目的对齐方式
总结：
容器中的属性：
flex-direction 改变主轴的方向
flex-wrap 控制容器中的项目是否换行
flex-flow 是flex-direction 和 flex-wrap的复合属性
justify-content 处理主轴上的富余空间
align-items 设置项目在交叉轴上的位置
align-content 如果有多根主轴，设置垂直方向上的富余空间

项目中的属性：
    order  改变项目中主轴上的顺序。 值越大越主轴的终点。
    flex-grow  分配富余空间的
    flex-shrink  设置压缩比例  了解就OK 
    flex-basis 设置项目在主轴上占据的大小
    flex  flex:1  表示项目均匀分配富余空间
    align-self 单独去设置某一个项目的对齐方式

继承性与层叠性

继承性：儿子继承父亲的属性
可以继承的属性（font-一类的 text-一类的 line-height color）
【可以说是子承父业，也可以说是龙生龙，凤生凤，老鼠的儿子会打洞，哈哈】
层叠性：就近原则吧（长江后浪推前浪，把前浪拍在沙滩上）
优先级：和权重有一定的关系如下
通配符选择器<标签选择器<类选择器<ID选择器<行内<!important
0000<0001<0010<0100<1000<!important