关于外间距、overflow、css背景、css显示与隐藏、css图片的一些知识以及css三大特性

1、外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

1.1、单个方向定义

• margin-bottom 设置下内边距。

• margin-left 设置左内边距。

• margin-right 设置右内边距。

• margin-top 设置上内边距。

.box{
    
    margin-left:10px;
    margin-right:20px;
    margin-top:30px;
    margin-bottom:40px;
}

1.2、简写

• 语法：空格隔开

• 取值：1-4个规则与padding值 一致

• 取值

  • px,

  • auto浏览器自动计算

  • 允许使用负值

.box{
    margin:10px 20px 30px 40px;
}

1.3、外边距应用

• 外边距实现已知宽度的块级盒子居中

.box{
   width:200px;
    /* 
    margin-left:auto;
    margin-right:auto;
   */ 
   margin:0 auto;
}

1.4、外边距问题

典理情形一

• 结构关系：嵌套块元素的垂直外边距塌陷

• 问题描述 ：当父元素没有padding,border时子元素与父元素直接相临，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值，负值取绝对值较大的值

• 表现：父子元素公用一个外边距

  .parent{
      width:100px;
      background-color:red;
      margin-top:200px;
  }
  .child{
       width:100px;
      height:100px;
      background-color:green;
      
      margin-top:100px;
      margin-bottom:100px;
  }

  <div class="parent">
    <div class="child">
    
      </div>
  </div>

• 解决方法

  • 给父元素设置边框或内边距（慎用）

  • 父元素overflow:hidden

典型情形二

• 结构 关系：相邻元素垂直外边距合并

• 问题描述 ：当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值

• 表现：两个外边距合并成一个

  .box1{
      width:100px;
      height:100px;
      background-color:red;
      margin-bottom:100px;
  }
  .box2{
       width:100px;
      height:100px;
      background-color:green;
      
      margin-top:100px;
  }

  <div class="box1"></div>
  <div class="box2"></div>

• 解决方法

  • 方法1.尽量只定义其中一个的margin值

  • 方法2.给其中一个盒子加父元素overflow:hidden(auto\scroll也可),改变渲染规则

• 其他情况同上

2、overflow详解

概述：溢出元素内容区的内容会如何处理

2.1、取值

• visible 默认值。内容不会被修剪，会呈现在元素框之外。

• hidden 内容会被修剪，并且其余内容是不可见的。

• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

.box{ 
    width:200px;
    height:200px;
    border:1px solid red;
    overflow:auto;
}

<div class="box">
【环球网军事报道 特约记者 杨铁虎】4月22日-24日，第九届世界雷达博览会在江苏南京国际博览中心隆重举行。作为承办单位，中国电子科技集团公司第十四研究所（简称中国电科14所）以“科技改变生活、铸造大国重器”为主题精彩亮相，通过实物、模型、图像以及视频等多种形式展示了多款先进的军用雷达，引发国内外广泛关注。 
</div>

2.2、应用

• 产品描述的溢出隐藏

• 模块溢出显示滚动条

补充：盒子模型值计算

包含了 边框 内间距 外间距 内容

盒子宽度 = width + 左右border + 左右padding + 左右的margin

盒子的高度=height + 上下的border + 上下的padding + 上下的margin

margin 在页面中是透明的 我们看到的 盒子的尺寸 不包含margin

3、CSS背景

CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。

3.1、background-color

background-color 属性，设置元素的背景颜色。

常用的值

• color_name 规定颜色值为颜色名称的背景颜色（比如 red）

• hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。

• rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。

• transparent 默认。背景颜色为透明。

提示：背景应用于由内容和内边距、边框组成的区域

3.2、background -image

background-image 属性，为元素设置背景图像。

background-image:url(" 图片资源路径 ");

常用的值

• url(‘URL’) 指向图像的路径。

• none 默认值。不显示背景图像。

元素的背景默认绘制区域包括内边距和边框。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

我们也可以通过 background-repeat 属性可以改变背景图像的平铺方式。

3.3、background -repeat

background-repeat 属性，设置是否或如何重复背景图像。

常用的值

• repeat 默认。背景图像将在垂直方向和水平方向重复。

• repeat-x 背景图像将在水平方向重复。

• repeat-y 背景图像将在垂直方向重复。

• no-repeat 背景图像将仅显示一次。

3.4、background -position

background-position 属性，设置背景图像（由 background-image 定义）的起始位置。 背景图像如果要重复，将从这一点开始。

语法：background-position: xpos ypos;

一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定 了一个值，另一个值将是 50%。

取值

• 关键字：top、bottom、left、right 和 center ; 指定图像放置于元素内边距区域的位置，一个对应水平方向，另一个对应垂直方向。 左上角为：left top;

• 长度值 指定图像相对于元素 内边距区左上角的偏移量。左上角是 0 0，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上

• 百分比 指定百分数值将同时应用于元素和图像，左上角是 0% 0%；右下角是 100% 100%。 如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。

3.5、background简写

background是背景复合属性，在一个声明中设置所有背景属性。

语法：background:bg-color bg-image bg-repeat bg-position;

background: red url(“bgimage.jpg”) no-repeat left top;

• 当使用简写属性时，属性值的顺序为：:

  • background-color

  • background-image

  • background-repeat

  • background-position

如果某个属性不需要设置，可以省略。

4、CSS显示模式（元素的分类）

概述： 显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素

4.1、元素默认显示模式与元素特性总结

• 本身属性为display:block;的元素 称为块级元素

  • 常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol

• 本身属性为display:inline;的元素称为行级元素

  • 常见行级元素：span,strong,em,i,a,b

• 本身属性为display:inline-block的元素称为行级块元素

  • 常见行内块元素：img、input(表单元素后续会讲到)

块级元素特性总结（记忆)

• 独成一行，可以设置宽高。

• 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。

• 在不设置高度的情况下，块级元素的高度是它本身内容的高度。

• 可以设置上下左右的内边距和外边距。

行内元素特性总结（记忆)

● 默认并排，不可以设置宽高，宽高取决于内容。

● 设置上下外边距无效

● 行内元素只能容纳文本或者其他内联元素

行内块元素特性总结（记忆)

● 默认并排，可以设置宽高。

● 可以设置上下左右的外边距和内边距。

● 如果不设置宽高，宽高取决于内容

4.2、元素类型转换（记忆)

特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。

• display:inline;转换为行内元素。 【不常用】

• display:block;转换为块状元素。 【常用】

• display:inline-block;转换为行内块状元素 【比较常用】

4.3、CSS显示隐藏

display:

• none：隐藏该元素并且该元素所占的空间也不存在了。

• block; 显示元素

visibility:

• hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。

• visible 显示元素

display的隐藏 visibility 隐藏的区别

5、CSS图片

5.1、清除图片下间隙

原因：图片默认与文本的基线对齐

解决方法一：将图片显示为块

img{display:block;}

解决方法二：改变图片的对齐方式，

img{vertical-align:不为baseline}

5.2、vertical-align 属性详解

作用1：回顾表格处的应用

作用2：定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

常用的值：

• baseline 默认。标签放置在父标签的基线上。

• top 把标签的顶端与行中最高标签的顶端对齐。

• middle 把此标签放置在父标签的中部。

• bottom 把标签的顶端与行中最低的标签的顶端对齐。

典型应用

• 图片与图片垂直方向的对齐（行内块与行内块）

• 图片与文字垂直方向的对齐

5.3、图片居中

方法1：父元素{text-align:center}

方法2：img{display:block;margin:0 auto;}

6、CSS三大特性总结

6.1、继承性

概念：父元素向后代元素传递属性的机制

表现：后代元素会继承父元素的属性

总结常用可继承的属性

font-size,font-style,font-weight,font-family,font,text-align,text-indent,cursor,list-style等

font- text- color

但是： a标签无法继承父元素的 字体颜色 text-decoration: none, text-indent 标题标签是无法继承父元素的 字体大小的

强制继承

每个CSS属性都接受这些值inherit 表示强制开启了继承”。

作用

恰当地使用继承可以简化代码，降低CSS样式的复杂性

6.2、优先级

概述：浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。 样式不冲突，优先级没有意义。当同一个元素有多个冲突声明的时候，优先级才会有意义

行内样式与选择器的优先级

概述：匹配元素的每一种类型CSS都级指定了相应的权重，权重越高优先级越高

概述：选择器的权重表述为4个部分，比如０，０，０，０．
一个选择器的数值如下确定：

(１)对于选择器中给定的各个ID属性值，加0,1，0,0

(２)对于选择器中给定的各个类属性值、属性选择或伪类，加０，０，１，０；

(３)对于选择器中给定的各个元素和伪元素，加０，０，０，１

(４)结合符和通配选择器对特殊性没有贡献．其特殊性为0，0，0，0

(５)每个行内样式特殊性都是１，０，０，０

总结： 复合选择器的权值计算方式为，组成其所**有单一选择器的权重累加** 同级之前比较个数，不同级别不可跨越

继承样式的优先级

概述：每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

继承的属性有限小于 单独设置的样式优先级

* > 继承属性

例外规则important

概述：当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明

语法：.box{background-color:red;!important}

注意：一定要优先考虑使用样式规则的优先级来解决问题而不是 !important

6.3、层叠性

概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠

表现

（1）开发者样式>浏览器默认样式 （2）行间 >id >类>元素名称>* >继承样式 （3）当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上,内部和外部样式遵循就近原则

总结

css的层叠性是通过继承 和 优先级实现

1. 样式声明不冲突 （同时应用于元素）

2. 样式声明冲突

   1. 同级选择器，css样式中最后定义的声明应用于元素（就近原则）

   2. 不同级选择器，由选择器优先级决定

思维导图：