CSS基础2

1.CSS的三大特性

　　1）层叠性：样式相同的就近选择，样式不同的互不影响

　　2）继承性：子类会继承父类的样式

　　3）优先级：

　　　　选择器相同，按照层叠性执行

　　　　选择器相同按照选择器权重执行，选择器权重：！important > 行内样式 style="" > ID选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承或者*

2、盒模型（boder边框，content内容，padding内边距，magrin外边距）

　　1）border边框

　　　　border-边框宽度

　　　　border-style:边框样式（solid实线边框，dashed 虚线边框，dotted电线边框）

　　　　border-color:边框颜色

　　　　border:宽度样式颜色（复合写法，无先后顺序）

　　　　border-collapse: collapse;合并相邻的边框

　　2）padding 内边距 padding:20PX顺序为上右下左， padding:20px 30px 上下20px，左右30px，padding:20px 30px 10px 上30px，左右20px，下10px

　　3）margin 外边距

　　注：内边距和边框会影响盒子的大小,margin不会影响

3、元素水平居中

　　1）块元素水平居中：将外边距左右边距设置为auto

　　2）内元素和行内块元素水平居中：在父元素样式中设置 text-align:center

4、外边距垂直塌陷处理：

　　1）给子块元素添加边框
　　2）给父元素添加内边距
　　3）设置over-flow:hidden

5、无序排列，去掉li前面的. :list-stylw:none

6、圆角边框:border-radius:length

7、盒子阴影：box-shadow:h-shadow v-shadow blur spread color inset

　　1）h-shadow:水平阴影的位置，允许负值
　　2）v-shadow：垂直阴影的位置，允许负值
　　3）blur:模糊距离
　　4）spread：阴影的尺寸
　　5）color:阴影颜色

8、网页布局准则：

　　1）多个块级元素纵向排列找标准流
　　2）多个块级元素横向排列找浮动
9、浮动：float

　　（1）浮动注意事项：

　　　　1）浮动可以和标准量搭配使用，父盒子采用标准流，子盒子采用浮动

　　　　2）一浮全浮

　　（2) 清除浮动

　　　　1）额外表前阀：clear:both清除浮动：在最后一个浮动盒子后添加块级标签，并添加clear:both属性　　

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>

</body>

</html>

　　　　2）父元素添加overflow:hidden属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要清除浮动</title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
             800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
             300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
             200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

　　3）伪元素清除：给父盒子添加clearfix类，同时添加

　　　　.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
       　　 }

       .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素清除浮动</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>
　　4）双伪元素：在父元素中添加类clearfix，同时添加样式
　　　　.clearfix:before, 
　　　　.clearfix:after { 
　　　　　　content: ""; display: table; 
　　　　　　} 
　　　　.clearfix:after { clear: both; } 
　　　　.clearfix { *zoom: 1; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素清除浮动</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>
 10、元素溢出：overflow
　　1）overflow:visible (默认值，内容不会被修剪，会呈现在元素框之外）
　　2）overflow:hidden (内容被修剪，其余内容不可见）
　　3）overflow:scroll (内容被修剪，但是显示滚动条查看其余元素）
　　4）overflow:auto （内容被修剪，但是显示滚动条查看其余元素）
　　5）overflow:inherit （规定从父盒子继承overflow属性）