文章目录

图片元素
- img元素
- 和a元素连用
- 和map元素
- 和figure元素
多媒体元素
- video
- audio
列表元素
- 有序列表
- 无序列表
- 定义列表
容器元素
- `div`元素
- 语义化容器元素
元素包含关系
为网页添加样式CSS
- 术语解释
- - 选择器
  - 声明块
- CSS代码书写位置
常见样式声明
选择器
- 简单选择器
- 选择器的组合
- 选择器的并列
层叠
- 1. 比较重要性
- 2. 比较特殊性
- 3. 比较源次序
- 应用
继承
属性值的计算过程
盒模型
- 盒子的组成部分
盒模型应用
- 改变宽高范围
- 改变背景覆盖范围
- 溢出处理
- 断词规则
- 空白处理
行盒的盒模型
- 行盒显著特点
- 行块盒
- 空白折叠
- 可替换元素和非可替换元素
常规流
- 常规流布局
- 块盒

图片元素

img元素

image缩写, 空元素
src属性: 资源source
alt属性: 当图片资源失效时, 将使用该属性的文字信息

和a元素连用

和map元素

map: 地图
map的子元素area
衡量坐标使用专业量图工具
ps, pxcook

和figure元素

通常用于把图片, 图片标题,描述包裹起来
子元素figcaption: 用于图片标题

多媒体元素

video: 视频
audio: 音频

video

controls: 控制空间的显示, 取值为controls
布尔属性: 某些属性只有两种状态
- 不写
- 值为属性值
autoplay: 布尔属性
muted: 静音播放, 布尔属性
loop: 循环播放, 布尔属性

audio

相同于video

列表元素

有序列表

ol: ordered list 表示整个列表
li: list item 表示列表里面的元素
reversed: 布尔属性, 逻辑颠倒(仅是标号颠倒)
type: 标号方式

无序列表

ul: unordered list
无序列表常用于制作菜单或者新闻列表

定义列表

用于一些术语的定义
dl: definition list
dd: definition description
dt: definition title

容器元素

容器元素: 该元素代表一个区域, 区域内部用于放置其他元素

`div`元素

没有语义, 划分区域而已

语义化容器元素

header: 通常用于表示页头,也用于表示文章的头部
footer: 通常用于表示页脚,也用于文章的尾部
article:通常用于表示整章文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏,附加信息

元素包含关系

元素的包含关系由元素的内容类别决定
查看: 某元素 mdn 百度上查看
容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素有固定的子元素(ul->li, ol->li, dl->dd,dt)
标题元素和段落元素不能相互嵌套, 并且不能包含容器元素

为网页添加样式CSS

术语解释

CSS规则 = 选择器 + 声明块
选择器: 选中元素

声明块: 放属性

    <style>h1{color: red;background-color: lightblue;text-align: center;}</style>

选择器

ID选择器: 选中对应ID值的元素
元素选择器: 选中所有元素
类选择器

声明块

出现在选择器后面的大括号中 . 包含众多声明(属性)

CSS代码书写位置

内部样式表
- 书写在style元素中
内联样式表
- 直接书写在元素的style属性中
外部样式表
- 将样式书写到独立的css文件中
- 外部样式表可以解决多页面重复问题
- 有利于浏览器缓存,提高页面响应速度
- 有利于代码(css, html)分离, 提高可读性和维护

常见样式声明

color:文字颜色

预设值: 定义好的单词

三原色: 色值, 每个颜色区间0~255

rgb(111, 120, 255)
hex() #008c8c (16进制表示)淘宝红 #ff4400 或者#f40
黑色 #000
白色 #fff
红 #f00
绿 #0f0
蓝 #00f
紫 #f0f
青 #0ff
黄 #ff0
灰色 #ccc

background-color: 元素背景颜色
font-size: 元素内部文字尺寸大小
- 单位px: 像素,理解为文字大小
- em: 相对单位, 相对于父元素文字大小
- 每个元素必须有字体大小, 如果没有继承父元素字体大小,没有父元素,用基准字号
  
  user agent: UA, 用户代理(浏览器)
font-weight: 文字粗细程度
- 取值: 数字,预设值(设置好的单词)
font-family: 文字类型, 用户计算机中存在的字体
- 可以设置多个字体
- san-serif: 非衬线字体, 通用字体, 放在最后
font-style: 字体样式, 比如斜体
- i: 该元素默认字体样式为倾斜字体, 通常表示图标篇, em也是斜体
- strong, em: strong默认字体加粗, 前者表示重要的,不能忽略的内容, 后者表示强调的内容
- del: 表示错误的内容
- s: 表示过期的内容
text-decoration:给文本加线
text-indent: 首行文本缩进
line-height: 行高
- 设置行高为容器高度, 可以让单行文本垂直居中
- 行高设置为纯数字,表示相对于当前元素字体大小
width: 宽度
height: 高度
letter-space: 文字之间间隙
text-align: 元素内部文字水平排列方式

选择器

简单选择器

网上搜索属性选择器 mdn

ID选择器
元素选择器
类选择器
通配符选择器
- *: 选中所有的元素
属性选择器
- 根据属性名和属性值选择元素
伪类选择器
- 选中某些元素的某种状态
- link: 超链接未被访问时的状态
- visited: 超链接访问过后的状态
- hover: 鼠标悬停状态
- active: 鼠标按下状态
- 爱恨法则： love hate
伪元素选择器
- before:第一个元素
- after: 最后一个元素

选择器的组合

后代元素 – 空格
并且：.
子元素 – >
相邻兄弟元素 – +
兄弟元素 – ~

选择器的并列

多个选择器用,分隔

层叠

声明冲突: 同一个样式, 多次应用到了同一个元素
层叠: 解决声明冲突的过程,浏览器自动处理(又叫权重计算)

1. 比较重要性

重要性从高到低

作者样式表: 开发者书写的样式
1. 作者样式表中的!important
2. 作者样式表中的普通样式
3. 浏览器默认样式表中的样式

2. 比较特殊性

总体规则: 看选择器选中的范围越小越特殊
具体规则: 通过选择器计算出一个四位数
1. 千位: 如果是内联样式记作1, 否则记0
2. 百位: 等于选择器中所有id选择器的数量
3. 十位: 等于选择器中所有类选择器,属性选择器,伪类选择器的数量之和
4. 个位: 等于所有元素选择器,伪元素选择器的数量之和

3. 比较源次序

代码书写靠后的胜出

应用

重置样式表
- 书写一些作者样式, 覆盖浏览器的默认样式
- 重置样式表覆盖浏览器的默认样式
常见的重置样式表: normalize.css , reset.css, meyer.css
爱恨法则
- link > visited > hover > active

继承

子元素可以继承父元素的某些属性
- 某些属性: 一般指字体相关的属性

属性值的计算过程

一个一个元素依次渲染, 按照页面文档的树形目录进行
渲染每个元素的前提条件: 该元素所有CSS属性必须有值
属性的计算过程: 一个元素, 从所有属性没有值到所有属性都有值
过程:
1. 确定声明值: 参考样式表中没有冲突的声明作为css属性值
  - a: 该元素默认声明了样式
  - ```
      <style>p{color: red;}a{ /* 强制继承 */color: inherit;}</style>
  </head>
  <body><p><a href="">21120</a><p>vsndikj</p></p>
  </body>
```
2. 层叠冲突: 有冲突的使用层叠规则确定CSS属性
  - 依次比较重要性,特殊性,次序
3. 使用继承: 任然没有值的属性继承父元素的值
4. 使用默认值: 对仍然没有值的属性使用默认值
inherit: 手动强制继承, 将父元素的值去除应用到该元素
initial: 初始值, 将该属性设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：

行盒，display等于inline的元素
块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content
- width、height，设置的是盒子内容的宽高
- 内容部分通常叫做整个盒子的内容盒 content-box
填充(内边距) padding
- 盒子边框到盒子内容的距离
- padding-left、padding-right、padding-top、padding-bottom
- padding: 简写属性
- padding: 上右下左(顺时针)
- 填充区+内容区 = 填充盒 padding-box
边框 border
- 边框 = 边框样式 + 边框宽度 + 边框颜色(这三种都是速写属性, 顺时针)
- 边框样式：border-style
- 边框宽度：border-width
- 边框颜色：border-color
- 边框+填充区+内容区 = 边框盒 border-box
外边距 margin
- 边框到其他盒子的距离
- margin-top、margin-left、margin-right、margin-bottom
- 速写属性margin