HTML + CSS = 网页
HTML：超文本标记语言，定义网页中有什么
CSS：层叠样式表，定义网页中的东西长什么样子
XML：可扩展的标记语言，定义文档结构
浏览器：
shell：外壳
core：内核
- IE：Trident
- Fixfox：Gecko
- Chome：Webkit / Blink
- Safari：Webkit
- Opera：Presto / Blink
快捷操作：
ctrl + enter：光标下一行
ctrl + shift + enter：光标上一行
p*4>{内容}：快速生成多个相同内容的段落
h$ * 4> {$内容}：快速生成多个不同的标题
p*4>lorem：快速生成多个不同内容的段落
p*4>lorem1000 快速生成多个具有1000字符的不同内容的段落
(h1>{章节})+p>lorem
((h1[id="cht$"]>{章节$})+p>lorem100)*6 生成6个章节，6个段落，标题带有 id 属性
p.red.te 快速生成多个类样式
元素
元素之间不能相互嵌套
基本元素
h1：一级标题。
a：超链接。
-
href属性：引用，通常用于跳转地址，有两种方式
-
普通链接
-
锚链接，即跳转到页面的某个位置
<a href="#id名">章节2</a> <a href="#">回到顶部</a> <a href="网址#id名">跳转到某个页面的某个锚点</a> -
功能链接：点击后，触发某个功能
-
执行js代码
<a href="javascript:alert('你好')">弹出：你好</a> -
发送邮件
<a href="mailto:邮箱地址">点击发送邮件</a> -
拨打电话
<a href="tel:1234545">点击拨打电话</a>
-
-
-
target属性，表示跳转窗口位置。取值
-
_self：在当前页面窗口打开，默认值
-
_blank：在新窗口打开
<a href="网址" target="_blank">在新窗口打开网址</a>
-
p：段落。
i：默认字体样式—斜体，实际使用中，通常用于表示一个图标(icon)
code：表示代码区域，显示代码是，套这个元素
pre：预格式化文本元素
在pre元素内部出现的内容，会按照源代码格式显示到页面上，该元素通常用于在网页中显示代码
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格。
图片元素—img、map
-
img，可和 a 元素连用
-
object-fit: contain等比例缩放，不丢失信息 -
object-fit: fill填充，自由缩放。默认值 -
object-fit: cover等比缩放，丢失信息
<a href=""> <img src="./img/ht.jpg" alt="提示信息"> </a> -
-
map：地图，只有一个子元素
-
shape属性：绘图方式。圆形（circle）、矩形（rect）、多边形（poly）
-
coords属性：坐标值。
- circle：三个值，圆心坐标、半径
- rect：四个值，左上角坐标、右下角坐标
- poly：多个值，每个点的坐标
<body> <a target="_blank" href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F?fromModule=lemma_search-box"> <img usemap="#solMap" src="img/八大行星.jpg" alt="提示"> </a> <map name="solMap"> <area shape="circle" coords="160,316,20" href="https://baike.baidu.com/item/%E6%B0%B4%E6%98%9F/135917?fr=ge_ala" target="_blank"> <area shape="rect" coords="217,403,274,534" href="https://baike.baidu.com/item/%E9%87%91%E6%98%9F/19410" target="_blank"> <area shape="poly" coords="745,254,972,211,972,408,745,408" href="https://baike.baidu.com/item/%E5%9C%9F%E6%98%9F/136354" target="_blank"> </map> </body> -
多媒体元素—video，audio
-
video 视频
- controls 属性：控制控件的显示，取值只能为 controls
- autoplay属性：自动播放
- muted属性：静音播放
- loop属性：循环播放
-
audio 音频：使用和 video 一致
<body>
<video src="" controls autoplay></video>
</body>
兼容性：
- 旧版本浏览器不支持这两个元素，可使用 flash
- 不同浏览器支持的音视频格式可能不一致。大部分支持 mp4、webm、mp3
<body>
<video controls autoplay>
<!-- 浏览器支持哪种格式就播放哪个视频 -->
<source src="video.mp4">
<source src="video.webm">
<p>
该浏览器不支持视频播放
</p>
</video>
</body>
布尔属性：只有两种状态。在HTML5中，可以不用书写属性值
- 不写
- 取值为属性名
列表元素
-
ol：有序列表
- li 子元素
-
ul：无序列表，常用于制作菜单、新闻列表
- li 子元素
-
dl：定义列表，常用于一些术语的定义
- dt 子元素：标题
- dd 子元素：描述
<body>
把大象放进冰箱一共需要几步：
<ol>
<li>打开冰箱</li>
<li>把大象放进冰箱</li>
<li>关闭冰箱</li>
</ol>
<ul>
<li></li>
</ul>
<h1>html的解释</h1>
<dl>
<dt>html5</dt>
<dd>一种超文本标记语言</dd>
</dl>
</body>
列表样式通过 css 设置
列表的语义跟显示无关
空元素
<html lang="en"> 英文
<html lang="cmn-hans"> 中文
lang：language，全局属性，表示该元素内部使用的是哪种自然语言编写的
<meta charset="UTF-8">
meta：文档的元数据，即附加信息
<img src="">
无意义元素
-
div
-
span：无任何意义，只用于设置样式
块级元素显示会独占一行，行级元素不会。html5已经弃用这种说法。
元素具有严格的语义化要求，只代表什么含义，跟显示无关，显示由CSS决定
文本格式化标签
- 或：加粗，推荐 strong
- 或：倾斜，推荐 em
或：删除线，推荐 del- ：下划线
HTML实体—字符实体(HTML Entity)
HTML中的预留字符必须替换为字符实体
书写格式:
- &单词;
- $#数字;
属性
- id：全局属性，
背景图
-
background-image：背景图地址
-
background-repeat：图片是否重复，默认重复
- no-repeat：不重复
- repeat-x：x轴重复
- repeat-y：y轴重复
-
backgroudn-size：图片大小
- contain：完整显示
- cover：撑满区域，比例不变
- 设置百分比：可以是单个值，表示横向占比；也可以是两个值，表示横向和纵向占比
- 设置具体数值
-
background-position：设置背景图位置。
- center：横向、纵向居中。可以两个值
- left、right、top、bottom
- 设置百分比
- 设置数值
-
background-attachment：通常用于控制背景图是否固定
- fixed：固定于视口
-
background-color：背景颜色。背景图可和背景颜色连用
- 纯色
- 半透明：
rgb(0, 0, 0,0.3)，第四位数值0~1，数字越大，透明度越低
background-image:url("");
background-repeat:no-repeat;
background-size:100% 100%;
background-position:1px 1px;
雪碧图（精灵图）：在一张包含很多图标的图片上，截取某个图标。
通过设置背景图位置和宽高来实现。
路径的写法
站内资源
当前网站的资源，使用相对路径
相对路径书写格式：
以 ./开头，./表示当前资源所在的目录
…/表示返回上一级目录
./可以省略
站外资源
非当前网站的资源，使用绝对路径
绝对路径书写格式：
协议号://主机名:端口号/路径
（当跳转目标和当前页面的协议相同时，可以省略协议）
容器元素
该元素代表一个块区域，内部用于放置其他元素。
div元素：无语义
语义化容器元素—html 5 之后
- header：通常用于表示页头，也可以表示文章的头部
- footer：通用用于表示页脚，也可以表示文章的尾部
- article：通常用于表示整篇文章
- section：通常用于表示文章的章节
- aside：通常用于表示侧边栏
元素的包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a 元素除外
现在：元素的包含关系由元素的内容类别决定
总结：
- 容器元素中可以包含任何元素
- a 元素中几乎可以包含任何元素
- 某些元素有固定的子元素
- 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
CSS样式
CSS规则 = 选择器 + 声明块
选择器
选择器：可以精准的选择元素
简单选择器
-
ID 选择器：选中的是对应的 id 值的元素，id值唯一。
#p1{} -
元素选择器：直接选择元素名。
h1{} -
类选择器：选择的是对应的 class 值的元素，多个元素可以拥有同一个 class值。
.colo{} -
通配符选择器：*，选择所有元素。
*{} -
属性选择器：根据属性名和属性值选中元素。
[href]{} -
伪类选择器：选中某些元素的某种状态。书写顺序（link、visited、hover、active）否则会出问题。
:link{}-
link：超链接未访问时的状态
-
visited：超链接访问过后的状态
-
hover：鼠标悬停的状态
- cursor: pointer，悬停光标变小手
-
active：激活状态，即鼠标按下时的状态
-
-
伪元素选择器：生成并选中某个元素内部的第一个子元素或最后一个子元素。
::before{}、::after{}- before：选择元素内部的第一个子元素，该元素由浏览器自行创建
- after：选择元素内部的最后一个子元素，该元素由浏览器自行创建
- first-letter：选择元素中的第一个文字
/* 元素选择器 */
h1{
color: red;
font-size: 5em;
}
/* id选择器 */
#p1{
color: blue;
}
/* class选择器 */
.color-p{
color: yellow;
}
/* 通配符选择器 */
*{
text-align: center;
}
/* 属性选择器 */
/* 选择所有href属性的元素 */
[href]{
color: red;
font-size: 3em;
}
[href="https://www.baidu.com"]{
color: yellow;
}
/* 选中带有 b 命名的属性的元素，以空格分隔 */
[class~=b]{
color: green;
}
/* 伪类选择器 */
/* 选中超链接未访问的状态 */
a:link{
}
/* 选中超链接访问过的状态 */
a:visited{
color: grey;
}
/* 选中所有元素的悬停状态 */
:hover{
color: black;
}
/* 选中某个元素的悬停状态 */
a:hover{
color: red;
}
/* 选中某个元素的激活状态 */
a:active{
font-size: 2em;
}
/* 伪元素选择器 */
span::before{
content: "《";
color: red;
}
span::after{
content: "》";
color: red;
}
选择器的组合
多个选择器进行组合操作
- 表示并且：
a:active{}、p.red{}、a[href]{} - 选中后代元素：以空格分隔。
.text li{}、.text .text1{} - 选中子元素：以 > 分隔。
.text>.text1{} - 选中相邻兄弟元素：以 + 分隔。
.spn+li{} - 选中兄弟元素（后面出现的所有元素）：以 ~ 分隔。
.spn~li{}
选择器的并列
多个选择器，用逗号分隔。
.spn~li, p, a{}
伪类选择器
/* 选中第一个子元素*/
:first-child{
color: redd;
}
/* 选中指定元素的第一个元素*/
:first-of-type{
color: red;
}
/* 选中最后一个子元素*/
:last-child{
color: redd;
}
/* 选中指定元素的最后一个元素*/
:last-of-type{
color: red;
}
/*选取指定元素的兄弟元素的第n个*/
:nth-of-type(n){
}
/* 只设置父元素的第1个元素的样式，可以是任意数字 */
:nth-child(1){
color: red;
}
/* 只设置父元素的第2n个元素的样式 ，n前面可以是任意数字，
关键字 even，等同于 2n，偶数
关键字 odd，等同于 2n+1，奇数
*/
:nth-child(2n){
color: red;
}
/*元素聚焦时的样式*/
:focus(){
outline: 1px solid red;
}
/*单选或多选框被选中的样式，有效的属性不多，一般配合 lable使用*/
input:checked+lable{
color:red
}
伪元素选择器
/*选中元素中的第一个字母*/
:first-letter{
color:red;
}
/*选中元素中的第一行字母*/
:first-line{
color:red;
}
/*选中被用户框选的文字*/
:first-selection{
color:red;
}
声明块
出现在大括号中，声明块中包含很多声明（属性），每个属性表达了某一方面的样式
书写位置
-
内部样式表：书写在 style元素中，即块中
-
内联样式表（元素样式表）：直接书写在元素的 style 属性中
<p style="color: blueviolet;"><span>Lorem ipsum dolor sit amet consectetur</span></p> -
外部样式表：将样式书写到独立的 css 文件中
- 可以解决多页面样式重复的问题
- 有利于浏览器缓存，提高响应速度
- 有利于代码分离，更容易阅读和维护
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 外联样式表 --> <link rel="stylesheet" href="./css/选择器.css"> </head> <body> <p id="big-center">Lorem ipsum dolor sit amet.</p> </body> </html>
常见样式声明
-
color：元素文字颜色
-
background-color：元素背景颜色
-
font-size：元素内部文字大小
- px：像素
- em：相对单位，相对于父元素的字体大小。每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小；如果没有父元素字体大小，则使用基准字号（浏览器字号）
-
font-weight：文字粗细程度
/* Keyword values */ font-weight: normal; 等价于400 font-weight: bold; 等价于700 /* 其子重值是基于从其父元素继承而来的子重计算所得的 */ font-weight: lighter; font-weight: bolder; -
font-family：文字类型–黑体
font-family: Arial, Helvetica, sans-serif; /* sans-serif：浏览器自行选择非衬线字体 */ -
font-style：字体样式，通常设置斜体(
italic) -
text-decoration：文本修，给文本加线
-
line-height：每行文本的高度，该值越大，每行文本的距离越大。
-
设置行高为容器的高度，可以让单行文本垂直居中
-
可以设置为纯数字，表示相对于当前元素的字体大小
-
单位取值：
- px：固定高度
- em：字体大小的倍数，先计算像素值，再继承
- 百分比：字体大小的倍数，先计算像素值，再继承
- 数字：字体大小的倍数，先继承，再计算
-
-
width：元素宽度
-
height：元素高度
-
letter-space：文字间隙
-
text-align：元素内部文字的排列方式
-
透明度
- opacity：设置的是整个元素的透明，取值 0~1，数值越大，越不透明
- rgba(0, 0, 0, 0.3)：在颜色位置设置alpha通道
-
鼠标
- cursor: pointer，悬停光标变小手
-
盒子隐藏
- display: none，不生成盒子
- visibility:hidden，生成盒子，但隐藏
-
背景图。背景图属于CSS的概念，而 img 元素是属于 HTML的概念
- 当图片属于网页内容时，必须使用 img 元素
- 当图片仅用于美化页面时，必须使用背景图
样式补充
display:list-item
设置为该属性的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子。
元素本身生成的盒子叫主盒子，附带的盒子称为次盒子，主盒子盒次盒子水平排列。
涉及的css：
- list-style-type：设置次盒子中内容的类型
- list-style-position：设置次盒子相对于主盒子的位置
- list-style：速写
display:list-item;
list-style-type:disc;
list-style-position:inside;
list-style:disc inside;
清空次盒子，设置 list-style:none;
图片失效时的宽高问题
如果 img元素的图片链接失效，img元素的特性盒普通行盒一样，无法设置宽高。
行和盒中包含行块盒或可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关
text-algin:justify
除最后一行外，分散对齐
制作三角形
将宽度和高度设置为0，边框上、下、左、右分别填充颜色，并设置为透明
width:0;
hegith:0;
border:1px solid transparent;
border-bottom:red;
direction 和 writing-mode
direction：设置的是开始到结束的方向
- ltr：从左到右
- rtl：从右到左
writing-mode：设置文字书写方向
- vertical-rl：垂直方向上，从右到左
- vertical-lt：垂直方向上，从左到右
utf-8字符
p::after{
content:"\59EC\6210";
}
<div>
;EC;ᡂ
</div>
层叠
层叠（权重计算）：解决声明冲突的过程，浏览器自动处理
声明冲突：同一个样式，多次应用到同一个元素
解决过程：
-
比较重要性：从高到低
- 作者样式表中的
!important样式 - 作者样式表中的普通样式
- 默认样式
a{ color: red !important; } - 作者样式表中的
-
比较特殊性：看选择器
-
总体规则：选择器选中的范围越窄，越特殊
-
具体规则：通过选择器，计算出一个4位数，数值越大，越特殊
- 千位：如果是内联样式，记 1，否则记 0
- 百位：等于选择器中所有 id 选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
-
-
比较源次序：代码靠后的胜出
应用
-
重置样式表：书写作者样式，覆盖浏览器的默认样式
- 常见重置样式表：normalize.css、reset.css、meyer.css
-
爱恨法则（link>visited>hover>active）
继承
子元素会继承父元素的某些 css 属性。
通常，跟文字内容相关的属性都能被继承
属性值计算
属性值计算过程：一个元素，从所有属性都没有值，到所有属性都有值的过程。
浏览器渲染页面是一个元素一个元素依次渲染的，顺序按照页面文档的树形目录结构进行。
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
计算过程：
- 确定声明值：参考样式表中没有冲突的声明，作为css属性值。
- 层叠冲突：对样式表有冲突的声明使用层叠规则，确定css属性值。
- 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值。
- 使用默认值：对仍然没有值的属性，使用默认值。
a元素文字颜色一般不继承，因为本身有颜色属性值。
要实现继承，可强制继承：
color: inherit;
特殊的两个css取值：
- inherit：强制继承，将父元素的值取出并应用。
- initial：初始值，将该属性设置为默认值。
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
- 行盒：display=inline 的元素（默认值）
- 块盒：display=block 的元素
- 行块盒：display=inline-block
行盒在页面中不换行，块盒独占一行。
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio、strong、em、i
块盒的组成部分
无论是行盒，还是块盒，都由一下四部分组成，从内到外：
-
内容：content，内容盒（content-box）
- width：宽度，设置的是盒子内容的宽度
- hight：高度
-
填充（内边距）：padding，盒子边框到盒子内容的距离。填充区+内容区=填充盒（padding-box）
- padding-left：左边距
- padding-right：右边距
- padding-top：上边距
- padding-bottom：下边距
- 简写属性：padding：上 右 下 左
-
边框：border，三个属性都是数学属性（即简写属性）。边框+填充区+内容区=边框盒
-
border-style：边框样式
- none：不显示边框，优先级最低
- hidden：不显示边框，优先级最高
- dotted：显示为一系列远点
- dashed：显示为一系列虚线
- solid：显示为一条实线
- double：显示为一条双实线
- groove：显示为具有雕刻效果的边框
- ridge：显示为浮雕效果的边框
- outset：显示为有突出效果的边框
-
border-width：边框宽度
-
border-color：边框颜色。默认为字体颜色。
-
简写属性：border：2px solid red
-
-
外边距：margin。指的是盒子于盒子之间的距离
- margin-left：左外边距
- margin-right：右外边距
- margin-top：上外边距
- margin-bottom：下外边距
应用
改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高。
衡量设计稿尺寸的时候，往往使用的是边框盒，通过 box-sizing 设置width、height的设置范围
div {
box-sizing: border-box;
box-sizing: content-box;
}
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过 background-clip设置
div {
background-clip: border-box;
background-clip: content-box;
background-clip: padding-box;
}
溢出处理
当设置了盒子的宽高，内容过多会导致超出盒子，造成溢出。
可以通过overflow，控制内容溢出边框盒后的处理方式
div {
/* 溢出部分可见 */
overflow: visible;
/* 溢出部分隐藏 */
overflow: hidden;
/* 生成滚动条 */
overflow: scroll;
/* 生成纵向滚动条 */
overflow-y: scroll;
/* 生成横向滚动条 */
overflow-x: scroll;
/* 生成自动滚动条 */
overflow-y: auto;
}
断词规则
word-break会影响文字在什么位置被截断换行
- normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
- break-all：截断所有。所有字符都在文字处截断
- keep-all：保持所有。所有文字都在单词之间截断
空白处理
处理单行文本：
-
white-space: nowrap文字不换行 -
overflow: hidden溢出隐藏 -
text-overflow显示不完全的地方用 …代替
行盒的盒模型
常见的行盒：span、a、img、video、audio、strong、em、i
显著特点
- 盒子沿着内容延伸
- 行盒不能直接设置宽高（应通过设置字体大小、行高、字体类型，间接调整）
- 内边距（填充区），水平方向有效，垂直方向仅会影响背景，不会占用实际空间
- 边框，水平方向有效，垂直方向仅会影响背景，不会占用实际空间
- 外边距，水平方向有效，垂直方向完全无效，不会占用实际空间
行块盒
行快盒：display:inline-block的盒子
- 不独占一行
- 盒模型中的所有尺寸都有效
空白折叠
空白折叠总是发生在行盒（包括行块盒）内部或行盒（包括行块盒）之间。
造成的原因是因为，行盒元素之间有多个空格，浏览器会自动处理为一个空格
可替换元素和非可替换元素
非可替换元素：大部分元素，页面上显示的结果，取决于元素内容
可替换元素：少部分元素，页面上显示的结果，取决于元素属性。img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
视觉格式化模型
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子的排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流也叫文档流、普通文档流、常规文档流
所有元素，默认情况下都属于常规流布局。
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含快，包含块决定了盒子的排列区域
绝大部分情况下：盒子的包含块，为其父元素的内容盒
块盒
-
每个块盒的总宽度，必须刚好等于包含块的宽度
- 宽度的默认值是 auto。
- auto：将剩余空间吸收掉
- margin的取值也可以是 auto，默认值=0
- width 吸收能力强于 margin
- 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，剩余空间被 margin-right 全部吸收
-
在常规流中，块盒在其包含块中居中，可以定宽，然后左右 margin 设置为 auto
margin-left: auto; margin-right: auto; /* 或者简写 */ margin: 0 auto; -
每个块盒垂直方向上的 auto 值
- height: auto，适应内容的高度
- margin: auto，表示 0
-
百分比取值
-
padding、width、margin可以取值为百分比。具体值是相对于包含块的宽度。
-
高度的百分比，分两种情况
- 包含块的高度是否取决于子元素的高度，设置百分比无效
- 包含快的高度不取决于子元素的高度，百分比相对于父元素的高度
-
-
上下外边距的合并
- 两个常规流块盒，上下外边距相邻，会进行合并
- 合并之后取两个外边距的最大值
浮动布局
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
浮动盒：设置
float属性的元素。默认值为 none，不浮动
- float: left 左浮动，元素靠上靠左
- float: right 右浮动，元素靠上靠右
- 当一个元素浮动后，元素必定是块盒（会自动更改为 display: block）
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
浮动盒的尺寸
- 宽度为 auto 时，适应内容宽度
- 高度为 auto 时，与常规流一样，适用内容的高度
- margin 为 auto 时，值为 0
- 边框、内边距、百分比设置与常规流一样
浮动盒的排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字。该行盒叫匿名行盒
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，其值是由内容决定的，在计算时，不会考虑浮动盒子
解决方式：清除浮动 clear
- clear:none
- clear:left 清楚左浮动，该元素必须出现在前面所有左浮动盒子的下方
- clear:right 清楚右浮动，该元素必须出现在前面所有右浮动盒子的下方
- clear:both 清楚左右浮动，该元素必须出现在前面所有浮动盒子的下方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ty{
padding: 30px;
background-color: aquamarine;
}
.yu{
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 2px;
}
/* 解决高度坍塌，清除浮动，方式一 */
.clearfix{
clear: both;
}
/* 解决高度坍塌，清除浮动，方式二 */
.ty::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="ty">
<div class="yu"></div>
<div class="yu"></div>
<div class="yu"></div>
<div class="yu"></div>
<div class="yu"></div>
<div class="yu"></div>
<!-- 解决高度坍塌，清除浮动，方式一 -->
<div class="clearfix"></div>
</div>
</body>
</html>
盒子的位置
- 左浮动的盒子向上向左排列
- 有浮动的盒子向上向右排列
- 浮动盒子的顶变不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。
定位
手动控制元素在包含块中的精准位置，涉及的CSS属性：position
- 绝对定位、固定定位的元素一定是块盒
- 绝对定位、固定定位的元素不一定是浮动的
- 如果元素设置了浮动和定位，则该元素是定位元素
- 没有外边距合并
position属性
- static：默认值，静态定位（不定位）
- relative：相对定位。相对定位的元素和常规流无异。
- absolute：绝对定位
- fixed：固定定位
一个元素，只要 position 的取值不是 static，就认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位—relative
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移，本身不变
通过以下四个属性进行便宜设置：
- left：左偏移多少个像素
- right：右偏移
- top：上偏移
- bottom：下偏移
当偏移出现矛盾时，以 top、left 为准
盒子的偏移不会对其他盒子造成任何影响。
绝对定位—absolute
具有以下特点：
- 宽度为 auto，适应宽度
- 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始包含块）
固定定位—fixed
其他情况和绝对定位一样
包含块不同：固定定位的包含块为视口（即浏览器的可视窗口）
定位下的居中
通过以下步骤实现居中：
- 定宽（定高）
- 将左右（上下）距离设置为 0
- 将左右（上下） margin 设置为 0
绝对定位和固定定位中，margin 为 auto 时，会自动吸收剩余空间
div{
/* 水平居中 */
left: 0;
right: 0;
margin: 0 auto;
/* 垂直居中 */
top: 0;
bottom: 0;
margin: auto 0;
/* 水平垂直居中 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
多个定位元素重叠时
堆叠上下文，设置 z-index，通常情况下，该值越大，越靠近用户。
只有定位元素设置 z-index 有效
z-index 可以是负数。如果是负数，则遇到常规流、浮动流，则会呗被其覆盖
居中总结
居中：盒子在其包含快中居中
行盒（行块盒）水平居中
直接设置行盒（行块盒）父元素
text-align:center;
常规流块盒水平居中
定宽，设置左右 margin 为 auto
width:100px;
margin:0 auto;
绝对定位元素的水平居中
定宽，设置左右的坐标为0，左右margin设置为 auto
width:100px;
position:absolute;
left:0;
right:0;
margin:auto;
单行文本的垂直居中
设置文本所在位置的行高，为整个区域的高度
height:300px;
line-height:300px;
行块盒或块盒内多行文本的垂直居中
没有完美方案，可达到类似效果
设置盒子上下内边距相同。
绝对定位的垂直居中
定高，设置上下坐标为0 ，将上下margin设置为auto
height:100px;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
iframe元素—框架页
通常用于在网页中嵌入另一个页面
iframe可替换元素具有以下特点：
- 通常是行盒
- 通常显示的内容取决于元素的属性
- CSS不能完全控制其中的样式
- 具有行块盒的特点
嵌入flash
可以通过两个元素嵌入flash，这两个元素都是可替换元素。
- object：有两个属性，data：flash资源，type：MIME类型
- embed：有两个属性，src：flash资源，type：MIME类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 兼容性写法 -->
<object data="xxx.swf" type="application/x-shockwave-flash">
<param name="xxx.swf" value="application/x-shockwave-flash">
<embed src="" type="">
</object>
</body>
</html>
MIME((Multipurpose Internet Mail Extensions)，多用途互联网邮件扩展类型。
是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
@规则
at-rule：@规则、@语句、CSS语句、CSS指令
- @import"路径"：导入另外一个css文件
- @charset"utf-8"：告诉浏览器该css文件，使用的字符编码集是utf-8，必须写在第一行
表单元素
一系列元素，主要用于收集用户数据。
input元素
输入框，具有以下属性：
-
type属性：输入框类型
- type: text，普通文本输入框
- type: password，密码框
- type: data，日期选择框，有兼容性问题
- type: search，搜索框，有兼容性问题
- type: range，滑块，
- type: color，颜色选择
- type: number，数字输入框
- type: checkbox，多选框，默认选中 checked
- type: radio，单选框，通过name属性进行分组
- type:file，选择文件
-
value属性：输入框的值
-
placeholder属性：显示提示的文本，文本框没有内容时显示
input可以制作按钮
当type值为 reset、buttom、submit 时，input表示按钮
- reset：重置按钮
- buttom：普通按钮
- submit：提交按钮
<input type="number" min="0" max="100" step="10">
select元素
下拉列表选择框，默认选中 selected
<select>
<option value="" selected>北京</option>
</select>
<select>
<!-- optgroup 进行分组 -->
<optgroup label="前端语言">
<option value="">html</html></option>
<option value="">css</html></option>
</optgroup>
<optgroup label="后端语言">
<option value="">java</html></option>
<option value="">python</html></option>
</optgroup>
</select>
<!-- multiple 选择多个 --->
<select multiple>
<optgroup label="前端语言">
<option value="">html</html></option>
<option value="">css</html></option>
</optgroup>
<optgroup label="后端语言">
<option value="">java</html></option>
<option value="">python</html></option>
</optgroup>
</select>
textarea元素
文本域（多行文本框），cols：列，rows：行
<textarea cols="30" rows="10">
提示信息
</textarea>
按钮元素
buttom，通过type属性设置按钮类型。buttom元素可以包含其他元素
- reset：重置按钮
- submit：提交按钮
- buttom：普通按钮
表单状态
对文本框：
- readonly属性：是布尔属性，表示文本是否只读。不会改变表单显示样式
通用状态：
- disabled属性：布尔属性，表示是否禁用。会改变表单显示样式
配合表单元素的其他元素
lable
普通元素，通常配合单选和多选使用。
可以通过 for 属性，让 lable 元素关联某一个表单元素，for 属性书写表单元素id的值。有两种方式：
-
显式关联
-
隐式关联
<!-- 显式关联 -->
<input id="man" type="radio"><label for="man">男</label>
<input id="men" type="radio"><label for="men">女</label>
<!-- 隐式关联 -->
<label><input type="radio">男</label>
<label><input type="radio">女</label>
datalist元素
数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合。选中的是 value值
<input list="list" type="text">
<datalist id="list">
<option value="Chrome">谷歌浏览器</option>
<option value="IE">IE浏览器</option>
</datalist>
form元素
通常会将整个表单元素，放置在 from元素的内部。
作用是：当提交表单时，会将 from元素内部的表单内容以合适的方式提交到服务器。
from元素对开发静态页面没有意义
fieldset元素
对表单进行分组
<form action="">
<fieldset>
<legend>分组标题</legend>
<p>
账户：
<input type="text">
</p>
<p>
密码：
<input type="password">
</p>
</fieldset>
</form>
美化表单元素
常见用法
-
重置表单元素样式
-
设置textarea是否允许调整尺寸
-
resize: none，不能调整
-
resize: both，水平垂直方向可调整，默认值
-
resize: horizontal，水平方向可调整
-
resize: vertical，垂直方向可调整
<textarea style="resize: both;"></textarea>
-
-
设置文本边沿到内容的距离，两种方式
-
padding：内边距
-
text-indent：首行缩进
<input type="text" style="padding:0 2px;"> <input type="text" style="text-indent: 1em;">
-
-
自定义按钮，控制单选和多选框的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .radio-item .radio{ width: 12px; height: 12px; border: 1px solid red; border-radius: 50%; cursor: pointer; display: inline-block; } /* ~ 后面所有元素 */ .radio-item input:checked~span{ color: red; } /* + 下一个元素 */ .radio-item input:checked+.radio::after{ content: ""; display: block; width: 6px; height: 6px; background: red; margin: 3px 3px; border-radius: 50%; } .radio-item input[type="radio"]{ display: none; } </style> </head> <body> <p>请选择： <label class="radio-item"> <input name="gender" type="radio"> <span class="radio"></span> <span>男</span> </label> <label class="radio-item"> <input name="gender" type="radio"> <span class="radio"></span> <span>女</span> </label> </p> </body> </html>
表格元素
在CSS技术出现之前，网页通常使用表格布局。
后天管理系统中可能会使用表格。
由于表格渲染速度过慢，不再适用于网页布局
表格table分为四个部分：（可有可无）
- caption：表格标题
- thead：表头
- tbody：表格主体
- tfoot：表尾
tr：表格行
th：标题单元格
td：单元格
表格属性：
-
border-collapse: 边框形式
- separate：折叠，单元格之间有空隙。默认值
- collapse：不折叠，单元格边框合并成一个。
-
colspan：5，单元格跨越5列合并
-
rowspand：2，单元格跨越2行合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 100%;
font-size: 10px;
text-align: center;
border-collapse: collapse;
}
caption{
font-weight: bold;
font-size: 13px;
}
th,td{
border: 1px solid #ccc;
padding: 5px 0;
}
thead tr{
background-color: aqua;
color: #fff;
}
tbody tr:nth-child(odd){
background-color: beige;
}
tfoot th{
text-align: right;
padding-right: 5px;
}
tbody tr:hover{
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<!-- 标题 -->
<caption>这是表头</caption>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>商品名</th>
<th>商品数量</th>
<th>商品价格</th>
<th>供应商</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td rowspan="2">Lorem.</td>
<td>Obcaecati.</td>
<td>Reiciendis?</td>
<td>Dignissimos!</td>
<td>Aliquid.</td>
</tr>
<tr>
<td>Libero.</td>
<td>Delectus.</td>
<td>Ipsam!</td>
<td>Nulla?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Dolores!</td>
<td>Ipsa!</td>
<td>Ea.</td>
<td>Pariatur?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Libero!</td>
<td>Illo!</td>
<td>Voluptatem.</td>
<td>Natus.</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<th colspan="5">总计</th>
</tr>
</tfoot>
</table>
</body>
</html>
其他元素
-
abbr：缩写词
-
time：提供给浏览器或搜索引擎阅读的时间
-
b（bold）：以前是一个无语言元素，主要用于加粗字体
-
q：表示一小段引用文本
-
blockquote：大段引用的文本
-
br：主要用于在文本中换行，无语义
-
hr：主要用于分割，无语义
-
meta：还可以用于搜索引擎优化（SEO）
-
link：链接外部资源（CSS、图标）
- rel属性：链接的资源和当前网页的关系
- type属性：MIME类型，可省略
web字体和图标
- web字体：用户没有该字体，强制让用户下载该字体。使用 @font-face 指令制作一个新字体
- 字体图标：将图标以字体的形式显示。使用相关网站
块级格式化上下文—BFC
全称Block Formatting Context，简称BFC，是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。解决高度坍塌
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块盒的自动高度和摆放位置，无视浮动元素、定位元素
BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域
- 根元素：元素创建的BFC区域，覆盖率了网页中所有的元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒。最优做法 overflow:hidden;
不同的BFC区域，它们进行渲染时互不干扰。
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部。具体规则：
- 创建BFC的元素，它的自动高度需要计算浮动元素
- 创建BFC的元素，它的边框盒不会与浮动元素重叠
- 创建BFC的元素，
布局
多栏布局
- 两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 100%;
height: 500px;
border: 1px solid;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.content .left{
float: left;
width: 20%;
height: 500px;
background-color: antiquewhite;
margin-right: 10px;
}
.content .main{
overflow: hidden;
background-color: aquamarine;
height: 500px;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="main"></div>
</div>
</body>
</html>
- 三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 100%;
height: 500px;
border: 1px solid;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.content .left{
float: left;
width: 20%;
height: 500px;
background-color: antiquewhite;
margin-right: 5px;
}
.content .right{
float: right;
width: 20%;
height: 500px;
background-color: antiquewhite;
margin-left: 5px;
}
.content .main{
overflow: hidden;
height: 500px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
解决等高问题
主区域内容非常多，不能确定，而侧边栏内容较少，需要和主区域实现等高，有以下三种方法：
-
CSS3的弹性盒
-
JS控制
-
伪等高：设置夸张的高度，margin-bottom设置非常大的负数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .content{ width: 100%; height: 500px; border: 1px solid; /* 隐藏超出区域 */ overflow: hidden; } .clearfix::after{ content: ""; display: block; clear: both; } .content .left{ float: left; width: 20%; /* 实现伪等高 */ height: 100000px; margin-bottom: -999990; background-color: antiquewhite; margin-right: 10px; } .content .main{ overflow: hidden; background-color: aquamarine; height: 500px; } </style> </head> <body> <div class="content clearfix"> <div class="left"></div> <div class="main"></div> </div> </body> </html>
元素书写顺序
使用浮动进行布局时，主要内容是书写在浮动元素后面。但往往主要内容会书写在前面，这时不能使用浮动进行布局，可以设置主区域的外边距，留出侧边栏的位置，载使用相对定位进行布局。
body背景
问题：只设置背景颜色，会覆盖整个页面，背景并不在边框盒中。当设置了背景，html背景会覆盖整个页面，背景会在边框盒中
画布
网页中的一块区域，具有以下特点：
- 最小宽度为视口宽度
- 最小高度为视口高度
html元素的背景
覆盖画布
body元素的背景
- 如果html元素有背景，body元素正常，在边框盒中
- 如果html元素没有背景，body元素覆盖画布
关于画布背景图
- 背景图的宽度设置为百分比，宽度是相对于视口的宽度
- 背景图的高度设置为百分比，高度是相对于html的高度
- 背景图的横向位置设置百分比或预设值，其位置是相对于视口的
- 背景图的纵向位置设置百分比或预设值，其位置是相对于网页高度的
行盒的垂直对齐
多个行盒垂直方向上的对齐
想要实现行盒之间的垂直对齐，可以给没有对齐的元素设置 vertical-align，取值如下：
- 预设值
- 数字
- 百分比
图片的底部白边
问题：图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。
解决方法：
- 设置父元素的字体大小为0，但是会导致父元素字体无法显示
- 将图片设置为块盒（推荐 ）
参考线-字体设计
文字是通过一些文字制作软件制作的，比如 fontforge。
制作文字时，会有几根参考线
font-size
字体大小，设置的是文字的相对大小。
文字的相对大小有：1000、2048、1024；由设计者决定
文字顶线到底线的距离，是文字的实际大小（content-area 内容区）
行盒的背景，覆盖content-area
行高
-
gap（空隙）：顶线向上延申的空间，和底线向下延申的空间，两个空间相等
gap默认情况下，是字体设计者决定的。
-
virtual-area（虚拟区）：top到bottom之间的区域。也叫行高
-
line-height:normal，默认值，使用文字默认的gap
content-area一定出现在virtual-area的中间
vertical-align
决定参考线的属性有：font-size、font-family、line-height
一个元素如果子元素出现行盒，该元素内部也会产生参考线。
vertical-align有以下取值：
- baseline：该元素的基线与父元素的基线对齐
- super：该元素的基线与父元素的上基线对齐
- sub：该元素的基线与父元素的下基线对齐
- text-top：该元素的virtual-area的顶边，对齐父元素的text-top
- text-bottom：该元素的virtual-area的底边，对齐父元素的text-bottom
- top：该元素的virtual-area的顶边，对齐line-box的顶边
- bottom：该元素virtual-area的底边，对齐line-box的底边
- middle：该元素的中线（content-area的一半），与父元素的X字母高度一半的位置对齐
- 数值：相对于基线的偏移量，向上为正数，向下为负数
- 百分比：相对于基线的偏移量，百分比是相对于自身 virtual-area的高度
行盒组合起来，可以形成多行，每一行的区域叫做 line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边
实际上，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算
line-box是承载文字内容的必要条件，以下情况不生成行框：
- 某元素内部没有任何行盒
- 某元素字体大小为0
可替换元素和行块盒的基线
图片基线位置位于图片的下外边距（margin）
表单元素的基线位置在内容底边
行块盒：
- 行块盒最后一行有 line-box，用最后一行的基线作为整个行块盒的基线
- 如果行块盒最后一行没有行盒，则使用下外边距作为基线
堆叠上下文
堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在 z轴上排列的先后顺序。
创建堆叠上下文的元素
- html元素（根元素）
- 设置了 z-index数值的定位元素
同一个堆叠上下文中元素在z轴上的排列
从后到前的排列顺序：
- 创建堆叠上下文的元素的背景和边框
- 堆叠级别为负值的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何 z-index 是 auto 的定位子元素，以及 z-index是 0 的堆叠上下文
- 堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插
svg
svg：可缩放矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
书写svg
-
矩形
<rect>-
fill属性：填充颜色
-
stroke：边框颜色
-
stroke-width：边框宽度
<svg style="background:#ccc" xmlns="http://www.w3.org/2000/svg"> <!-- 样式也可以写在 style里 --> <rect width="100" height="100" fill="red" stroke="#ccc" stroke-width="4"/> </svg>
-
-
圆形
<circle>- cx、cy属性：圆心的x坐标和y坐标
- r属性：半径
-
椭圆形
<ellipse>- cx属性：椭圆中心的x坐标
- cy属性：椭圆中心的y坐标
- rx属性：水平半径
- ry属性：垂直半径
- 其他属性一样
-
直线
<line>- x1、y1属性：x、y轴上的起点
- x2、y2属性：x、y轴上的终点
-
折线
<polyline>：创建由直线组成的任何形状，不自动闭合- points属性：定义绘制折线所需的点列表
-
多边形
<polygon>：包含至少三个边的图形，自动闭合-
points属性：定义多边形每个角的x、y坐标
<svg xmlns="http://www.w3.org/2000/svg"> <!-- 样式也可以写在 style里 --> <polygon points="150 100 250 150 300 300" fill="red" stroke="#ccc" stroke-width="4"/> </svg>
-
-
路径
<path>：大写字母表示绝对定位，小写字母表示相对定位-
M = moveto（移动到）
-
L = lineto（画线到）
-
H = horizontal lineto（水平线到）
-
V = vertical lineto（垂直线到）
-
C = curveto（曲线到）
-
S = smooth curveto（平滑曲线到）
-
Q = quadratic Bézier curve（二次贝塞尔曲线）
-
T = smooth quadratic Bézier curveto（平滑二次贝塞尔曲线）
-
A = elliptical Arc（椭圆弧）
- 半径1
- 半径2
- 顺时针旋转角度
- 小弧（0）或大弧（1）
- 顺时针（1）或逆时针（0）
-
Z = closepath（闭合路径）
-
<!-- 绘制太极图形 -->
<svg width="600" height="600" style="background:#ccc" xmlns="http://www.w3.org/2000/svg">
<path d="M300 100 A100 100 0 0 1 300 300 A100 100 0 0 0 300 500 A200 200 0 0 1 300 100" fill="#000" />
<path d="M300 100 A100 100 0 0 1 300 300 A100 100 0 0 0 300 500 A200 200 0 0 0 300 100" fill="#fff" />
<circle cx="300" cy="200" r="30" fill="#fff"/>
<circle cx="300" cy="400" r="30" fill="#000"/>
</svg>
数据链接—data url
数据链接：将目标文件的数据直接书写到路径位置
书写语法：data:MIME,数据
意义
优点：
- 减少请求中浪费资源
- 有利于动态生成数据
缺点：
- 增加了资源的体积
- 不利于浏览器的缓存
- 会增加原资源的体积到原来的4/3
应用场景
- 当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接
- 图片由其他代码动态生成，并且图片较小，可以使用数据链接
base64
一种编码方式，通常用于将一些二进制数据，用一个可书写的字符串表示
浏览器兼容性
有些老版本浏览器不支持新的功能，比如css3。
各个浏览器也有自己的标准。
厂商前缀
使用厂商前缀，各浏览器可以使用自己的样式
- IE：-ms-
- Chrome，safari：-webkit-
- opera：-o-
- firefox：-moz-
css hack
根据不同的浏览器（主要针对IE），设置不同的样式和元素
样式
IE中，CSS的特殊符合：
- *属性：兼容IE5、IE6、IE7
- _属性：兼容IE5、IE6
- 属性值\9：兼容IE5~IE10
- 属性值\0：兼容IE8~IE10
- 属性值\9\0：兼容IE9~IE10
渐进增强和优雅降级
两种解决兼容性问题的思路，但会影响代码的书写风格
-
渐进增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式。
书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码
-
优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理
书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对版本浏览器处理样式
caniuse—查找兼容性
网站TDK三大标签SEO优化
<!-- 网站说明 -->
<meta name="description" content="尚优购-专业的综合网上购物商城，销售家电、数码通讯等数万个品牌优质商品！">
<!-- 网站关键字 -->
<meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑">
<!-- 网站标题 -->
<title>品优购-综合网购首选</title>
1687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
