继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素

内容总结:

1.继承性和层叠性
                继承性: 像 一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的
                
                
            2.层叠性就是权重 ,谁的权重大就显示谁的属性
               如何看权重:就是数数,选择器的个数 :id class 标签  
               
                        1.针对于选中的标签(谁的权重大 就会显示谁的属性)
                        2.如果权重一样大,以 =>后设置的为准
                        3.如果是继承下来的属性,它权重为0 ,跟**选中的标签**没有可比性
                        4.如果权重都都为0,那么谁描述的近(就近原则),就显示谁的属性
                        5.如果权重为0,描述的一样近的时候,回顾原始状态(数权重)

3.盒模型:
                属性:
                    width :内容的宽度
                    height: 内容的高度
                    padding:内容到border的区域
                    border:边框
                    margin:标准流的标签 margin的使用通常是用在兄弟之间的标签
                            坑: margin水平方向是没有任何问题
                                垂直方向 会出现'塌陷问题' 以设置最大的值为基准,以后在写网站
                                标准流的盒子 垂直方向只设置一个方向即可
                                
                            如果儿子踹他爹可以踹 那么只需要给父加border,那么问题来了页面冗余,可能会影响界面的布局
                            
                    
                 记住:前提是标准流下的盒子
                    如果是父子之间,调整位置,那么使用padding
                    margin的塌陷要避免,只设置一个方向
                    
                    
                浮动元素 对行内元素和块元素的影响:
                    (1)如果标准流下的标签浮动,定位(绝对定位,固定定位)了 不区分是行内还是块级元素
                        可以任意的设置宽高
                    (2)浮动对块元素的影响,像把块元素转化成行内元素
                    
                    
                    
                *************浮动不做压盖现象*****************

07-css的继承性和层叠性

css有两大特性：继承性和层叠性

继承性

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">

    <style>
        /**{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }*/
        .box{
            /* 420px;*/
            height: 50px;
            background-color: purple;
        }
        .box ul{
            /* 100%;*/
            height: 50px;

        }
        .box ul li{
            /*浮动的标签不区分块还是行内标签,浮动的标签可以任意的设置宽高*/
            /*background-color: red;*/
            float: left;
            /* 70px;*/
            height: 50px;
            /*像一些字体属性是可以继承下来: text-*,color,font-**/
            font-size: 14px;

            color: green;
            /*文本水平居中*/
            text-align: center;
            /*盒子水平居中*/
            /*margin: 0 auto;*/
        
            /*行高 == 盒子的高度 实现文本垂直居中*/
            line-height: 50px;
            margin: 0 10px;
            /*cursor: pointer;*/


        }
        .box ul li a{
            color: green;
            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="#">
                    闪购
                </a>
            </li>
            <li>
                <a href="#">
                    拍卖
                </a>
            </li>
            <li>
                <a href="#">
                    京东服饰
                </a>
            </li>
        </ul>
    </div>

    <!-- <audio src="./Deadmau5 - Battle 3.mp3" controls></audio> -->
    
</body>
</html>

列表浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>
    <style>
        .father{
             100px;
            height: 100px;
            background-color: yellow;

            color: red;
            line-height: 100px;
            text-align: center;
            font-size: 20px;

            text-decoration: underline;
        }
        p{
            background-color: green;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="child">
            <a href="#">alexsb</a>
        </div>
    </div>
    
</body>
</html>

继承

层叠性

层叠性：权重的标签覆盖掉了权重小的标签，说白了，就是被干掉了
权重：谁的权重大，浏览器就会显示谁的属性

谁的权重大？非常简单就是小学的数数。

数：id的数量 class的数量标签的数量，顺序不能乱

/*1  0  0 */显示红色
#box{


    color: red; 
}
/*0  1  0*/
.container{
    color: yellow;
}
/*0  0  1*/
p{
    color: purple;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*1 0 0*/
        #box1{
            color: red;
        }
        /*0 1 0*/
        .box{
            color: blue;
        }
        /*0 0 1*/
        p{
            color: green;
        }
    </style>
</head>
<body>

    <p class="box" id="box1">猜猜我的颜色</p>
    
</body>
</html>

层叠1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*2 1 1*/
        .wrap1 #box2 div p{
            color: green;
        }
        /*1 1 2*/
        #box1 .wrap2 div p{
            color: red;
        }
        
        /*#box1 #box2 #box3 p{

        }*/
    </style>
</head>
<body>

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

层叠加深

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 1 1 2*/
        .wrap1 #box2 div p{
            color: green;
        }
        /*1 1 2*/
        #box1 .wrap2 div p{
            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>
</html>

层叠性2

是不是感觉明白了呢？好的，再给大家加深点难度。

1     <div id='box1' class="wrap1">
2         <div id="box2" class="wrap2">
3             <div id="box3" class="wrap3">
4                 <p>再来猜猜我是什么颜色？</p>
5             </div>
6         </div>
7     </div>

View Code

        #box1 #box2 p{
            color: yellow;
        }
        
        #box2 .wrap3 p{
            color: red;
        }
        
        div div #box3 p{
            color: purple;
        }
        
        
        div.wrap1 div.wrap2 div.wrap3 p{
            color: blue;
        }

View Code

好的。那么上面的这个案例大家是否懂了呢？那么接下来我们继续看案例

还是上面那个html结构，如果我设置以下css，会显示什么颜色呢。

1         #box2 .wrap3 p{
2             color: yellow;
3         }
4         
5         #box1 .wrap2 p{
6             color: red;
7         }

View Code

答案是红色的。结论：当权重一样的时候是以后来设置的属性为准，前提必须权重一样。‘后来者居上 ’。

Good,我们继续看下面的css，你来猜以下此时字什么颜色？

#box1 #box2 .wrap3{
    color: red;
}
        
#box2 .wrap3 p{
    color: green;
}

View Code

答案是绿色。哈哈，是不是感觉快懵掉了。其实大家只要记住这点特性就可以。第一条css设置的属性值，是通过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。

那大家猜想一下如果都是被继承来的属性，那么字会显示什么颜色呢？

#box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}

小案例证明：权重都是0:那么就是"就近原则" ：谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。

小总结一下：

总结：
1.先看标签元素有没有被选中，如果选中了，就数数（id,class,标签的数量）谁的权重大就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的权重都是0 。权重都是0:"就近原则" ：谁描述的近，就显示谁的属性

08-层叠性权重相同处理

直接上代码，看效果！

第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同

#box2 .wrap3 p{
    color: yellow;
}
        
#box1 .wrap2 p{
    color: red;
}

我们会发现此时显示的是红色的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*继承性权重为0*/
        #box1{
            color: yellow;
        }
        .wrap1 .wrap2{
            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>
</html>

权重深入1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        
        /*继承性权重为0*/
        .wrap1 #box2 div{
            color: yellow;
        }
        #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>
</html>

权重深入2

第二种现象：第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。

所以继承来的元素权重为0。跟选中的元素没有可比性。

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}

我们会发现此时显示的是绿色的。

第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

#box1 #box2 .wrap3{
    color: red;
}
 .wrap1 #box2{
    color: green;
}

!important 的使用。

！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局

09-盒模型

盒模型

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

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

盒模型示意图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
             200px;
            height: 200px;
            background-color: red;
            padding: 20px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    
    <div class="box">
        
    </div>
</body>
</html>

盒模型

盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

如果让你做一个宽高402*402的盒子，您如何来设计呢？

答案有上万种，甚至上一种。

盒模型的计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
             0;
            height: 0;
            background-color: red;
            padding: 150px;            
            border: 1px solid green;
        }
    </style>
</head>
<body>
    
    <!-- 302*302 
    如果想保持盒子的宽度不变,减width加padding,加width就要减padding


    -->
    <!-- 标准盒子模型的计算
        盒子的宽度 = width+2*padding + 2*border
     -->
    
    <div class="box">
        
    </div>
</body>
</html>

计算盒模型

如果一个盒子设置了padding，border，width，height，margin(咱们先不要设置margin，margin有坑，后面课程会讲解)

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

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

那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。

另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。

10-padding(内边距)

padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
             80px;
            height: 70px;
            background-color: purple;
            /*padding-left: 20px;
            padding-top: 10px;*/
            color: green;
            border: 1px solid red;
            cursor: pointer;
            /**/
            padding: 10px;
            /*两个值: 上下  左右*/
            padding: 10px 20px;
            /*三个值: 上 左右  下*/
            padding: 10px 20px 30px;
            /*上 右 下 左*/
            padding: 10px 20px 30px 40px;

        }
    </style>
</head>
<body>
    <div class="box">
        李宁
    </div>
    
</body>
</html>

padding

padding：就是内边距的意思，它是边框到内容之间的距离

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

padding的设置

padding有四个方向，分别描述4个方向的padding。

描述的方法有两种

1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2、写综合属性，用空格隔开

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

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

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

一些标签默认有padding

比如ul标签，有默认的padding-left值。

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

But，这种方法效率不高。

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

https://meyerweb.com/eric/tools/css/reset/

11-border(边框)

边框

border:边框的意思，描述盒子的边框

边框有三个要素：粗细线性样式颜色

border: solid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
             200px;
            height: 200px;
            background-color: blue;
            /*border: 1px solid red;*/
            /*一般用这个属性干掉按钮或者表单控件的默认边框*/
            /*border: none;*/
            /*border- 5px 1px 5px 1px;
            border-style: solid dotted double dashed;
            border-color: red;*/
            border-top: 1px solid red;




        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
    
</body>
</html>

border

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

按照3要素来写border

border- 3px;
border-style: solid;
border-color: red;
/*
border- 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

按照方向划分

border-top- 10px;
border-top-color: red;
border-top-style: solid;

border-right- 10px;
border-right-color: red;
border-right-style: solid;

border-bottom- 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left- 10px;
border-left-color: red;
border-left-style:solid;

上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

border:none；

border：0；

表示border没有设置样式。

使用border来制作小三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
             0px;
            height: 0px;
            /*background-color:red;*/
            border-left: 10px solid green;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent; 
            /*color: transparent;*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

制作三角

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

12-简单认识下margin

margin

margin：外边距的意思。表示边框到最近盒子的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
             300px;
            height: 300px;
            background-color: red;
            border: 1px solid green;
            /*border: 0px solid transparent;*/

            /*padding-top: 50px;*/
        }
        .child{
             200px;
            height: 200px;
            background-color: yellow;
            /*margin: 0 auto;*/
            margin-top: 50px;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
    
</body>
</html>

父子margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </title>
    <style>

        div{
             200px;
            height: 200px;

        }
        div.a{
            background-color: yellow;
            margin-bottom: 100px;
        }
        div.w{
            background-color: green;
            margin-top: 50px 
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="w"></div>
    </div>
    
</body>
</html>

塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>    
        .a{
            background-color: red;
            margin-right: 20px;
        }
        .w{
            background-color: green;
            margin-left: 20px;
        }
    </style>
</head>
<body>

    <span class="a">alex</span>
    <span class="w">wusir</span>
    
</body>
</html>

View Code

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

margin-bottom: 100px;
复制代码

13-标准文档流

什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

标准文档流下有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <span>alex</span>
    <img src="../day45/timg.jpg" alt="">
    <a href="#">百度一下</a>
    
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
             100px;
            height: 100px;
            background-color: red;
            /*display: block;*/
            /*
            在一行内显示
            可以设置宽高
            */
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">百度一下</a>
    <a href="#">百度一下</a>

    
    <!-- 
        行内标签:
        块级标签:

     -->
    
</body>
</html>

display属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            float: left;
            background-color: red;
             100px;
            height: 100px;
        
        }
    </style>
</head>
<body>
    <a href="#">百度一下</a>
    <a href="#">百度一下</a>

    
    
</body>
</html>

浮动的元素不区分标准流的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            float: left;
            background-color: red;
             200px;
            height: 200px;
            
        
        }
    </style>
</head>
<body>
    <div>alex</div>
    <div>nvshen</div>
    <img src="./logo16366.gif" alt="">    
    
</body>
</html>

浮动元素对块级标签的影响

14-块级元素和行内元素

学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：

行内元素
块级元素

比如h1标签和span，同时设置宽高，来看浏览器效果，那么你会发现：

行内元素和块级元素的区别：（非常重要）

行内元素：

与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

块级元素和行内元素的分类：

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。

从HTML的角度来讲，标签分为：

文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。

　　PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
块级元素：所有的容器级标签都是块级元素，还有p标签。

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素

内容总结:

继承性

层叠性

盒模型

盒模型示意图

盒模型的属性

盒模型的计算

padding

padding的设置

一些标签默认有padding

边框

按照3要素来写border

按照方向划分

使用border来制作小三角

margin

什么是标准文档流

1.空白折叠现象

2.高矮不齐，底边对齐

3.自动换行，一行写不满，换行写

块级元素和行内元素的相互转换

块级元素可以转换为行内元素：

行内元素转换为块级元素：

继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素