记录学习CSS day9（1.19）-CSDN博客

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，即是排在最后的样式优先级最大
内联样式优先，应用style属性的元素，其内联样式的权重非常高，它拥有比上面提高的选择器都大的优先级，继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级,但是!inportant不能提升继承的优先级

CSS特殊性

关于CSS权重，我们需要一套计算公式来去计算，称为CSS 特性或称非凡性

特殊性的具体特性:

内联样式的特殊性为 1.0.0.0
ID选择器的特殊性为 0.1.0.0
类选择器的特殊性为 0.0.1.0
标签选择器的特殊性为 0.0.0.1
（内联样式，id选择器，类选择器，标签选择器）
数位之间没有进制，比如权重：（1.0.0.0）> (0.1000.1000.1000)

关于显示模式和CSS特性的代码演示

<html>
 
<head>
  <style>
    a.box1{
        text-align: center;
        text-decoration: none;
        width: 200px;
        height: 60px;
        background-color: aquamarine;
        line-height: 60px;          /* 因为行高包括行上距、行下距和字高 */
        color:white
    }
    a.box2{
        text-align: center;
        text-decoration: none;
        width: 200px;
        height: 60px;
        background-color: aquamarine;
        display: inline-block;      /* 将显示模式改成行内块以调整高度 */
        line-height: 60px;          /* 因为行高包括行上距、行下距和字高 */
        color:white
    }
    a:hover{
        background-color: azure;
        color:black
    }
    div{
        text-align: center;
        text-decoration: none;
        width: 200px;
        height: 60px;
        background-color: aquamarine;
        line-height: 60px;          /* 因为行高包括行上距、行下距和字高 */
        color:white
    }
  </style>
</head>
 
<body>
    <div>
        <a href="#">对比三者差别</a>
    </div>
    <a href="#" class="box2">对比三者差别</a>
    <a href="#" class="box1">对比三者差别</a>
</body>
 
</html>

左上角为原版，其余三张图片均是鼠标悬停后的效果

分析这四张图片（下列阐述的原因、基本思想在上文均有提出，下述分析只是对这四张图片的不同进行分析，借助具体实例加强理解）

可见div（块级元素）独占一行，而行内块元素和行内元素并没有独占一行，但是行内元素和行内块之间会有空白缝隙
块级元素和行内块元素的背景大小与内联元素背景大小不一样，通过观察可以发现，默认宽度就是它本身内容的宽度。
块级元素中的链接与行内块元素和行内元素的链接样式不一，因为在div中的文本，继承了div中的属性，然后因为存在href=”#“，内联元素的优先级高于继承，所以div中的链接并没有受到选择器中 text-decoration: none;等的更改（优先级）

<html>
 
<head>
  <style>
    div p{
        color: aqua;
    }
    .box1{
        color:red;
    }
  </style>
</head>
 
<body>
   <div class="box1">
    <p>
        <span>这是蓝色标签</span>
    </p>
   </div>
</body>
 
</html>

分析：

span能继承div p的属性，也能继承.box1的属性
这时看继承里面哪个选择器的父级更高（即哪个选择器离span更近），所以span继承的是div p的属性

盒子模型

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成

注：盒子模型的宽高=内容区（自己设置的宽高）+内边距+边框

盒子内容区域在前几天有提到并且在上述代码中有使用，即是用width和height构建一个合适的盒子内容区域的大小

内边距

是指边框与内容之间的距离

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注：padding标签可以当作复合标签使用，如padding:20px 10px 20px 30px（上右下左）

后面跟几个数值表示的意思是不一样的

padding后面的值为4个时，上右下左;

padding后面的值为3个时，上左=右下;

padding后面的值为2个时，上=下左=右;

padding后面的值为1个时，上=右=下=左;

内边框

对盒子内容和内边距的边缘进行修饰

格式：border: border-width border-style border-color

例如：

.box {
  border: 1px solid black;
}
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black；
}                                             /* 两者作用一致，上者是下者省略写法  */

我们也可以只设置盒子的一个边

格式：border-left(top/right/bottom): border-width border-style border-color

例如：

.box {
    border-top: 1px solid black;
}

对边框的风格进行设计

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

我们也可以选择圆弧边框，通过使用border-radius属性和与方框的每个角相关的长边来实现方框的圆角。（具体用法会在CSS定位装饰中学习）

格式：border-radius : 圆弧半径大小;

外边框

设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容

用法也与内边框相似

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

同样：margin后面也跟1~4个值，具体表示和含义和padding一致

一个简单的盒子模型代码以及成效

<html>
 
<head>
  <style>
   div{
    height: 300;
    width: 500;
    background-color: aquamarine; 
    border: 2px solid black;
    padding: 20px;
    margin: 50px;
   }
  </style>
</head>
 
<body>
   <div>盒子1</div>
   <div>盒子2</div>
</body>
 
</html>

关于盒子模型的细节的补充

清除元素的默认内外边距

为了更方便地控制网页中的元素之间的距离与间隙，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

<html>
 
<head>
  <style>
   p.box1{
    height: 50;
    width: 100;
    background-color: aquamarine; 
    border: 2px solid black;
   }
   p.box2{
    height: 50;
    width: 100;
    background-color: aquamarine; 
    border: 2px solid black;
    margin: 0;
    padding: 0;
   }
  </style>
</head>
 
<body>
   <p class="box1">段落1</p>
   <p class="box1">段落2</p>
   <p class="box2">段落3</p>
   <p class="box2">段落4</p>
</body>
 
</html>

外边距合并

在使用margin定义块元素的垂直外边距时，可能会出现外边距的合并的情况。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom（只要包含便此元素便可），下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

<html>
 
<head>
  <style>
   div.box1{
    height: 50px;
    width: 100px;
    background-color: aquamarine; 
    border: 2px solid black;
    margin: 20px 0;
   }
   div.box2{
    height: 50px;
    width: 100px;
    background-color: aquamarine; 
    border: 2px solid black;
    margin: 10px 0;
   }
  </style>
</head>
 
<body>
   <div class="box1">盒子1</div>
   <div class="box2">盒子2</div>
   <div class="box2">盒子3</div>
</body>
 
</html>

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框（padding-bottom，border-bottom），则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

<html>
 
<head>
  <style>
   div{
    height: 100px;
    width: 200px;
    background-color: aquamarine; 
    text-align: center;
   }
   div .box1{
    height: 50px;
    width: 100px;
    background-color: white; 
    border: 2px solid black;
    margin: 40px;
   }
  </style>
</head>
 
<body>
   <div>
    <div class="box1">盒子2</div>
   </div>
</body>
 
</html>

解决方法：

为父元素定义1像素的上边框或上内边距（不建议）；
为父元素添加overflow:hidden；
使用CSS浮动；

内容区域的宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

外盒尺寸计算（空间尺寸）：
  空间高度 = content height + padding + border + margin
  空间宽度 = content width + padding + border + margin

内盒尺寸计算（实际大小）：
  实际高度 = content height + padding + border
实际宽度 = content width + padding + border