HTML+CSS 基础

1、三大特性

1.1、层叠性

层叠性就是浏览器处理样式冲突的一种能力，当同一个标签设置相同的属性为不同的值时，就产生了冲突

样式冲突，就以就近原则，后面的把前面的层叠掉

样式不冲突就不层叠

1.2、继承性

子元素可以去使用父元素上定义的一些属性值（子承父业）。

默认继承的属性有font-、text-、line-、list-style

a标签的文字颜色及下划线不会默认继承，需要选中a标签才能修改

input标签的font-family默认不会继承,如果需要继承,需要设置font-family:inherit;

1.3、优先级

    选择器                              权值

    通配符（*）                           0

    标签选择器（tagName）                 1

    类/伪类选择器（.className :hover）     10

    ID选择器（#id）                      100

    行内样式                             1000

权值越大，优先级越高，权值一样，按照顺序后定义的生效（就近原则）

复合选择器的权值是组成这个选择器的所有基本选择器的权值相加（特殊：群组选择器按单个选择器的权值计算，没有提升优先级的作用）

2、三种布局之浮动布局

三种布局：文档流布局、浮动布局、层布局（定位）

1、文档流布局：标签按照本身的属性排列，比如块标签从上往下排列，行内标签从左到右排列

2、浮动布局可以让标签脱离文档流，向左向右排列

2.1、float:left; 左浮动

脱离文档流（在文档流中不占位）

尽可能往左走，直到碰到父级的边缘或者相邻的浮动元素的边缘就停止

多个左浮动的元素从左到右依次排列

2.2、float:right; 右浮动

脱离文档流（在文档流中不占位）

尽可能往右走，直到碰到父级的边缘或者相邻的浮动元素的边缘就停止

多个右浮动的元素从右到左依次排列

2.3、float:none; 不浮动

取消浮动，使标签回到文档流中排列

3、浮动产生的问题？

浮动的元素脱离文档流之后，无法撑开父级元素的高度，导致后面的模块无法正常布局。

如何解决---清除浮动？

1、给父元素添加 height （不够灵活）

2、给父元素添加 overflow:hidden; （overflow：hidden本身的功能是把元素超出的内容隐藏，所以不适用于所有情况）

3、额外标签法：在所有浮动标签之后添加 不浮动的块级标签，并且给其添加clear:both; (产生冗余的标签)

4、伪元素法：原理类似额外标签法，拿伪元素代替额外标签

     .clearfix::after{

        content: "";  /* 给伪元素添加内容，必须添加该属性伪元素才有效 */

        display: block;  /* 转换成块元素 */

        clear: both; /* 清除浮动属性 */

     }

     .clearfix{

         *zoom:1;  /*解决ie6兼容问题*/

     }

4、伪元素

    element::after{  /* 在元素的末尾添加内容 */

        content:'';  //必须设置content，其他属性才有效

        display:block; //伪元素默认为行内标签，需要转换成块才能支持宽高

        ...

    }

    element::before{  /* 在元素的开头添加内容 */

        content:'';  //必须设置content，其他属性才有效

        ...

    }

定位（position）

三种布局： 文档流、浮动、层布局（定位）

1、相对定位

position:relative;

特点：

位移参考位置是标签本身没有定位之前所在的位置

不会脱离文档流（文档流中依然占位，不会影响其他标签的正常排列）

2、固定定位

position:fixed;

特点：

位移参考位置是浏览器可视窗口

会脱离文档流

3、绝对定位

position:absolute;

特点：

定位参考父级：距离绝对定位元素最近的一个带有position:relative/fixed/absolute;属性的祖先元素，如果没有这元素，就是相对body定位

会脱离文档流

4、静态定位

position:static;

静态定位就是不定位，设置静态定位的元素的 left/right/top/bottom/z-index属性都无效

5、偏移属性

    left: 距离定位参考位置的左边缘的位移，正值往右，负值往左

    right: 距离定位参考位置的右边缘的位移，正值往左，负值往右

    top:距离定位参考位置的上边缘的位移，正值往下，负值往上

    bottom:距离定位参考位置的下边缘的位移，正值往上，负值往下

    * left和right如果同时设置left生效

    * top和bottom如果同时设置top生效

6、层级属性

z-index属性可以控制定位元素的层级关系，默认值都为0，数值越大层级越高，数值相同，按照标签的顺序排在后面的层级高

浮动和定位的对比

浮动的元素脱离文档流，但是不会脱离文本流（文字、图片、表单元素不会被浮动元素覆盖，会围绕浮动的元素排列）

定位的元素既脱离文档流，又脱离文本流，可以实现元素之间真正的层级关系

脱离文档流的元素的特点

    float:left;

    float:right;

    position:absolute;

    position:fixed;

脱离文档流的元素不再区分行内或者块级，默认宽度都由内容撑开，都可以设置宽高及所有盒模型属性

其他属性

1、垂直对齐方式

    vertical-align:baseline; 基线对齐

                   middle;  中间对齐

                   top;  顶部对齐

                   bottom; 底部对齐

                   -0px;

2、内容溢出处理

    overflow:visible; 内容超出依然显示

            hidden; 隐藏，截断

            auto; 内容溢出显示滚动条，内容不溢出不显示滚动条

            scroll;始终显示滚动条

3、显示和隐藏

    display:none; 隐藏,不占位

    display:block/inline/inline-block; 显示

    visibility:visible; 可见

    visibility:hidden;  不可见，占位

4、多种透明

    transparent;全透明

    rgba(0,0,0,0.5); IE低版本浏览器不支持

    opacity:0.5; 元素整体透明

    （元素本身的颜色以及内部的所有内容都透明）

    0 表示全透明 1表示不透明 0.X 半透明 ，IE低版本浏览器中不支持

   

    filter:alpha(opacity=50); IE浏览器专属透明滤镜