基础与盒模型

zfh大约 13 分钟约 3966 字...

css 书写位置

内嵌式

在 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 选择器

通配符选择器

通配符选择器使用“*”来定义，表示选区页面中所有的标签

标签选择器

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

a {
  /* 去掉超级链接的下划线 */
  text-decoration: none;
}

ID 选择器

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

class 选择器

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

复合选择器

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

伪类选择器

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，典型的a标签拥有 4 个特殊状态:

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

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

其他常用伪类选择器：

举例	意义
: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 个某类型子元素

注意

这种写法是错误的：

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

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

/* √ 表示选中.box1下第一个p */
.box1 p:first-child {
  color: red;
}

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

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

元素关系选择器

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

属性选择器

举例	意义
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 标签

伪元素选择器

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

伪元素用双冒号表示

::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 属性后面加 !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() 里边的 “选择器” 是参与优先级计算,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 权值比无权值优先。

继承性

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代
并不是所有的属性都可以被继承，
在继承的情况下，选择器权重计算失效，而是就近原则：

<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>

常见的可继承和不可继承的属性

不可继承：

分类	属性
display	-
文本系列属性	vertical-align,text-decoration,text-shadow,white-space
盒模型属性	width,height,margin,padding,border
背景属性	-
定位属性	float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index

可继承：

分类	属性
字体系列属性	font-family,font-weight,font-size,font-style
文本系列属性	Text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,color
元素可见性	visibility
光标属性	cursor

盒模型

hight 和 width

min 和 max

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

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

padding

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

写法

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

注：margin 写法和 padding 一样

margin

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

margin 的塌陷

注意

水平方向没有 margin 塌陷

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

两种情况

同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，取margin取最大值
父子元素塌陷：父子元素之间也会出现 margin 塌陷：

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

解决方法

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

默认 margin

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

* {
  margin: 0;
  padding: 0;
}

盒子的水平居中

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

border-box

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

怪异盒模型下盒子的大小=width

总结

标准盒模型在定义 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

注意

行内元素的 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;可以也可以将元素隐藏，但是元素不会放弃自己的位置

基础与盒模型

# css 书写位置

# 内嵌式

# 外链式

# 导入式

# 行内式

# CSS 选择器

# 通配符选择器

# 标签选择器

# ID 选择器

# class 选择器

# 复合选择器

# 伪类选择器

# 元素关系选择器

# 属性选择器

# 伪元素选择器

# ::before,::after

# ::selection

# ::first-letter,::first-line

# 层叠性和优先级

# 层叠性

# 优先级

# 权重的理解

# 权值的计算

# 继承性

# 盒模型

# hight 和 width

# min 和 max

# padding

# 写法

# margin

# margin 的塌陷

# 两种情况

# 解决方法

# 默认 margin

# 盒子的水平居中

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

# content-box

# border-box

# 区别

# 总结

# box-sizing 属性

# 行内元素与块级元素