前段小笔记

1-css层叠性.html

概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠

当一个标签样式发生冲突的时候，要决定显示那个样式：

1. 样式不冲突

        多个样式同时作用于标签（同时应用于元素）

    2.样式冲突

        同级选择器

        不同级选择器，由选择器优先级决定

2-css长度单位.html

1. px 固定单位
2. em 相对单位：父元素的font-size 不设置：1em =16px
3. 百分比 相对单位 父元素大小
4. rem 相对单位 相对于html的font-size 不设置：1rem =16px

 3-图片居中.html

    给父元素设置水平居中

      text-align: center;

   转块级标签，设置margin

        margin: 50px auto;

4-CSS%20浮动.html

      浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

   文档流：标准流

文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示

标签该一行显示就一行显示，该一行显示一个就一行显示一个

            p--正常独立成行

            a-水平布局

  左浮动 右浮动

     浮动可以使块级标签在一行显示

5-浮动的特性.html

1. 浮动元素脱离正常标准流不脱离文本流，也就是元素浮动之后不占位
2. 提升层级
3. 子元素设置浮动后会导致父元素高度塌陷，父元素高度为0
4. 子元素的宽度之和大于父元素的宽度会自动折行
5. 可以使行级标签支持宽高

注意：任何标签都可以设置浮动，元素设置浮动后，不再区分标签的分类了，都类似于行内块标签(可以设置宽高，具有盒模型特性)，但是没有行内块标签的换行和空格被解析

谁需要在一行显示或者谁需要设置浮动就设置到谁的身上

6-为什么要清浮动.html

  子元素设置浮动后，脱离正常标准流，不占位，会导致父元素高度

  导致父元素的背景颜色无法显示背景、边框无法正常显示

  会影响后续布局

7-清除浮动方法

1.给父元素设置固定高度

优缺点：不够灵活，适用于高度固定的布局中

2.给父元素设置overflow属性

hidden   auto     scroll

优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁

3.给父元素设置浮动 {float: left;} 不用，了解即可

优缺点：会产生新的浮动问题

4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both

优缺点：代码冗余，通俗易懂，书写方便

clear: left; 清除左侧浮动带来的影响

clear: right;清除右侧浮动带来的影响

clear: both;清除两侧浮动带来的影响

5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式：

.clearfix::after{

content:'';

display:block;

clear:both; }

优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确 -->

8-css伪元素.html

1) 什么是伪元素

伪元素创造的标签是行级标签

2）如何创建伪元素

- element::before{ content:"伪元素的文本内容"; 属性名: 属性值; }

element元素内部，内容之前，添加“伪元素的文本内容”

- element::after{ content:"伪元素的文本内容"; 属性名: 属性值; }

element元素内部，内容之后，添加“ 伪元素 -->

                                                                                   @南乔