css img重复_CSS基本语法与盒模型

CSS(Cascading Style Sheets)全称为层叠样式表。作用是让浏览器以指定的特性去绘制页面元素，比如颜色，定位，装饰。

CSS的语法非常简单（CSS区分大小写），例如：

div{
  height:100px;
}

其中：

• div为“选择器”，指定绘制哪一个或哪一些元素。
• height为“属性”，指定绘制特定元素的哪一个属性。
• 100px为“值”，指定将特定元素的特定属性绘制成什么样子。

每一条CSS代码都离不开这三者。且css语句需要以分号结尾。

其中选择器有多种：

CSS选择器​developer.mozilla.org

• 在CSS中，一个元素的样式通过相同的选择器重复写了两次，则后面的会覆盖前面写的；
• 若同一个元素的样式通过不同的选择器被重复写，则权重高的生效。

权重记忆口诀：从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。

!important 的作用是提升样式优先级，加了这句的样式的优先级是最高的。如果两个语句都加了 !important，则权重高的优先级大。

CSS盒模型

每一个 HTML 元素都可以看成一个盒子，有三种类型：

• 块级盒子 (block)：可以有效地设置 width 和 height，且一个元素占据一行。 如：<div>
• 内联盒子 (inline)：不能有效地设置 width 和 height，且没有换行。 如：<span>
• 内联-块级盒子(inline-block)：可以有效地设置 width 和 height， 但没有换行。 如：<img>

我们经常通过某元素是否可以换行将再次划分为：

• 块级元素（block/table）：<div>、<h1>、<h2>、<table>、<ul>、<ol>、<p>
• 内联元素（inline/inline-block）：<span>、<img>、<input>、<button>

CSS盒模型，用来描述这个盒子：

(图片来自菜鸟教程)

由上图可知，盒模型包含 4 个基本属性（大小用 px 描述）:

• margin：外边框边界（盒子与盒子之间的距离）
• border：边框边界（盒子壳的厚度）
• padding：内边距边界（盒子边框与其中容纳物的距离）
• content：内容边界

每个元素的 background，都是指的 border 及以内。

CSS 盒模型分为两种：

• content-box（标准盒模型）(浏览器的默认盒模型)
• border-box（IE模型（怪异盒子））

而border-box的宽度是 border、padding、tontent三者宽度的总和:

content-box 

而border-box的宽度是 border、padding、tontent 三者宽度的总和:

border-box {
  width: 100px;
  height: 100px;
  border: 50px solid;
  padding: 50px;
}
//实际占有宽度为100px
//这时它的 content 宽度已经被压缩为0，无法正确存放内容了

一般优先使用 border-box。

外边距重叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时会合并为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为外边距重叠。

有三种情况会形成外边距重叠：

• 同一层相邻元素之间
  • 两个相邻的块级元素，如果他们之间同时存在着上下外边距（后一个元素没有清除浮动），那么最终他们之间的外边距并不等于上下外边距之和，而等于其中较大的那一个：
  • 示例
• 没有内容将父元素和后代元素分开
  • 如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；
  • 或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom
  • 就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
  • 示例
• 空的块级元素
  • 示例