基础与盒模型

Mr.Chen大约 17 分钟约 5093 字

css3 简介

CSS(cascading style sheet，层叠样式表)是用来给 HTML 标签添加样式的语言
CSS3 是 CSS 的最新版本，增加了大量的样式、动画、3D 特效和移动端特性等

css3 书写位置

内嵌式

在 head 标签对中，添加 style 标签对，然后在里面书写 css 样式

外链式

单独创建 css 文件，在head标签中，通过 link 引入

<link rel="stylesheet" href="index.css" />

导入式

导入式是最不常见的样式表导入方法
使用导入式引入的样式表，不会等待 CSS 文件加载完毕，而是会立即渲染 HTML 结构
必须写在 style 标签的最开始

<style>
  @import url(style.css);
</style>

行内式

<div style="color:red"></div>

CSS 选择器与伪类

标签选择器

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签
标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅
标签选择器“覆盖面”非常大，所以通常用于标签的初始化

ul {
  /* 去掉无序列表的小圆点 */
  list-style: none;
}
a {
  /* 去掉超级链接的下划线 */
  text-decoration: none;
}

ID 选择器

标签可以有 id 属性，是这个标签的唯一标识
id 的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
同一个页面上不能有相同 id 的标签
CSS 选择器可以使用井号#前缀，选择指定 id 的标签

class 选择器

class 属性表示“类名”
类名的命名规范和 id 的命名规范相同
使用点.前缀选择指定 class 的标签
多个标签可以为相同类名
同一个标签可以同时属于多个类，类名用空格隔开

原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高外边距、内边距等都设置为单独的类

.color-red {
  color: red;
}

HTML 标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式

<p class="color-red"></p>

复合选择器

选择器名称	示例	示例的意义
后代选择器	.box .spec	选择类名为 box 的标签内部的类名为 spec 的标签
交集选择器	li.spec	选择既是 li 标签，也属于 spec 类的标签
并集选择器	ul,ol	选择所有 ul 和 ol 标签

伪类

::: tip :root

:root 这个CSS伪类匹配文档树的根元素。对于 HTML来说，:root表示html 元素，除了优先级更高之外，与html选择器相同。

/* :root优先级更高 */
:root {
  font-size: 100px;
}
html {
  font-size: 200px;
}

:::

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有 4 个特殊状态:

伪类	意义
a:link	没有被访问的超级链接
A:visited	已经被访问过的超级链接
a:hover	正被鼠标悬停的超级链接
A:active	正被激活的超级链接 🔗（按下按键但是还没有松开按键）

a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效: LOVE HATE

其他伪类见：css 伪类open in new window

CSS3 选择器与伪元素

元素关系选择器

名称	举例	意义
子选择器	div>p	div 的子标签 p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p 元素之后的所有同层级 span 元素

序号选择器

::: warning 注意这种写法是错误的：

/* ❌ */
.box1:first-child {
  color: red;
}

first-child只是一个修饰词语，还需要在前面指定具体是那种标签

/* √ */
.box1 p:first-child {
  color: red;
}

:nth-child(odd)表示选中所有序号为偶数的子元素，:nth-child(even)表示选中所有序号为奇数的子元素除此之外还可以这样写：nth-child(an+b),表示从 b 开始每 a 个选一个

:::

举例	意义
:first-child	第 1 个子元素
:last-child	最后 1 个子元素
:nth-child(3)	第 3 个子元素
:nth-of-type(3)	第 3 个某类型子元素
:nth-last-child(3)	倒数第 3 个子元素
:nth-last-of-type(3)	倒数第 3 个某类型子元素

属性选择器不常用

举例	意义
img[alt]	选择有 alt 属性的 img 标签
img[alt='故宫']	选择 alt 属性是故宫的 img 标签
img[alt^='北京']	选择 alt 属性以北京开头的 img 标签
img[alt$='夜景']	选择 alt 属性以夜景结尾的 img 标签
img[alt*='美']	选择有 alt 属性中含有美字的 img 标签
img[alt~='手机拍摄']	选择有 alt 属性中有空格隔开的手机拍摄字样的 img 标签
img[alt\|='参赛作品']	选择有 alt 属性以"参赛作用-”开头的 img 标签

属性选择器不太常用；可以配合自定义属性使用:见 DOM 章节

伪元素 css3新增

::: tip 伪元素的特性及其区别

伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3 中伪类和伪元素的语法不同；
可以同时使用多个伪类，而只能同时使用一个伪元素；

:::

CSS3 新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素

伪元素用双冒号表示

实际项目中可以结合iconfont完成小图标的添加

`::before` `::after`

::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容

div::before {
  content: '★';
}

::after创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容

`::selection`

::selection css 伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

<style>
  #box1::selection {
    background-color: green;
  }
</style>
<body>
  <div id="box1">====>用鼠标选择我看看，我的背景颜色是绿色吗?<====</div>
</body>

`::first-letter` `::first-line`

::first-letter 会选中某元素中（必须是块级元素）第一行的第一个字母
::first-line 会选中某元素中（必须是块级元素）第一行全部文字

<style>
  #box2::first-letter {
    font-size: 30px;
  }
</style>
<body>
  <div id="box2">没错，这是一句话</div>
</body>

层叠性和优先级

层叠性

CSS 处理冲突的一种能力，称之为层叠性

在多个选择器选择同一个标签，然后又设置了相同的属性，才会发生层叠

当发生层叠时，哪个选择器设置的属性起作用，是由优先级来确定

优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，在 CSS 中靠后的那个声明将会被应用到元素上

CSS 权重的理解

每一个 css 的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”

css 通过 css 选择器的权重占比，来计算 css 选择规则的总权值，从而确定 CSS 声明的优先级次序

css 选择规则的权值不同时，权值高的优先(继承的情况除外)
css 选择规则的权值相同时，后定义的规则优先(继承的情况除外)
css 属性后面加 !important 时，无条件绝对优先

权值的计算

权值等级划分，一般来说是划分 4 个等级：

第一等级：代表内联样式，如 style=""，权值为 1,0,0,0；
第二等级：代表 ID 选择器，如 #id="", 权值为 0,1,0,0；
第三等级：代表 calss | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
第四等级：代表标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

此外，通用选择器（*），元素关系选择器不在 4 等级之内，所以它们的权值都为 0,0,0,0；继承的样式没有权值

特殊的: :not()open in new window伪类不参与优先级计算，但:not() 里边的 “选择器” 是参与优先级计算:参考open in new window,eg:选择器 div.outer p 和选择器 div:not(.outer) p 的优先级是相同的，:not 被忽略掉了，:not(.outer)中的.outer 正常计数

权值计算公式：权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数

比较规则：

1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
在权重相同的情况下，后面的样式会覆盖掉前面的样式。
通用选择器（*），元素关系选择器，虽然权值为 0,0,0,0，但是也比继承的样式优先，0 权值比无权值优先。

常用文本样式属性

color

color 属性可以设置文本内容的前景色

color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示

font-size

网页文字正文字号通常是 16p×，浏览器最小支持 10px 字号

font-wight

设置字体的粗细程度，通常使用normal（正常粗细与 400 等值）和bold（加粗与 700 等值）

font-style

设置字体的倾斜，常用属性值：italic （设置为倾斜字体）

text-decoration

设置文本的修饰线外观的（下划线，删除线）

underline 下划线
line-through 删除线
none 没有下划线

字体属性:`font-family`

webfont 阿里巴巴在线字体open in new window

设置字体：

font-family: serif, 'Times New Roman', '微软雅黑';

字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体
字体名称中有空格，必须用引号包裹

定义字体：

字体文件根据操作系统和浏览器不同，有eot,woff2,woff,ttf,svg文件格式，需要同时有这五种文件

@font-face {
  font-family: 'YourWebFontName';
  src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
  src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('YourWebFontName.woff') format('woff'),
    /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
      url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

段落和行相关属性

text-indent

定义文本内容之前的缩进量，缩进两个字符应该写作:

/* em表示字符宽度 */
text-indent: 2em;

line-height

行高=第一行的字符顶端到下一行字符的顶端的距离

单位可以是以 px 为单位的数值
也可以是没有单位的数值表示字号的倍数 这是最推荐的写法
也可以是百分数，表示字号的倍数

单行文本垂直居中

设置行高等于盒子高度，即可实现单行文本垂直居中

设置 text-align:center 即可实现文本水平居中

font 合写属性

参考 MDN 文档open in new window

继承性

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代
并不是所有的属性都可以被继承，只有以color/font-/text-/line-开头的属性才可以被继承
CSS 继承性中的特殊性：a标签的字体颜色和下划线是不能继承的，h标签的字体大小是不能继承的,如果我们想要修改超链接和 h 标签的样式，我们只能通过单独选择出来进行单独的设置

在继承的情况下，选择器权重计算失效，而是就近原则

eg:

<style>
  /* 远 */
  #box1 #box2 {
    color: red;
  }
  /* 近，所以文字是蓝色的 */
  .box1 .box3 {
    color: blue;
  }
</style>
<body>
  <div id="box1" class="box1">
    <div id="box2" class="box2">
      <div id="box3" class="box3">
        <p>我是文字</p>
      </div>
    </div>
  </div>
</body>

和上面的代码同样的结构，文字的颜色依然是蓝色:

<style>
  /* 继承 */
  #box1 #box2 #box3 {
    color: red;
  }
  /* 选中 */
  p {
    color: blue;
  }
</style>

盒模型

hight 和 width

学透 CSS-7 个场景让你深入理解 min/max - width/heightopen in new window

:::

行内元素的宽度就是它内容的宽度。
当块级元素(div,h,li)没有设置 width 属性的时候，默认为父元素的宽度，但这并不意味着 width 可以继承

::: tip 为什么 width 不继承？

<div>
  <p></p>
</div>

div 的元素宽度是 500px，如果 width 可以继承，那么 p 元素的 width 应该也是 500px，我给 p 加了 padding：20px，那么最终 p 的宽度应该是 width+paddingleft+paddingright = 500+20+20 = 540px 但是我们审查之后，可以发现，p 的宽度依然是 500px，显然 p 仅仅独占一行，并没有继承 width :::

块级元素的height 属性如果不设置，他将自动被内容撑开，如果没有内容，则 height 默认为 0

min 和 max

::: warning 注意

当 min-height 大于 max-height或 height时，元素的高度会设置为 min-height 的值

:::

CSS 属性 max-height 设置元素的最大高度。它防止height属性的应用值大于 max-height 的指定值

CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值

padding

内边距:盒子边框内壁到文字的距离

写法

四数值写法：上右下左
三数值写法：上左右下
二数值写法：上下左右

注：margin 写法和 padding 一样

margin

外边距:盒子与盒子之前的距离

单位为百分比时，以包含元素宽度的百分比指定外边距

margin 的塌陷

::: warning 注意水平方向没有 margin 塌陷 :::

在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。

两种情况

同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。
父子元素塌陷：父子元素之间也会出现 margin 塌陷，

（1）父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
（2）本身父元素与上一个元素的距离是 0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距 0 塌陷到了子元素的上边距 50 里面）。

解决方法

（1）同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
（2）父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用子元素的 margin 去设置，而是用父元素的 padding 挤出来。给父级元素添加overflow:hidden，也可以解决这个问题

默认 margin

一些元素(body,ul,p)有默认的 margin，开始要清除

* {
  margin: 0;
  padding: 0;
}

盒子的水平居中

::: warning margin:0 auto 在不同场景下生效条件

块级元素：给定要居中的块级元素的宽度。

行内元素：① 设置 display:block；② 给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）

行内块元素：设置 display:block。（如 input、button、img 等元素，自带宽度可以不用设置其宽度） :::

.box {
  margin: 0 auto;
}

盒模型种类和 box-sizing 属性

content-box

W3C标准的盒子模型（标准盒模型）

border-box

IE 标准的盒子模型（怪异盒模型）

区别

content-box

width = content(内容的宽度)

标准盒模型下盒子的大小 = content + border + padding + margin

border-box

width = content(内容的宽度) + padding+ border

怪异盒模型下盒子的大小=width（包含content + border + padding） + margin

总结

标准盒模型在定义 width 宽度后，后面写 padding 和 border 是会改变盒子实际大小。如果需要保持固定大小，需要进行计算。
怪异盒模型在定义 width 宽度后，不管怎么写 padding 和 border 宽度都固定在书写时的 width。但是有可能导致内容被压缩，导致布局异常。

box-sizing 属性

将盒子添加了 box-sizing:border-box 之后，盒子的 width，height 就表示盒子实际占有的宽高，即 padding，border 变为“内缩”，不在“外扩”

行内元素与块级元素

区别

行内元素

可以和其他元素处于一行，不用必须另起一行。
元素的高度、宽度及顶部和底部边距不可设置。可以设置padding-left,padding-right,margin-left,margin-right （水平方向有效，竖直方向无效）,可以设置行高line-heightopen in new window
元素的宽度就是它包含的文字、图片的宽度。

常见的行内元素有：a、input、img、span

::: warning 注意行内元素的 margin-top、margin-bottom 和 padding-top、padding-bottom 属性设置是无效的，但是必须注意的是，对于 padding-top 和 padding-bottom 的设置，从显示效果上来看是增加的，但其实设置是无效的，并不会对周围的元素产生影响

See the Pen by zhangfanhang on CodePen.

:::

块级元素

每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
元素的高度、宽度、行高和顶底边距都是可以设置的。
元素的宽度如果不设置的话，默认为父元素的宽度。

常见的块级元素有 div、p、h1...h6、ol、ul、dl、li、table、form

行内块

img和表单元素是特殊的行内块，他们既可以设置宽度高度，也能并排显示

相互转换

使用 dispaly属性

/* 转换为块级元素 */
display: block;
/* 转换为行内元素 */
display: inline;
/* 转换为行内块元素 */
dispaly: inline-block;

元素的隐藏

使用 display:none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
使用 visibility:hidden;可以也可以将元素隐藏，但是元素不会放弃自己的位置

基础与盒模型

# css3 简介

# css3 书写位置

# 内嵌式

# 外链式

# 导入式

# 行内式

# CSS 选择器与伪类

# 标签选择器

# ID 选择器

# class 选择器

# 原子类

# 复合选择器

# 伪类

# CSS3 选择器与伪元素

# 元素关系选择器

# 序号选择器

# 属性选择器 不常用

# 伪元素 css3新增

# ::before ::after

# ::selection

# ::first-letter ::first-line

# 层叠性和优先级

# 层叠性

# 优先级

# CSS 权重的理解

# 权值的计算

# 常用文本样式属性

# color

# font-size

# font-wight

# font-style

# text-decoration

# 字体属性:font-family

# 段落和行相关属性

# text-indent

# line-height

# 单行文本垂直居中

# font 合写属性

# 继承性

# 盒模型

# hight 和 width

# min 和 max

# padding

# 写法

# margin

# margin 的塌陷

# 两种情况

# 解决方法

# 默认 margin

# 盒子的水平居中

# 盒模型种类和 box-sizing 属性

# content-box

# border-box

# 区别

# 总结

# box-sizing 属性

# 行内元素与块级元素