继承性层叠性权重盒模型浮动事件

1.继承性和层叠性:继承性:像一些文本的属性,color,text-*,line-*,font-*这些属性是可以继承下来的,text-decoration:underline(下划线)也可以继承;

 <style>
        a{
            text-decoration:none;
        }
        .father{
            /*100px;*/
            height:100px;
            color:red;
            font-size:40px;
            background-color:yellow;
            line-height:100px;
            text-align:center;
            text-decoration:underline;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">
            <span>我是大赢家</span>
            <a href="#">alexsb</a>
        </div>
    </div>
</body>
在这段代码中span就继承了 .father的文本设置,例如:color , font-size, text-decoration:underline;等

2.层叠性就是权重,谁的权重大就显示谁的属性;

如何看权重?

就是数数,数(选择器的个数):优先id 然后是class 最后是标签 ;

1.针对于选中的标签(谁的权重大,就会显示谁的属性);

2.如果权重一样大,以后设置的为准;

3.如果是继承下来的属性,它权重为0,跟选中的标签没有可比性;

4.如果权重都为0,那么谁描述的近(就近原则),就显示谁;

5.如果权重为0,描述的一样近的时候,回到原始状态(数权重);

 <style>

　　　　因为是继承下来的权重为零

　　　　//按照 优先 id 然后class  最后 标签;数数  111
         .wrap1 #box2  div{
            color:yellow;
        }
　　　因为是继承下来的权重为零

　//按照 优先 id 然后class  最后 标签;数数  111

最后按照谁后设置,就显示谁的原则;
        #box1 .wrap2 div{
            color:red;
        }

    </style>
</head>
<body>
    <div class="wrap1" id="box1">
      <div class="wrap2" id='box2'>
         <div class="wrap3" id="box3">
            <p>猜猜我的颜色</p>
         </div>
      </div>
   </div>

</body>
按照上面讲述的方式来看权重

三 . 盒模型

属性: width : 内容的宽度;

　　　height: 内容的高度;

　　　padding : 内容到border的区域;

　　　border : 边框;

<!--border:1px solid red;-->
<!--一个值:上下左右-->
<!--padding:10px;-->
<!--/*两个值:上下 左右*/-->
<!--padding:10px 20px;-->
<!--/*三个值:上 左右 下*/-->
<!--padding:10px 20px 30px;-->
<!--/*四个值:上 右 下 左*/-->
<!--padding:10px 20px 30px 40px;-->
一,二,三,四个值得设置,只有border可以, margin,padding都没有,而且border可以做出三角形的状态

　　 margin : 标准流的标签, margin的使用通常是用在兄弟之间的标签;

　　坑 : margin水平方向是没有任何问题;

　　垂直方向会出现"坍塌问题",以设置的最大值为基准;

以后在写网站标准流的盒子,垂直方向只设置一个方向即可;

在两个块中,一个包含另一个,如果儿子踹他爹,可以踹,那么只需要给他爹加border,那么问题来了,页面冗余,可能会影响页面的布局;

记住 : 前提是标准流下的盒子;

　　如果是父子之间调整位置,那么使用padding , margin的坍塌要避免,只设置一个方向;

浮动元素 : 对行内元素和块元素的影响;

1.如果标准流下的标签浮动,定位(绝对固定,相对固定)了,不区分是行内还是块级元素,可以任意设置宽高;

2.浮动对块元素的影响,像把块元素转化成行内元素;

切记 : 浮动不做压盖现象;

<style>
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style:none;
        }
        /*去除a中的下划线*/
        a{
            text-decoration:none;
        }
        .box{
            /*420px;*/
            height:100px;
            background-color:purple;
        }
        .box ul{
            /*100%;*/
            height:50px;
        }
        .box ul li{
            /*浮动的标签不区分块还是行内标签,浮动的标签可以任意设置宽高*/
            /**/
            float:left;　　　　　　　　　　　　　　　　//float就是浮动 ,参数有两个, left(左浮动) ,right(右浮动)
            /*70px;*/
            height:100px;
            /*像一些字体属性是可以继承下来:text-*,color,font-**/
            font-size:14px;
            color:green;
            /*文本水平居中*/
            text-align:center;
            /*盒子水平居中*/
            /*margin:0 auto;*/
            /*行高==盒子的高度 实现文本垂直居中*/
            line-height:100px;
            margin:0 10px;
            /*cursor:pointer;*/
        }
        .box ul li a{
            color:yellow;
            /*height:50px;*/
            display:block;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <span>秒杀</span>
            </li>
            <li>
                <a href="#">
                    砥砺奋进考虑
                </a>
            </li>
            <li>
                <a href="#">PLUS闪购</a>
            </li>
            <li>
                <a href="#top">
                    海外代购
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com">京东服饰</a>
            </li>
            <li>
                <a href="#">京东金融</a>
            </li>
        </ul>
    </div>

</body>
</html>

继承性 层叠性 权重 盒模型 浮动 事件

继承性层叠性权重盒模型浮动事件