Uint 5.css继承权重,盒模型和border padding

一 .css的继承性和权重

　　1.1 继承性:继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。可以被继承的属性有:color,font-*,text-*,line-*就这4个文本属,不能被继承的属性有:盒子元素,定位元素(浮动,绝对定位,固定定位).　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试</title>

    <style type="text/css">

    /* p和span标签将会继承body的属性设置 */

        body{

            background-color: greenyellow;

        }

        /* 如果下面的不被注释掉,那么p会覆盖body设置的属性 */

        p{

            background-color: red;

        }

    </style>

</head>

<body>

    <span>我是一行内容</span>

    <p>我是一个段落</p>

</body>

</html>

继承性测试

　　1.2 权重(优先级):所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序.　　

　　样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

　　1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；

　　2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100

　　3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

　　4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css层叠性</title>

    <style type="text/css">

        /* 层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了

        权重： 谁的权重大，浏览器就会显示谁的属性

        谁的权重大？  非常简单   数数

        id的数量  class的数量  标签的数量 */

        /* 对比权重 第一位,发现#box大于其他的,后面不就比较了. */

         /* 1 0 0 */

        #box{

            color: red;

        }

        /* 0 1 0 */

        .con{

            color: greenyellow;

        }

        /* 0 0 1 */

        p{

            color: gold;

        }

    </style>

</head>

<body>

    <p id="box" class="con">

        我是什么颜色?

    </p>

</body>

</html>

权重例子

　　1.3 权重相同时怎么处理?

　　　　此时有3种情况.

　　　　1.如果属性不是继承来的,权重相同时,后设置的属性生效,也就是后来者居上.

　　　　2.如果属性是继承来的,那么适用就近原则,谁的描述离标签近,就显示谁的属性.

　　　　3.如果都是继承下来的且都是靠都一样近,那么就要比较权重了.　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>层叠性2</title>

    <style type="text/css">

    /* 比较id数量 class数量 标签数量 */

    /*     #box1 .wrap1 p{

            color: red;

        }

        #box2 .wrap3 p{

            color: green;

        } */

        /* p标签在这里是继承wrap3,继承的权重为0 */

    /*     #box1 #box2 .wrap3{

            color: red;

        } */

        /* 1 1 1 */

/*         #box2 .wrap3 p{

            color: greenyellow;

        } */

        /* x下面2个都是继承来的属性且和p标签都一样近,这时候就要比较权重了. */

        /* 2 1 1 */

        #box1 #box2 .wrap3 p{

            color: green;

        }

        /* 1 1 1 */

        #box2 .wrap3 p{

            color: greenyellow;

        }

    </style>

</head>

<body>

    <!-- 当权重一样的时候,后设置的属性生效.(后来者居上) 后面的覆盖前面的

        继承的权重为0

        总结:

            1.先看有没有被选中,如果被选中,比较权重.

            2.没有被选中,权重为0

            3.如果属性都是继承下来的,权重都是0,然后本着"就近原则":谁的描述离标签近,就显示谁的属性 .

            如果都是继承下来的且都是靠都一样近,那么就要比较权重了.

    -->

    <div id="box1" class="wrap1">

        <div id="box2" class="wrap2">

            <div id="box3" class="wrap3">

                <p>我是一个段落.</p>

            </div>

        </div>

    </div>

</body>

</html>

权重相同例子

　　1.4 !important属性

　　!important表示权重无限大. 它不影响继承来的权重(在继承来的属性上设置无效)　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>权重深入important</title>

    <style type="text/css">

        /* !important表示权重无限大. 它不影响继承来的权重(在继承来的属性上设置无效).

            尽量少用.

            */

        p{

            color: pink !important;

            font-size: 12px !important;

        }

        .sep1{

            color: red;

            font-size: 30px;

        }

        .sep2{

            color: greenyellow;

            font-size: 40px;

        }

    </style>

</head>

<body>

    <div>

        <p class="sep1 sep2">我是什么颜色?</p>

        <p class="sep2 sep1">我是什么颜色?</p>

    </div>

</body>

</html>

!important

二. 盒模型

　　CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

　　元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。外边距可以是负值.内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

　　盒模型的计算:

　　假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

padding属性:

　　定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。　详细介绍:padding

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>认识padding</title>

    <style type="text/css">

        .box1{

            width: 300px;

            height: 300px;

            /*padding: 20px;*/

            background-color: red;

            /*border:2px solid red;*/

            /*小属性写法*/

            /*padding-top: 20px;

            padding-bottom: 20px;

            padding-left: 20px;

            padding-right: 20px;

            /*综合属性写法,注意,综合属性写法的时候,是按照顺时针的方式设置padding的(上右下左)*/

            /*4个值表示 上 右 下 左*/

            /*padding:20px 30px 40px 50px;*/

            /*3个值表示 上 左右 下*/

            padding:20px 30px 40px;

            /*2个值表示 上下 左右*/

            padding:20px 30px;

            /*1个值表示 上下左右*/

            padding:20px;

        }

    </style>

</head>

<body>

    <!-- padding就内边距,padding是有背景颜色的.背景色和区域颜色是一样的.也就说background-color将会填充整个border以内的区域.

        padding的距离就是border到内容区域的距离.

        padding是有4个方向的.所有我们能分别描述4个方向的padding.

        两种方法:

                1.写小属性.

                2.写综合属性,用空格隔开.

     -->

    <div class="box1">

        哈哈哈哈哈哈哈啊哈

    </div>

</body>

</html>

padding的属性方法

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td都是有padding属性的.

border属性:

　　元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。详细介绍:border　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>认识border</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 300px;

            border: 5px solid red;

        }

        /*写小属性的方法:*/

    /*    .box{

            border-width: 5px 10px;

            border-style: solid dotted double dashed;

            border-color: green red blue pink;

        }*/

        /*按照方向区分*/

        .box{

            border-top-width: 2px;

            border-top-style: solid;

            border-top-color: red;

            border-right-width: 2px;

            border-right-style: solid;

            border-right-color: red;

            border-bottom-width: 2px;

            border-bottom-style: solid;

            border-bottom-color: red;

            border-left-width: 2px;

            border-left-style: solid;

            border-left-color: red;

        }

        /*指定方向不设置border  border-left:0 也表示没有border*/

        .box{

            border-left: none;

        }

    </style>

</head>

<body>

    <!-- border:边框.有3个要素:

    1.粗细,如果不填写此属性,但是填写了线性(solid).默认的粗细是3px

    2.线性

    3.颜色,如果不填写此属性,默认是黑色

     -->

     <div class="box">哈哈哈</div>

</body>

</html>

border属性方法

margin属性:

　　围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。margin属性接受任何长度单位、百分数值甚至负值。详细介绍:margin

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin基础</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        /*一般情况下,左边的margin要比上边的宽,因为有一个塌陷效应,body本身是有8px的margin,我们设置20px的时候,会把body本身的margin塌陷到我们设置的20px里.所以上方的margin就是20px,左边则是28px*/

        div{

            width: 300px;

            height:300px;

            border: 5px solid green;

            background-color: pink;

            margin: 20px;

        }

        /*margin也可以设置4个方向的距离,用法和border类似*/

    </style>

</head>

<body>

    <div>

        哈哈哈

    </div>

</body>

</html>

margin属性方法

注意:

border,padding,margin都可以通过值复制来设置相应的粗细或者边距.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试</title>

    <style type="text/css">

        div{

            width: 200px;

            height: 200px;

            border: 2px solid red;

            border-style: solid;

            border-color: red;

            border-width: 2px 6px;

            padding: 3px 5px ;

            margin: 10px 20px;

        }

            /*4个值表示 上 右 下 左*/

            padding:20px 30px 40px 50px;

            /*3个值表示 上 左右 下*/

            padding:20px 30px 40px;

            /*2个值表示 上下 左右*/

            padding:20px 30px;

            /*1个值表示 上下左右*/

            padding:20px;

    </style>

</head>

<body>

    <div></div>

    <span>我是一行内容</span>

    <p>border的值复制是通过border-width来设置的</p>

</body>

</html>

值复制