CSS的继承性和层叠性 + 盒模型

CSS的继承性和层叠性 (坑)

1、继承性

　　继承指的是继承父类标签的属性样式.

　　可以继承的属性有:

　　color tex-xxx font-xxx line-xxx (中间带 - 的)

　注意:

　　盒模型的属性（浮动、绝对定位、固定定位）是不能继承下来的

　　<a> 标签有特殊情况, 设置a标签的颜色大小一定要选中a, 千万不能用继承,继承不管用.

<style type="text/css">
        <!---->
        /*以下属性是可以被继承的*/
        .box p{
            color: green;
            font-size: 30px;
            line-height: 30px;
            background-color: red;
            text-align: right;
        }
</style>

2、层叠性

对同一标签元素设置的时候,

覆盖: 谁的权重大, 就会按照谁的设置显示样式,如颜色大小等.

（1）行内> id > class > 标签 ♥
　　　　1000 > 100 > 10 > 1
（2）数数数 id class 标签 (必须按照顺序数)
（3）先选中标签，权重一样，看代码顺序, 以后设置为主
（3）继承来的属性它的权重为0 ，与选中的标签没有可比性
（4）如果都是继承来的属性，保证就近原则
（5）都是继承来的属性，选择的标签一样近，再去数权重, 权重一样的,看代码顺序,以后设置的为主.

数选择器,看权重

<style type="text/css">
        /*2 1 1 */
        #father1 .box2 #father3 p{
            color: yellow;
        }

        /*2 1 1*/
        #father1 #father2 .box3 p{
            color: green;
        }
</style>

权重一样的看代码顺序

<style type="text/css">
    /*继承来的属性 它的权重为0，跟选中的标签没有可比性*/
        #father1 #father2 #father3{
            color: red;
        }
        /*设置的属性 优先级 高于继承来的属性*/
        #father1 .box2 .box3 p{
            color: green;
        }
</style>

继承来的属性权重为0, 选中标签属性 > 继承来的

<style type="text/css">
        /*继承来的属性 权重为0*/

        /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/
        /*box2 比box1更深入*/
        #father1 .box2{
            color: red;
        }
        .box1{
            color: green;
        }
        /*都是继承来的 ，都一样深*/
        /*2 1 0*/
        #father1 #father2 .box3{
            color: red;
        }
        /*1 2 0*/
        #father1 .box2 .box3{
            color: green;
        }
</style>

都是继承来的,看就近,就近一致看权重,权重一致看代码顺序

### 权重一样的看代码

<style type="text/css">
        /*2 1 1 */
        #father1 .box2 #father3 p{
            color: yellow;
        }

        /*2 1 1*/
        #father1 #father2 .box3 p{
            color: green;
        }
</style>

### 继承来的属性权重为0, 选中标签属性 > 继承来的

<style type="text/css">
    /*继承来的属性 它的权重为0，跟选中的标签没有可比性*/
        #father1 #father2 #father3{
            color: red;
        }
        /*设置的属性 优先级 高于继承来的属性*/
        #father1 .box2 .box3 p{
            color: green;
        }
</style>

### 都是继承来的,看就近,就近一致看权重,权重一致看代码顺序

<style type="text/css">
        /*继承来的属性 权重为0*/

        /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/
        /*box2 比box1更深入*/
        #father1 .box2{
            color: red;
        }
        .box1{
            color: green;
        }
        /*都是继承来的 ，都一样深*/
        /*2 1 0*/
        #father1 #father2 .box3{
            color: red;
        }
        /*1 2 0*/
        #father1 .box2 .box3{
            color: green;
        }
</style>

3、!important 的使用

　　!important：设置权重为无限大（IE6不支持）。

　　!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important，因为使用它会影响页面的布局。

　　示例：选择器{样式:值!important;}

盒模型

　　在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

　　盒模型有两种：标准模型和IE模型。我们在这里重点介绍标准模型。

一、盒模型示意图

二、盒模型属性

　　（1）width：内容的宽度

　　（2）height：内容的高度

　　（3）padding：内边距，边框到内容的距离

　　（4）border：边框，就是指盒子的宽度

　　（5）margin：外边距，盒子边框到附近最近盒子的距离，兄弟之间的距离

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
            /*margin-left: 50px;*/
        }
    </style>
</head>
<body>
    <!-- 
    width:内容的宽度
    height:内容的高度
    padding:内边距   内容到边框的距离
    border:边框
    margin:外边距  与兄弟之间的距离   一个边到另一个边的距离
     -->
     <div class="box"></div>
</body>
</html>

三、盒模型的计算

　　如果一个盒子设置了width，height，padding，border，margin(咱们先不要设置margin，margin有坑，后面会介绍)。

　　盒子的真实宽度 = width+2*padding+2*border

　　盒子的真实宽度 = height+2*padding+2*border

　总结: 如果保证盒模型的大小不变，加padding 就一定要减width或者减height

　前提是：在标准文档流中

　　　　padding：父子之间调整位置

　　　　margin: 兄弟之间调整位置

四、padding（内边距）

　　内边距, 就是边框到内容之间的距离.

　　另外padding的区域是有颜色的,并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域.

　　注意: margin外边距也遵循这个原则.

后面跟的参数的个数不同代表的含义不同,   也可以通过具体的位置来确定内边距的值.

　　<style>
        .box{
            width: 200px;
            height: 200px;

            /* 空格隔开 参数个数不同代表的含义不同 也可以具体制定位置  */

            /*上下左右*/
            padding: 10px;

            /*上下20  左右30 */
            padding: 20px 30px;

            /*上20  左右30  下40 */
            padding: 20px 30px 40px;

            /*顺时针算 上右下左*/
            padding: 20px 30px 40px 50px;
        }


        .box2{
            /*  可以通过具体的位置来设置  */
            padding-left:10px;
            padding-right:20px;
            padding-top: 30px;
            padding-bottom: 40px;
        }
    </style>

五、border（边框）

　　三要素: 宽度样式颜色

　　如果颜色不写，默认是黑色。

　　如果粗细不写，默认不显示边框。

　　如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

宽度

1px

2px等

样式

solid 实线

dashed 虚线

dotted 点线

double 虚线

颜色

rgb

十进制

十六进制

　　示例：border三要素可以分开设置，也可以综合设置

<style>
        *{
            /*先将标签默认的padding margin 清空*/
            padding: 0;
            margin: 0;

        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            
            /*width  style color*/
    /* 根据方向来设置border */

            /* 边框的四面的三要素全都设置上*/
            border:5px solid green;

            /* 三要素都设置 */
            border-left: 5px solid green;
            border-right: 1px dotted yellow;
            border-top: 5px double purple;
            border-bottom: 1px dashed purple;

            /* 以左为例 分开设置三要素 */
            border-left-style: solid;
            border-left-width: 1px;
            border-left-color: green;

            /* 四面全都设置 */
            border-width: 5px 10px;
            border-color: green yellow;
            border-style: solid double;

            /*border: 5px solid green*/

        }
    </style>

　　border:none；

　　border：0；

　　表示border没有设置样式。

　　border : transparent; 透明的

示例1：boeder制作小三角

<style>
        /*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
    </style>

制作小三角

示例2：border制作圆

<style>
        div{
            /*color: transparent;*/
            width: 200px;
            height: 200px;
            background-color: red;
            /*制作圆角*/
            /*border-radius: 3px;*/

            /*以下两种方式都可以*/
            /*border-radius: 100px;*/
            border-radius: 50%;
        }
    </style>

制作圆

六、margin（外边距）

1、margin：外边距的意思，表示边框到最近盒子的距离。也有四个方向，并且可以设置1、2、3、4个值。

<style>
        /*表示四个方向的外边距离为20px*/
        margin: 20px;
        /*表示盒子向下移动了30px*/
        margin-top: 30px;
        /*表示盒子向右移动了50px*/
        margin-left: 50px;

        margin-bottom: 100px;
    </style>

2、margin的塌陷问题（垂直方向的坑）

　　margin指兄弟标签之间的距离，因此使用的前提是必须在标准文档流下，

　　然而在标准文档流下给兄弟盒子都设置margin时：

　　　　（1）水平方向：不会出现任何问题，两者会相加显示

　　　　（2）垂直方向：会出现"塌陷问题"，那么以较大的为准，那么我们称这种现象为塌陷。记住这种现象，在布局垂直方向盒子的时候要注意margin的用法。水平方向上没有塌陷现象。

　　当我们给两个标准流下的兄弟盒子设置浮动之后，脱离了文档的标准流，不占据页面位置，不再遵循那些规则，就不会出现margin塌陷的问题。

　　因此以后在设置垂直方向上兄弟之间的距离时，只给其中的一个设置margin-top，或者margin-bottom即可。

3、父子盒子方向的坑

　　在标准文档流中，子盒子设置margin-top，父盒子没有设置border的话，也会跟着往下走。

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*float: left;*/
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-left: 50px;
            margin-top: 50px;
        }
 </style>

　　运行上面代码发现两个盒子整体下移了50px，其实我们是想让子盒子下移50px，父盒子不要动，但是因为父盒子没有设置border，所以父盒子也掉下来了，一旦给父亲设一个border就好了，那么问题来了，我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方法只有一种，就是使用父盒子的padding，让子盒子向下走。

　　总结：margin是描述兄弟之间的关系，而padding描述的是父子盒子之间的关系，要先让子盒子在父盒子中的位置发生变化，需要设置父盒子的padding，使内容区域发生变化。

4、margin：0 auto;

　　当一个div元素设置margin：0 auto;时就会使盒子居中，我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？若设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。若设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离，当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离，此时我们发现盒子就居中了。

　　注意：

　　　　（1）使用margin: 0 auto;时，水平居中盒子必须有width，要有明确width值；

　　　　（2）如果给盒子设置浮动、或者固定定位、或者绝对定位，那么margin: 0 auto;失效；

　　　　（3） margin：0 auto;使盒子居中，而不是居中文本，文字水平居中使用text-align: center;

七、清除默认样式

　　有一些标签会默认自带样式，比如有些会自带padding、margin等，

　　ul标签会默认的有padding-left需要清除，

　　a标签会默认有下划线，

　　input标签会默认有border和outline,

1、初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

2、并集选择器清除样式

　　使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

　　参考网址：https://meyerweb.com/eric/tools/css/reset/

/*  http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
　　*/
　　html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, 
　　dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, 
　　legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
　　menu, nav, output, ruby, section, summary, time, mark, audio, video {
    　　margin: 0;
    　　padding: 0;
    　　border: 0;
    　　font-size: 100%;
    　　font: inherit;
    　　vertical-align: baseline;
　　}

　　/* HTML5 display-role reset for older browsers */

　　article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
　　}
　　body {
        line-height: 1;
　　}
　　ol, ul {
        list-style: none;
　　}
　　blockquote, q {
        quotes: none;
　　}
　　blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
　　}
　　table {
        border-collapse: collapse;
        border-spacing: 0;
　　}

View Code

posted @ 2018-09-18 08:48 葡萄想柠檬 Views(246) Comments(0) 收藏举报

刷新页面返回顶部

葡萄想柠檬