HTML+CSS
HTML4
HTML设置语言
主要作用
- 让浏览器显示对应的翻译
- 有利于搜索引擎优化
具体写法
<html lang="zh-CN"></html>
块级元素和行内元素
- 块级元素内能写块级元素和行内元素
- 行内元素内不能写块级元素
<span>
<span>span1</span>
<input type="text">
<span>span2</span>
<div>
div1
</div>
</span>
<span>span3</span>
原本span1，2和span3应该会在同一行，但是因为中间多了一个div（块级元素），加上
被浏览器优化了，导致了如下的结果。鼠标放在第一个span，却包含了span3
-
h1~h6不能互相嵌套
-
p中不要写块级元素。如果写了，p标签会在块级标签的前后生成一对空的p标签
img标签属性：alt
- 搜索引擎优化。会读取alt的值
- 图片无法显示时，显示alt的值
- 盲人阅读器会阅读
超链接标签：a
- self：当前页打开
（默认） - blank：新标签页
- a标签能包裹除它自身以外的标签
- download属性可以允许下载，download的值是下载时的默认文件名
- name属性可以设置跳转锚点。name是区分大小写的，且跳转时需要加
#号
使用a-name做锚点
<a href="#xxx">跳转到xxx内容</a>
使用id做锚点(推荐)
<a href="#div">跳转到div内容</a>
<a name="xxx"></a>
<div>
一些内容
</div>
<div id="div">
一些内容
</div>
回到顶部
<a href="#">回到顶部</a>
刷新页面
<a href="">刷新页面</a>
js脚本
<a href="JavaScript:xxx;">刷新页面</a>
- 唤起指定应用
手机
<a href="tel:xxx">手机</a>
邮件
<a href="mailto:xxx">邮件</a>
短信
<a href="sms:fee">短信</a>
自定义列表：dl
<!-- dl：definition list -->
<dl>
<!-- dt：definition title -->
<dt>做好笔记</dt>
<!-- dd：definition description，可以有多个 -->
<dd>好记性不如烂笔头</dd>
<dt>多做实践</dt>
<dd>绝知此事要躬行</dd>
</dl>
表格
thead
- tr：行
- td：tr的内容，即单元格，有
加粗样式
tbody / tfoot
- tr：行
- td：tr的内容，也是单元格
常用属性
- table中的height属性，不会影响thead和tfoot的高度，且代表
至少高度，可以超过（被内容影响） - 承接上一点，如果thead / tfoot 设置height，高度会改变，且实实在在就是这个值。
- th / td修改高度宽度会影响整行/列
- colspan和rowspan 列/行合并
- tbody的height属性修改不一定起效。如下例子，tbody修改高度至少要420以上
常用标签补充
| 标签名 | 标签含义 |
|---|---|
| br | 换行 |
| hr | 分割 |
| pre | 按原文显示，一般用来展示代码 |
- 不要用多个br来增加间隔
- hr的语义是间隔，不要语义只想画线用css来做
表单
| 标签名 | 语义 | 常用属性 |
|---|---|---|
| form | 表单 | action：指定表单提交地址 target：和超链接一样 method：表单提交方式 |
| input | 输入框 | type：类型。例如text，password，radio，checkbox，hidden name：指定提交数据的名字，键值对 value：默认输入值，对于radio和checkbox意味着提交的值 maxlength：最大长度 checked：选中 |
| button | 按钮 | input写法：input-type=submit / reset / button button写法：button-type=submit / reset / button |
| textarea | 文本域 | cols / rows：设置宽高 |
| select | 选择 | name：键值对的键 |
| option | 选项 | value：选中后提交的值 selected表示选中 |
| disabled：禁用 | ||
| label | 标签 | 使用： 1.label标签的for属性等于控件的id属性 2.控件嵌套在label标签里 |
| fieldset | 表单分组控件 | |
| legend | 分组标题 |
<fieldset>
<legend>fenzu biaoti</legend>
具体的控件。。。
</fieldset>
框架标签：iframe
| 标签名 | 语义 | 属性 |
|---|---|---|
| iframe | 框架，在网页中嵌入其他文件 | name：框架名字，可以与target配合 src：资源地址 width / height：宽高 frameborder：是否显示边框，0 / 1 |
实际应用：
- 在页面中嵌入可访问资源，使用src属性
- 与超链接或表单的target属性配合使用，展示相应内容
HTML字符实体
字符实体由三部分组成：& + 名称 + ； 或者 & + # + 编号 + ；
例如空格： ；
HTML全局属性
常见的全局属性：id，class，style，dir（内容的方向，值：ltr（left to right），rtl），title（设置文字提示）
CSS2
简介
三种引入方式：内联样式（优先级最高），内部样式，外部样式（推荐）。遵循“后来者居上”的覆盖原则
<link rel="stylesheet" href="../css/demo.css">
CSS语法由两部分组成：
- 选择器：找到要添加样式的元素
- 声明块：具体的样式，键值对
选择器
基本选择器
通配选择器
作用：用于选中所有的html元素
* {
属性名： 属性值
}
元素选择器
作用：为某种元素设置样式
标签名{
键值对
}
类选择器
作用：为特定的class设定样式
.类名{
键值对
}
注意点：
- class要见名知意
- 多个class，后写的无效
- class可以携带多个值，用空格隔开（class=“a b”）
- id和class可以同时拥有
id选择器
作用：根据id来精确设定样式
#id值{
键值对
}
复合选择器
交集选择器
作用：选中同时符合多个条件的元素
注意：标签名写在最前面
选择器1选择器2....{
键值对
}
并集选择器
作用：选中多个选择器对应的元素，又称分组选择器，或的关系
注意：
- 并集选择器一般竖着写
- 任何形式的选择器都可以是并集的一部分
选择器1，选择器2，选择器3{
键值对
}
后代选择器
作用：选中指定元素中，符合要求的后代元素，子代，孙子代
选择器1 选择器2 选择器3{
键值对
}
子代选择器
作用：符合要求的子代元素，就是儿子，不是孙子
选择器1>选择器2>选择器3{
键值对
}
兄弟选择器（都是往下看）
相邻兄弟选择器
作用：选中指定元素后，符合条件的相邻兄弟元素，即紧挨的下一个元素
选择器1+选择器2{
键值对
}
通用兄弟选择器
作用：选中指定元素后，符合条件的所有兄弟元素
选择器1~选择器2{
键值对
}
属性选择器
伪类选择器
作用：选中特殊状态的元素
伪类：像类，但不是类，是元素的一种特殊状态
标签：状态{
键值对
}
动态伪类
- ：link——超链接未被访问
- ：visited——超链接被访问
- ：hover——鼠标悬停在元素上
- ：active——元素激活状态（鼠标按不松开）
- ：focus——获取焦点的元素，表单类元素才能使用
注意：前四个需要遵循
LVHA原则，即link、visited、hover、active顺序，否则会有不生效的情况。这是由于状态的叠加时，后来者居上的原则，覆盖了前者的设置。
结构伪类
关于n的值：官方规定一定要符合an+b的规则，所以n要写在前面
否定伪类
:not——排除满足括号中条件的元素
UI伪类
目标伪类
:target——选中锚点所指向的元素
语言伪类
:lang——根据lang属性的值指定元素
伪元素选择器
作用：选中元素中的一些特殊位置
标签：：位置{
键值对
}
常见：
- first-letter：第一个文字
- first-line：第一行文字
- selection：被鼠标选中的文字
- placeholder：选中输入框中的提示文字
- before：在元素最开始的位置，创建一个子元素（必须用content属性指定内容）
- after：在元素最后的位置
选择器优先级
简单来说：行内 > ID选择器 > 类选择器 > 元素选择器 > 通用选择器
复杂来说：优先级满足一个计算式，格式为（a，b，c）
- a表示ID选择器的个数
- b表示类，伪类，属性选择器的个数
- c表示元素、伪元素选择器的个数
比较规则：按照从左到右的顺序依次比较，胜出后不再比较。例如（1，1，0） > （0，2，2）
特殊规则：
- 行内样式权重大于所有样式
!important的权重大于所有样式
特性
层叠性
如果发生了样式的冲突，就会根据优先级，进行覆盖。
继承性
元素会自动拥有父元素，祖先元素上设置的某些样式，优先继承离的最近的父元素
继承的样式都是不影响布局的，比如margin
优先性
见上一节选择器优先级
颜色
- color：颜色名
- color：rgb（） 或者 rgba（）。a表示透明度 0-255或者百分比
- color：#hex或hexa。就是16进制的rgb
- color：hsl（）或hsla（）。通过色相，饱和度，亮度来设置
字体
字体族
属性名：font-family
语法：font-family： “字体”，“字体0”，sans-serif / serif
设置多个字体逐个查找，通常最后写上sans-serif / serif
字体粗细
属性名：font-weight
值：light、normal、bold、bolder
字体复合属性（推荐）
属性名：font
编写规则：
- 字体大小、字体族必须有
- 字体族最后一位，字体大小倒二
- 各属性值空格隔开
文本
文本间距
- 字母间距：letter-spacing
- 单词间距：word-spacing（通过空格识别词）
- 通过px，正值距离增大，反之减小
文本修饰
属性名：text-decoration
文本缩进
属性名：text-indent
值：所有的长度单位
文本对齐-水平
属性值：text-align
值：
- center
- left
- right
行高
属性名：line-height
值：
- normal：浏览器根据文字大小决定一个默认值
- px
- 数字：参考自身
font-size的倍数 - 百分比：参考自身
font-size的百分比
注意事项：
- 数值过小文字会发成重叠
- line-height和height，height的优先级更高。
vertical-align
作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。不能控制块元素
列表
| css属性名 | 功能 | 属性值 |
|---|---|---|
| list-style-type | 设置列表符号 | none：不显示 square：方 等等 |
| list-style-position | 列表符号的位置（配置背景色才能看出来） | inside：在li里面 outside：在li外面 |
| list-style-image | 自定义列表符号 | url：图片地址 |
| list-style | 复合属性 | 没有限制 |
显示模式
- 块元素：独占一行，撑满整个容器，宽高可修改
- 行内元素：不独占，由内容决定，不可修改
- 行内块元素：不独占，宽高可修改
属性名：display
值：
- none：隐藏
- block：作为块元素展示
- inline：作为行内元素
- inline-block：作为行内块元素
盒子模型
css会把所有的HTML元素看成一个盒子，所有的样式都是基于这个盒子
margin：外边距。盒子与外界的距离border：边框。盒子的边框padding：内边距。紧贴内容的补白区域content：内容。元素中的文本或后代内容
如图所示：
盒子的大小 = content + 左右 padding + 左右border
关于默认宽度：所谓的默认宽度，就是不设置
width属性时，元素所呈现出现的宽度总宽度 = 父
content- 自身的margin内容区的宽度 = 父
content- 自身的margin- 自身的border- 自身的padding
内容区（content）
| 属性名 | 功能 |
|---|---|
width / height | 宽度 / 高度 |
max-width / height | 最大宽度 / 高度 |
min-width / height | 最小宽度 / 高度 |
内边距（padding）
行内元素左右
padding可以完美设置，上下不行。块元素全都可以完美设置
边框（border）
border主要包括了三个属性：style、width、color。可以配合上下左右单独设置，例如border-left-style
外边距（margin）
子元素的
margin是参考父元素的content计算的块元素、行内块元素可以完美设置，行内元素上下设置无效
值可以是
auto，如果四边都是auto，会在父元素水平居中可以是负值
关于
margin塌陷：第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上解决方案：
- 给父元素设置不为0的
padding- 给父元素设置宽度不为0的
border- 给父元素的css设置样式
overflow: hidden
margin合并：上面兄弟的下外边距会和下面兄弟的上外边距合并，取最大值，而不是相加。解决方案：只给其中一个设置外边距
内容溢出
overflow：
visible：直接显示，可能会超出父元素的限制hidde：超出的部分直接截断隐藏scroll：显示滚动条auto：自动显示滚动条，没溢出就不显示滚动条
隐藏元素两种方式
-
visibility属性
visibility默认值是show，设置为hidden元素会隐藏，但还是占据原来的位置 -
display属性
设置
display: none元素隐藏，则会彻底消失
布局技巧
-
行内元素、行内块元素可以被父元素当作文本来处理。即使用
text-align，line-height，text-indent等 -
子元素在父元素中水平居中：
- 子元素为块元素，父元素中使用
margin：0 auto - 子元素为行内元素、行内块元素，父元素使用
text-align等
- 子元素为块元素，父元素中使用
-
子元素在父元素中垂直居中：
- 块元素：子元素添加
margin-top：（父元素content- 子元素盒子总高）/ 2 - 行内元素、行内块元素：父元素
height = line-height（意味着没有了padding和border），每个子元素使用vertical-align：middle
- 块元素：子元素添加
-
行内 / 块元素之间的空白问题：
产生原因就是因为编写代码时，使用了换行符和空格
- 去掉换行和空格（不推荐）
- 给父元素设置
font-size：0，再给需要显示的元素设置字体大小
-
行内块元素的幽灵空白问题
幽灵空白是因为元素的基线问题，因为有类似字母g这样的存在，所有才会出现幽灵空白问题。
vertical-align：bottom，不设置为baseline就行display：block- 给父元素设置
font-size：0，给单独需要显示的设置font-size
浮动
最初是用来解决文字环绕图片这样的需求
float：left / right
特点
- 脱离文档流
- 不管浮动前什么元素，默认宽高都是由内容大小决定
- 不会独占一行，可以和其他元素共用一行，仿佛飘起来了
- 不会
margin合并，可以完美设置四个方向 - 不会像行内块一样被当作文本处理，没有行内块的空白问题
影响
- 对兄弟元素：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，但是文字会被挤开，对前面的兄弟无影响。
- 对父元素：不能撑开父元素的高度，导致父元素高度塌陷，但父元素的宽度仍束缚浮动元素。
解决方案
-
给父元素指定高度
-
给父元素设置为
float，但是这样其实也会带来相同的影响 -
给父元素设置
overflow：hidden，但是这样没浮动的那个子元素会直接消失（本质是被截断，设置成scroll就能看出来） -
给所有浮动元素的后面，添加一个块元素，并设置
clear：bost（忽略所有浮动的影响） -
给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同（推荐）
.parent::after{ content: ""; display: block; clear: both; }
布局原则：设置浮动的时候，兄弟元素要么都浮动，要么都不浮动
定位
相对定位
选择器{
position：relative
left|right|top|bottom：数值
}
相对定位的参考点是自己原来的位置
绝大多数情况下，会配合绝对定位一起使用
特点：
- 不会脱离文档流，位置上的变化只是视觉上的变化
- 定位元素的层级比普通元素高，都启用定位的元素，后写的大于先写
left和right不能一起设置，left主导；另外一组同理- 相对定位的元素可以使用
margin和float，但是不推荐
绝对定位
选择器{
position：absolute
left|right|top|bottom: 数值
}
绝对定位的参考点是它的包含块——对于没有脱离文档流的元素，包含块就是父元素；对于脱流的，包含块就是第一个拥有定位属性的元素，没有就是整个页面
特点：
- 脱离文档流，会对后面的兄弟，父元素有影响
left和right同理- 绝对定位和浮动不能同时设置，浮动会失效
- 不推荐使用
margin。属性中包含left，才能使用margin-left- 无论什么类型的元素，开启定位后就变成了定位元素——默认宽高由内容决定，且能自由设置宽高
固定定位
选择器{
position：fixed
left|right|top|bottom: 数值
}
固定定位的参考点是它的视口——对于PC来说，视口就是我们看网页的那扇窗户。
区别于绝对定位，绝对定位的左上角元素会随着页面滚动而消失，固定定位不会
特点同绝对定位
粘性定位
选择器{
position：sticky
left|right|top|bottom: 数值
}
粘性定位的参考点是第一个拥有滚动机制的元素，就是有滚动条。到了符合条件的值就会开始黏在页面上，直到所属父容器完全消失在页面中。
特点：
- 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
- 最常用的是
top- 和浮动能同时设置，不推荐
- 不推荐使用
margin
定位层级
- 定位元素的显示层级比普通元素高，无论什么定位，层级都是一样的
- 位置发生重叠，默认情况是，后写的压着先写的
- 可以通过
z-index来调整显示层级 z-index的值是数字，没有单位，越大层级越高- 只有定位元素设置
z-idnex才有效 - 定位元素的覆盖情况会受包含块本身的层级影响
- 定位可以越过父元素设置好的
padding
特殊应用
- 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高
- 发声相对定位后，元素依然是之前的显示模式
- 以下特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位
让定位元素充满包含块
- 块充满：给定位元素同时设定
left和right为0 - 高充满：
top和bottom设置为0
让定位元素在包含块中居中（定位元素必须有宽高>）
-
上下左右都为0 -
left：50% top：50% margin-left：负的宽度的一半 margin-top：负的高度的一半
布局
版心
- 在pc网页中一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容。
- 目前宽度一般设定在960-1200之间
- 可以是一个，也可以是多个
重置默认样式
使用全局选择器
*{
margin：0
padding：0
}
简答的案例可以使用，实际开发中并不会使用。因为它选择的是所有元素，而并不是所有的元素都有默认样式。
reset.css
选择到具有默认样式的元素，清空其默认的样式。
Normalize.css
它在清除默认样式的同时，保留了一些有价值的样式
相对reset.css，Normalize.css有如下优点
- 保护了具有价值的默认样式
- 为大部分HTML元素提供一般化的样式
- 新增对HTML5元素的设置
- 对并集选择器的使用比较谨慎，有效避免调试工具杂乱
HTML5
新增标签
布局类标签
| 标签名 | 语义 |
|---|---|
| header | 整个页面，或部分区域的头部 |
| footer | 整个页面， 或部分区域的底部 |
| nav | 导航 |
| article | 文章，帖子，杂志，新闻等 |
| section | 页面中的某段文字，或者文章中的某段文字 |
| aside | 侧边栏 |
关于article和section：
article里面可有多个sectionsection强调的是分段或分块，如果想将一块内容分成几段可以用article比seciton更强调独立性，一块内容如果独立完成，应该用前者
状态类标签
| 标签名 | 语义 | 用法 |
|---|---|---|
| meter | 定义已知范围内的标量测量 | high：规定高值 low：规定低值 max：最大值 min：最小值 optimun：最优值 value：当前值 |
| progress | 显示某个任务完成的进度的指示器 | max：目标值 value：当前值 |
列表类标签
| 标签名 | 语义 |
|---|---|
| datalist | 用于搜索框的关键字提示 |
| details | 用于展示问题和答案，或对专有名词进行解释 |
| summary | 写在details里面，用于指定问题或专有名词 |
文本类标签
| 标签名 | 语义 |
|---|---|
| ruby | 包裹需要注音的文字 |
| rt | 写注音，写在ruby标签里 |
| mark | 标记，用于标记搜索结果的关键字 |
<ruby>
<span>标签</span>
<rt>biao qian</rt>
</ruby>
表单控件属性
| 属性名 | 功能 |
|---|---|
| placeholder | 提示文字，value用于设置默认提示值 |
| required | 必填 |
| autofocus | 自动获取焦点 |
| autocomplete | 自动完成，可设置为on / off，适用于文字输入类的控件 密码输入框和多行输入不可用 |
| pattern | 填写正则表达式。 多行输入不可用 |
input新增type类型
| 属性名 | 功能 |
|---|---|
| 邮箱类输入框校验 | |
| url | url校验 |
| number | 数字类校验 step：设置每次增加/减少的步频 max/min：最大最小值 |
| search | 搜索类，无校验。更多侧重的是语义 |
| tel | 电话类输入框，不校验；安卓端会唤起数字键盘 |
| range | 范围选择器，滑块 max/min：最大最小值 value：当前值 |
| color | 颜色选择器 |
| date | 日期选择器 |
| time | 时间选择器 |
| datetime-local | 日期时间混合选择器 |
| month | 月份选择器 |
| week | 周选择器 |
form标签新增属性
novalidate：表单提交时不再进行验证。
多媒体标签
video标签
| 属性 | 值 | 描述 |
|---|---|---|
| src | url地址 | 视频地址 |
| width | 像素值 | 视频播放器宽度 |
| height | 像素值 | 高度 |
| controls | 向用户显示视频控件，比如播放/暂停按钮 | |
| muted | 静音 | |
| autoplay | 自动播放 | |
| loop | 循环 | |
| poster | url地址 | 视频封面 |
| preload | auto/metadata/none | 视频预加载，如果使用autoplay，则忽略 none：不进行预加载 metadata：仅预先获取视频的元数据，例如长度 auto：下载整个文件，即使用户不打算使用 |
audip标签
| 属性 | 值 | 描述 |
|---|---|---|
| src | url地址 | 视频地址 |
| controls | 向用户显示视频控件，比如播放/暂停按钮 | |
| muted | 静音 | |
| autoplay | 自动播放 | |
| loop | 循环 | |
| preload | auto/metadata/none | 视频预加载，如果使用autoplay，则忽略 none：不进行预加载 metadata：仅预先获取音频的元数据，例如长度 auto：下载整个文件，即使用户不打算使用 |
全局属性（了解）
| 属性名 | 功能 |
|---|---|
| contenteditable | 表示元素是否可被用户编辑，可选true / false |
| draggable | 元素是否可以被拖动 可选true / false |
| hidden | 隐藏 |
| spellcheck | 规定是否对元素进行拼写和语法检查 true / false。需要打开浏览器拼写检查 |
| contextmenu | 规定元素的上下文菜单，在用户鼠标右键点击元素时显示 |
| data-* | 用于存储页面的私有定制数据 |
CSS3
新增长度单位
- rem根元素字体大小的倍数，只与根元素字体大小有关
- vw视口宽度的百分之多少，10vw就是视口宽度的10%
- vh视口高度的百分之多少
- vmax / vmin 视口宽高中大 / 小的那个的百分之多少
新增背景属性
| 属性名 | 功能 | 使用 |
|---|---|---|
| background-origin | 设置背景图的原点 | padding-box：从padding区域开始铺开图片，默认值 border-box：从border区域开始铺开 content-box：从content区开始 |
| background-clip | 设置背景图的向外裁剪的区域 | border-box：从border区域开始向外裁剪背景，默认值 padding-box：从padding区域开始 content-box：从content区开始 text：背景只呈现在文字上。 若值为text，则属性名需要加上 -webkit-前缀 |
| background-size | 设置背景图的尺寸 | 1. 用长度指定大小，不允许负值 2. 用百分比，不允许负值 3. auto：真实大小 4. contain：将图片等比例缩放，使图片的宽 / 高和容器的宽 / 高相等，因而可能会出现部分区域为空白 5. cover：将图片等比例缩放，直到完全覆盖容器，图片会尽可能全的显示，但是最后可能会显示不完整——相对比较好的选择 |
| 多背景图 | 设置多个背景图 | 使用background复合属性，具体不展开 |
新增边框属性
| 属性名 | 功能 | 使用 |
|---|---|---|
| border-radius | 设置边框圆角 | border-radius：10px |
| outline-width | 外轮廓的宽度 | |
| outline-height | 外轮廓的高度 | |
| outline-style | 外轮廓的风格 | none：无轮廓 dotted：点状轮廓 dashed：虚线轮廓 solid：实现轮廓 double：双线轮廓 |
| outline-offset | 设置外轮廓与边框的距离 | 正负值都可以。 |
outline复合属性这里不展开，例如：outline: 50px solid blue
outline-offset不是outline的子属性，不能用复合属性的写法
新增文本属性
文本阴影
text-shadow：h-shadow v-shadow blur color；
| 值 | 描述 |
|---|---|
| h-shadow | 必须写，水平阴影的位置，允许负值 |
| v-shadow | 必须写，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
默认值：text-shadow：nono表示没有阴影
文本换行
white-space：normal（默认值）
| 值 | 含义 |
|---|---|
| normal | 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格 |
| pre | 原样输出，与pre标签相同 |
| pre-warp | 在pre的基础上，超出后换行 |
| pre-line | 在pre的基础上，超出后换行，且只识别文本中的换行，空格会忽略 |
| nowrap | 强制不换行 |
文本溢出
| 值 | 含义 |
|---|---|
| clip | 当内联内容溢出时，将溢出的部分裁切掉（默认值） |
| ellipsis | 当内联内容溢出时，将溢出部分替换为。。。 |
要使得
text-overflow属性生效，块容器必须显式定义overflow为非visible值，white-space为nowrap值
文本修饰
在css3中被升级为复合属性
text-decoration：text-decoration-line || text-decoration-style || text-decoration-color
| 属性名 | 值 |
|---|---|
| text-decoration-line | none：指定文字无装饰（默认值） underline：下划线 overline：上划线 line-through：贯穿线 |
| text-decoration-style | solid：实线（默认） double：双线 dotted：点状线条 dashed：虚线 wavy：波浪线 |
| text-decoration-color | 颜色 |
新增渐变
线性渐变
-
多个颜色的渐变，默认是从上到下
background-image：linear-gradient（颜色1，颜色2）
-
使用关键词设置渐变的方向
background-image：linear-gradient（to top | bottom | left | right，颜色1，颜色2）
-
使用角度设置方向
background-image：linear-gradient（30deg，颜色1，颜色2）
30deg是角度，是指中心横线的偏转角
-
调整开始渐变的位置
background-image：linear-gradient（颜色1 50px，颜色2 100px）
从0-50，纯颜色1；50-100，颜色1到颜色2的渐变，100之后，纯颜色2
径向渐变
-
多个颜色之间的渐变，默认从圆心到四周（不一定是正圆，要看容器本身的宽高比）
background-image：radial-gradient（颜色1，颜色2）
-
关键词调整渐变圆的圆心位置
background-image：radial-gradient（at top | bottom | left | right，颜色1，颜色2）
-
使用像素调整圆心位置
background-image：radial-gradient（at 100px 20px，颜色1，颜色2）
-
调整渐变形状为正圆
background-image：radial-gradient（circle，颜色1，颜色2）
-
调整形状的半径
background-image：radial-gradient（100px，颜色1，颜色2）——正圆
background-image：radial-gradient（50px 100px，颜色1，颜色2）——椭圆
-
调整开始渐变的位置
background-image：radial-gradient（颜色1 50px，颜色2 100px）——同上
重复渐变
在没有发生渐变，或者说是纯色的区域，重新开始新的一轮渐变
web字体
@font-face{
font-family：“xxx”；
src：url（“xxx.ttf”）；
}
字体图标
- 相比图片更清晰
- 灵活性更高，更方便改变大小，颜色，风格
- 兼容性好，IE也支持
2D变换
位移
选择器{
transform：translateX（30px）| translateY（40px）| translate（30px，40px）；
}
位移与相对定位很像，都不脱离文档流，不会影响其他元素
与相对定位相比：相对定位的百分比是参考父元素，位移的百分比是参考自己
浏览器针对位移有优化，与定位相比，浏览器处理位移效率更高
transform可以链式编写，例如：
transform：translateX（30px） translateY（40px）位移对行内元素无效
位移配合定位可以实现水平垂直居中
选择器{ position：absolute； left：50%； top：50%； // 上两步使得子元素的 左上顶点 在父元素的中心 transform：translate（-50%，-50%）； // 这一步使得子元素的中心，在父元素的中心 }
缩放
选择器{
transform：scaleX（1.1） | scaleY（1.2）| scale（1.1，1.2）
}
- 值大于1表示放大， 反之缩小
- 可以为负值，效果是颠倒转向
- 借助缩放，可实现小于浏览器默认的字体大小
旋转
选择器{
// 正值代表顺时针，反之
transform：rotate（20deg）
}
扭曲（了解）
选择器{
// skew一个值的时候仅代表skewX
transform：skewX（20deg）| skewY（30deg）| skew（20deg，30deg）
}
变换原点
- 元素变换时，默认的原点是元素的中心，使用
transform-origin可以设置变换的原点 - 修改变化原点对位移没有影响，对旋转和缩放会有影响
- 如果提供两个值，第一个用于横坐标，第二个纵坐标
- 只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，另一个取50%
3D变换
空间与景深
开启3D空间
重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间！！！
选择器{
transform-style：flat（2d，默认值）| preserve-3d
}
设置景深
景深：指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看起来更立体
使用
perspective设置景深，可选：
- none：不指定，默认值
- 长度值：不允许负值
注意：
perspective可以设定给父元素
透视点位置
就是观察者位置，默认的透视点在开启3D空间元素的中心。
使用perspective-origin可以修改
背部
backface-visibility：hidden。旋转时看不到背部
过渡
过渡就是使瞬间的样式变化，按照一定方式变得缓慢平缓；
例如鼠标划过超链接时颜色的变化，点击按钮后的颜色变化等，默认转化都是瞬间完成，可能你已经习惯了这种变换，但有时候平缓一些看着还是比较舒适的；
基本使用
选择器{
// 设置为all，让所有能过渡的属性拥有过渡效果
transition-property：设置哪个属性需要过渡效果；能用数字值表示的属性才可以过渡
transition-duration：只能设置秒和毫秒；可以用逗号隔开每一个的变化时间
}
高级使用
transition-delay
作用：指定开始过渡的延迟时间，单位：s / ms
transition-timing-function
作用：设置过渡的类型
常用值：
- ease：平滑过渡——默认值
- linear：线性过渡
- ease-in：慢-快
- ease-out：快-慢
- ease-in-out：慢-快-慢
- step-start：直接到达终点
- step-end：过渡时间的最后一刻，直接到达终点
- steps（）：接收两个参数，第一个必须为正整数，指定函数的步数。第二个可以指定start或end，指定每一步的值发生变化的时间点，默认为end
- cubic-bezie（）：特定的贝塞尔曲线，通过网站制作就行
动画
基本使用
第一步：定义关键帧
-
简单定义
@keyframes 动画名{ from{ ...... } to{ ...... } } -
完整定义
@keyframes 动画名{ 0%{ ... } 10%{ ... } 50%{ .... } 100%{ .... } }第二步：给元素应用动画
- animation-name：指定动画名
- animation-duration：设置动画所需时间
- animation-delay：设置动画延迟
其他属性
- animation-timing-function：可选值同过渡
- animation-iteration-count：infinite——无限循环，设置数值就是次数
- animation-direction：normal（0-100），reverse（100-0），alternate（往复运动），alternate-reverse（反向往复）
- animation-fill-mode：设置动画之外的状态。backwards（默认，动画开始时的状态），forwards（动画结束时的状态）
- animation-play-state：设置动画的播放状态。running（默认，运动），pause（暂停）
记得考虑浏览器兼容的问题
与过渡的区别
过渡需要触发一个事件才会随着时间改变其CSS属性；动画在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
-
动画不需要事件触发，过渡需要。
-
过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。
多列布局
用于实现报纸类布局
- column-count：指定列数
- column-width：指定列宽
- columns：复合属性
- column-gap：列边距。即使设置为0，也不是完全的0
- column-rule-style/width/color：列与列之间边框的风格，宽度，颜色
- column-span：是否跨列，none / all
在布局中插入图片时，给图片的
width设置为100%即可实现行内图片
伸缩盒模型——flex布局
- 传统布局：基于传统盒状模型，主要靠
display属性+position属性+float属性 flex布局在移动端应用广泛
伸缩容器/项目
- 伸缩容器：开启了
flex的元素display: flex - 伸缩项目：伸缩容器的所有子元素自动成为了：伸缩项目
- 一个元素可以同时是这两种身份
- 无论原来是哪种元素，一旦成为了伸缩项目，全部都会“块状化”
主轴方向
主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下
主轴换行方式
选择器{
// 默认值不换行 | 自动换行 | 反向换行
flex-wrap：nowrap | wrap | wrap-reverse
}
主轴对齐方式
属性名：justify-content
常用值：
侧轴对齐
只有一行的情况
- 所需属性：
align-items - 常用值：
以上主轴默认是水平方向。
多行的情况
- 所需属性：
align-content - 常用值：
居中
-
选择器{ justify-content：center； align-items：center； } -
选择器{ // 前提是已经开启flex布局 margin：auto； }
基准长度
- 概念：
flex-basis设置的是主轴方向的基准长度，会让宽度或高度失效（取决于主轴方向） - 作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值为
auto，即：伸缩项目本身的宽或高。
伸缩性
flex:1会自动充满剩余空间，但是要先给一个初始的高度/宽度，不然初始化渲染会有问题
flex-grow
- 概念：定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）。
- 规则：
- 若所有伸缩项目的
flex-grow都为1，则等分 - 若分别为1，2，3，则分到1/6，1/3，1/2的空间
- 若所有伸缩项目的
flex-shrink
- 概念：定义了项目的压缩比例，默认为1。即：如果空间不足，该项目就会缩小
排序和单独对齐
order定义项目的排序顺序，数值越小，越靠前，默认为0- 通过
align-self属性，可以单独调整某个伸缩项目的对齐方式。默认值为auto，表示继承父元素的align-items / align-content属性
媒体查询
媒体类型
@media all/print/screen{
......
}
媒体特性
运算符
- and：并且
- ，或者or：或
- not：否定
- only：肯定
BFC
概述
- BFC是Block Formatting Context（块级格式上下文），可以理解成元素的一个“特异功能”
- 该功能在默认的情况下处于关闭状态；当元素满足某些条件后被激活
- 所谓激活，就是：该元素创建了BFC
解决什么问题
- 元素开启BFC后，子元素不会再产生
margin塌陷问题 - 自己不会被其他浮动元素所覆盖
- 就算子元素浮动，元素自身高度也不会塌陷
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
