文章目录
图片元素
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 listdd: definition descriptiondt: 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~255rgb(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. 比较重要性
-
重要性从高到低
作者样式表: 开发者书写的样式
- 作者样式表中的
!important - 作者样式表中的普通样式
- 浏览器默认样式表中的样式
- 作者样式表中的
2. 比较特殊性
- 总体规则: 看选择器选中的范围越小越特殊
- 具体规则: 通过选择器计算出一个四位数
- 千位: 如果是内联样式记作1, 否则记0
- 百位: 等于选择器中所有id选择器的数量
- 十位: 等于选择器中所有类选择器,属性选择器,伪类选择器的数量之和
- 个位: 等于所有元素选择器,伪元素选择器的数量之和
3. 比较源次序
- 代码书写靠后的胜出
应用
-
重置样式表
- 书写一些作者样式, 覆盖浏览器的默认样式
- 重置样式表覆盖浏览器的默认样式
常见的重置样式表: normalize.css , reset.css, meyer.css
-
爱恨法则
- link > visited > hover > active
继承
- 子元素可以继承父元素的某些属性
- 某些属性: 一般指字体相关的属性
属性值的计算过程
-
一个一个元素依次渲染, 按照页面文档的树形目录进行
-
渲染每个元素的前提条件: 该元素所有CSS属性必须有值
-
属性的计算过程: 一个元素, 从所有属性没有值到所有属性都有值 -
过程:
-
确定声明值: 参考样式表中没有冲突的声明作为css属性值
-
a: 该元素默认声明了样式 -
<style> p{ color: red; } a{ /* 强制继承 */ color: inherit; } </style> </head> <body> <p> <a href="">21120</a> <p> vsndikj </p> </p> </body>
-
-
层叠冲突: 有冲突的使用层叠规则确定CSS属性
- 依次比较重要性,特殊性,次序
-
使用继承: 任然没有值的属性继承父元素的值
-
使用默认值: 对仍然没有值的属性使用默认值
-
-
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
盒模型应用
改变宽高范围
- 默认情况下，width 和 height 设置的是内容盒宽高。
页面重构师：将psd文件（设计稿）制作为静态页面
- 衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
-
精确计算
-
CSS3：box-sizing
改变背景覆盖范围
-
默认情况下，背景覆盖边框盒
-
可以通过background-clip进行修改(内容盒,填充盒,边框盒)
溢出处理
overflow，控制内容溢出边框盒后的处理方式(hidden, visible, scroll,auto)
断词规则
word-break，会影响文字在什么位置被截断换行, 下面三种取值:jw: 键入中文乱数假文(扩展Chinese Lorem)normal：普通。CJK(中日韩)字符（文字位置截断），非CJK字符（单词位置截断）break-all：截断所有。所有字符都在文字处截断keep-all：保持所有。所有文字都在单词之间截断
空白处理
white-space:nowrap, 不换行margin: 外边距text-overflow:ellipsis, 文字溢出显示省略号, 仅能控制单行文本,多行用js处理white-space:pre, 不会进行空白折叠
行盒的盒模型
-
常见的行盒：包含具体内容的元素
-
span、strong、em、i、img、video、audio
行盒显著特点
-
盒子沿着内容沿伸, 内容多少盒子多大
-
行盒不能设置宽高
- 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
- 内边距（填充区）
- 水平方向有效，垂直方向不会实际占据空间。
- 边框
- 水平方向有效，垂直方向不会实际占据空间。
- 外边距
- 水平方向有效，垂直方向不会实际占据空间。
行块盒
display：inline-block的盒子
-
不独占一行
-
盒模型中所有尺寸都有效
空白折叠
- 空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
可替换元素 和 非可替换元素
- 大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
- 少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
- 可替换元素：
img、video、audio - 绝大部分可替换元素均为行盒。
- 可替换元素类似于行块盒，盒模型中所有尺寸都有效。
object-fit:contain, fill, cover依次表示保持图片尺寸, 填充(默认), 填充并且保持图片尺寸
常规流
-
盒模型：规定单个盒子的规则
-
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
-
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
-
常规流
-
浮动
-
定位
常规流布局
-
又名: 常规流、文档流、普通文档流、常规文档流
-
所有元素，默认情况下，都属于常规流布局
-
总体规则：块盒独占一行，行盒水平依次排列
-
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
-
绝大部分情况下：盒子的包含块，为其父元素的内容盒
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
-
width:宽度的默认值是auto -
margin的取值也可以是auto，默认值0 -
auto：将剩余空间吸收掉 -
width吸收能力强于margin -
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被
margin-right全部吸收 -
在常规流中，块盒在其包含快中居中，可以定宽、然后左右
margin设置为auto。
- 每个块盒垂直方向上的auto值
-
height:auto， 适应内容的高度 -
margin:auto， 表示0
- 百分比取值
-
padding、宽、margin可以取值为百分比 -
以上的所有百分比相对于包含块的宽度。
-
高度的百分比：
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效
2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
- 上下外边距的合并
-
两个常规流块盒，上下外边距相邻，会进行合并。
-
两个外边距取最大值。
1540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
