CSS核心样式
1、font-weight
作用：设置文字是否加粗显示。
属性名：font-weight，属于 font 属性的一个单一属性。
属性值有两种方式：单词类型、数字类型。
单词类型：默认normal，bold（加粗）、bolder（更粗）、lighter（更细）
数字类型：
100-900 之间的整百数字。
数字越大，文字显示越粗。
其中 400 等价于 normal，700 等价于 bold。
2、font-style
作用：设置文字是否斜体显示。
属性名：font-style，属于 font 属性的一个单一属性。
属性值： 单词。
italic、normal、oblique
标签默认就是斜体
3、line-height
作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
属性名：line-height，属于 font 属性的一个单一属性。
属性值：px像素值，百分比数值（设置本身字号像素值的百分比）
4、font
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。
3种方式
（1）2个属性（字号 + 字体）
p {
font: 14px '宋体';
}
（2）3个属性（字号 + 字体 + 行高）
p {
font: 14px/28px '宋体';
}
（3）5个属性（ 字号 + 字体 + 行高 + 加粗 + 斜体 ）
p {
font: bolder italic 14px/28px '宋体';
}
p {
font: italic bolder 14px/28px '宋体';
}
5、text-align
作用：设置文本水平方向的对齐。
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
属性值：三个方向的单词 left、right、center
6、text-decoration
作用：设置文本整体是否有线条的修饰效果。
none（正常）、overline（上划线）、line-throught（中划线）、underline（下划线）
标签自带中划线，标签自带下划线
7、text-indent
作用：设置段落首行是否进行缩进。
属性值：px单位（首行缩进多少像素）、em（首行缩进几个中文字符的位置）、百分比（缩进文字所在标签的父级标签的witth属性）。
属性值区分正负，正数表示向右缩进，负数表示向左缩进。
盒模型
盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距
padding、 边框 border、外边距 margin。
盒模型的属性中，根据不同属性的效果，可以划分区域：
• 书写元素内容区域：width+height
• 盒子可以实体化的区域：width+height+padding+border
• 盒子实际占位的位置：width+height+padding+border+margin
1、width
如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其 特点自动计算出实际宽度，例如 :元素等独占一行的，其 width 属性的值会自 动撑满父元素的 width 区域，如果是 元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。
body元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽 度。
2、height
作用：设置可以添加元素内容的区域的高度。
auto、px（像素值定义的高度）
3、padding
作用：设置的是元素的边框内部到宽高区域之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用px为单位的数值。
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。
top、right、bottom、left（上右下左）
书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左。
有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性。
padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。
根据四个方向属性值不同，padding 有多种值的书写表示方法。
根据 padding 的属性值的个数不同，区分了四种表示法：
（1）四个值：上右下左
（2）三个值：上 左右 下
（3）二个值： 上下 左右
（4）一个值： 全部
4、border
作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
属性值：由三个值组成，分为线的宽度、线的形状、线的颜色 。
border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。
5、margin
作用：设置的是盒子与盒子之间的距离。
特点：不能渲染背景。
属性值：常用 px 为单位的数值。
外边距的设置方式与内边距 padding 一模一样的
6、扩展height
根据不同的需求，高度属性可以设置也可以不设置。 • 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。 • 如果不设置高度：会根据标签内部内容高度自动撑开。 • 以
标签为例，根据情况不同选择是否设置高度：
（1）必须设计高度
设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。注意：自身盒子内部内容过多会溢出盒子区域。
overflow属性：visible（默认）、hidden、scroll、auto
（2）必须不设置高度
要求盒子高度必须自适应内部内容的高度，或者设置height的属性值是自动的。
7、扩展文本居中
水平居中：text-align：center
单行文字垂直居中：line-height=盒子高度
多行文字垂直居中：不设置盒子高度，设置文字有上下边距
元素垂直居中：不设置盒子高度，设置元素有上下相同的边距
元素水平居中：设置盒子margin：0 auto；
8、盒模型
一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：
所有子元素的宽度加在一起不能大于父元素的宽度 width。
父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素。
解决办法：计算或量取尺寸时一定要计算准确，一像素都不能偏差。不设置元素宽度（盒模型自动内减）。
盒模型自动内减
父子盒模型中，只有一个子元素，且子元素是类似标签必须占一行的。 不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。 如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进 行内减，子元素的 width 会自动收缩尺寸。 子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
9、margin塌陷
margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
常用样式
标准文档流：
区分行块
块级元素：可以设置宽高、必须独占一行
行内元素：不能设置宽高、可以并排一行
元素等级
在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素。
- 块级元素：大部分容器级标签包括p标签都是块级元素，比如
<div>,<h1>,<p> - 行内元素：大部分的文本级标签，比如：
<span>,<a> - 行内块元素：比如
<img>,input等
块级元素
（1）可以设置宽高，在浏览器中正常加载。
（2）块级元素必须独占一行，不能与其他任何标签一行
（3）块级元素如果不设置宽度，会自动撑满父级的width区域，高度不设置，会被内容自动撑开高度
行内元素
（1）行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题，
（2）行内元素可以与其他的行内或者行内块元素并排一行显示。
（3）行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。
行内块元素
（1）行内块元素可以设置宽度和高度。
（2）行内块元素可以与其他的行内或行内并排一行显示
（3）行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
（4）行内块依旧具备标准流的微观现象，例如空白折叠现象。
1、显示模式display
block:具备块级特点
inline：元素要以行内模式加载，具备行内特点
inline-block：元素要以行内块块级模式加载，具备行内块元素
none：标识标签及内部直接隐藏，让出原有文档流的位置
脱离标准流：浮动、定位
2、浮动
float:left/right
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开
3、浮动依次贴边
浮动属性值：left、right。
浮动方向设置不同，进行布局时，加载位置方向不同。 以 left 为例： 父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
4、浮动的元素没有margin塌陷
float:left/right，浮动的元素没有margin塌陷，浮动的元素会让出元素脱离文档流
注意：如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素有一个浮动其他的也要进行浮动。（不是绝对的，有需求的话可以利用）
字围效果可以通过浮动实现
5、浮动的问题
（1）标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
（2）父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。
所以我们要清除浮动。
6、清除浮动
（1）给标准流的父元素强制给一个合适的高度。
问题：父元素高度不适应，如果子元素高度发生变化，问题可能会再次出现。
（2）添加一个div，clear属性设置为both
（3）添加伪类clearfix
.clearfix:after{
content: "1";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
总结
如果父元素高度是固定的，建议使用height属性解决
如果父元素高度需要自适应，建议使用overflow属性解决浮动问题
HTML5
1、新增语义化标签
<header>：头部标签
<nav> ：导航标签
<main>: 主体标签
<article> ：独立的内容标签
<section> ：区段标签
<aside>：侧边栏标签
<footer>：尾部标签
2、多媒体标签
（1）****音频
controls：如果有该属性，则向用户展示控件，例如播放按钮。
loop：音频频繁播放
src：要播放的路径
autoplay：如果有该属性，则准备就绪后马上进行播放
preload：在页面加载的时候进行加载，并预备播放
（2）视频
<video src="../video/my.mp4" controls autoplay muted></video>
controls：如果有该属性，则向用户展示控件，例如播放按钮。
src：要播放的路径。
autoplay：如果有该属性，则准备就绪后马上进行播放。注意：谷歌浏览器需要添加muted来解决自动播放。
muted:静音播放
width：设置播放的宽度；height：设置播放的高度
兼容写法
<video autoplay controls muted>
<source src="../video/my.mp4" type="video/mp4">
<source src="../video/my.ogg" type="video/ogg">
您的浏览器版本过低，不支持video视频
</video>
（3）总结
音频和视频的使用方法基本一致，浏览器支持情况不同，我们可以给视频添加muted来解决谷歌自动播放的问题，但是音频不可以
3、新增表单标签
邮箱：<input type="email"/>
URL网址:<input type="url"/>
日期：<input type="date"/>
时间：<input type="time"/>
月份：<input type="month"/>
周：<input type="week"/>
数字：<input type="number" max="100" min="2" step="4"/>
进度条：<input type="range"/>
电话：<input type="tel"/>
查询：<input type="search"/>
颜色：<input type="color"/>
4、dataList
城市：<input type="text" list="list01">
<datalist id="list01">
<option value="上海">sh</option>
<option value="广州"></option>
</datalist>
5、新增表单标签
required:必填；placeholder：表单提示信息；autofocus自动聚焦；autocomplete：自动补全；mutiple：多文件上传
<input required="required" placeholder="请输入您的姓名" autofocus="autofocus" autocomplete="on"/>
CSS3
1、子集选择器
用于选取带有特定父元素的元素，语法：element1>element2
注意：如果元素2不是元素1的直接子元素，则不会被选择
div>p{
font-size:26px
}
2、兄弟选择器
相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
书写语法：E1 + E2。
注意：
a）选中的是紧跟在 E1 之后的同级元素 E2。
b）只能选中紧跟在后面的一个 E2 元素。
c） 二者有相同的父元素。
d）+ 符号前后可以添加空格书写。
HTML
<div class="box1">
<h2>二级标题</h2>
<p>我是p元素</p>
</div>
css
<style>
.box1 h2 + p {
color: red;
}
</style>
其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
书写语法：element1~element2
注意：
a）选择 element1 之后出现的所有 element2。
b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
c）~ 符号前后可以添加空格书写。
3、结构伪类选择器
:first-child、:last-child、:nth-child(n)
<div class="box1">
<h2>二级标题</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
样式
.box1 :first-child{
color: red; //段落1
}
.box1 :last-child{
color: pink; //段落4
}
.box1 :nth-child(3){
color: royalblue;//box1的第三个
}
nth-child（n）
n 可以是数字，关键字和公式
• n 如果是数字，就是选择第 n 个
• 常见的关键词 even 偶数 odd 奇数
• 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3… 一直递增）
• 但是第 0 元素或者超出了元素的个数会被忽略
例如：
2n 偶数
2n+1 奇数
5n 5 10 15 ……
n+5 从第5个开始（包含第5个）到最后，5 6 7 8 9 ……
-n+5 前5个（包含第5个），5 4 3 2 1 0……
E:nth-child(n) 和E:nth-of-type(n) 的区别
E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。
E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素
4、新增伪元素选择器
为什么叫伪元素？因为元素我们确实创建了，但是DOM中看不到，所以叫伪元素。
• 1. 单冒号 E:before
• 2. 双冒号 E::before
• 3. 浏览器对以上写法都能识别，双冒号是 h5 的语法规范。
注意：
伪元素只能给双标签添加，不能给单标签添加
• 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
• 伪元素里面必须写上属性 content:"";
• before 和 after 创建一个元素，但是属于行内元素。
• 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。
5、新增属性选择器
E[attr]：选择具有attr属性的E元素。
input[name]{
height: 40px;
}
<form>
<input name="name" />
<input />
</form>
E[att] 选择具有att属性的E元素
E[att=“val”] 选择具有att属性且属性值等于val的E元素
E[att^=“val”] 匹配具有att属性、且值以val开头的E元素
E[att$=“val”] 匹配具有att属性、且值以val结尾的E元素
E[att*=“val”] 匹配具有att属性、且值中含有val的E元素
权重：
基础选择器：id 选择器 > 类选择器 > 标签选择器 > *
• 伪类选择器、属性选择器 的权重等于类选择器 。
• 伪元素选择器 的权重等于标签选择器 。
6、盒模型
• CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总
宽度和总高度
content-box：默认值，标准盒子模型，盒模型是外扩的。width 与 height 只包括内容的宽和高。在 width 和 height 之外绘制元素的内边距和边框。盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分
border-box：怪异模式，盒模型是内减的。width 和 height 属性包括内容，内边距和边框，但不包括外边距。为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。盒子总体大小为 width 和 height，添加了padding和border后，内容区域会收缩
border-box示例
.box1{
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
border: 10px solid #bbbbbb;
box-sizing: border-box;
}
<div class="box1">
我是内容
</div>
7、边框圆角
属性名：border-radius
作用：设置边框的圆角。
属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。
border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 左上角 右上角和左下角 右下角 ;
border-radius: 左上角和右下角 右上角和左下角 ;
border-radius: 四个角相同;
8、文字阴影
在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色 。text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。注意：多阴影中，先写的阴影压盖在后写的阴影上。
.word{
font: bolder 30px/60px '微软雅黑';
margin: 50px;
/* 水平位置、垂直位置、模糊程度、颜色 */
/* text-shadow: 2px 2px 5px red; */
text-shadow: 3px 3px 5px red,
6px 6px 5px blue,
9px 9px 5px green
;
}
9、盒子阴影
.box1{
width: 200px;
height: 200px;
background-color: pink;
/* 水平位置、垂直位置、模糊程度、扩展大小、颜色、是否内边框阴影 */
/* box-shadow: 10px 10px 5px 10px burlywood inset; */
box-shadow: 10px 10px 5px 10px burlywood;
}
盒子也可以进行叠加阴影
.box1{
box-shadow: 10px 10px 5px 10px red,
20px 20px 5px 10px green,
30px 30px 5px 10px blue;
}
10、动画
属性名：transition
作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），
并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实
现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。
div:hover{
width: 400px;
height: 400px;
}
11、transform
transform 的属性值为 translate() 时，可以实现位移效果。
transform: translate(100px,200px);
12、translate位移
/* x方向（右）、y方向（下） */
transform: translate(10px,200px);
13、scale缩放
transform 的属性值为 scale() 时，可以实现元素缩放效果。
scale(x, y) x,y分别为改变元素的宽度和高度的倍数
scale(n) 只有一个值，表示宽度和高度同时缩放n倍
scaleX(n) 改变元素的宽度
scaleY(n) 改变元素的高度
14、rotate旋转
rotate(数字deg)
其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有
一个属性值。
注意：元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。
transform: rotate(30deg) ;
15、skew倾斜
transform: skew(数字deg,数字deg);
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个
数值不写默认为0
transform: skew(30deg);
16、transform-orgin属性
作用：设置调整元素的水平和垂直方向原点的位置。
调整元素的基准点。
属性值：包含两个，中间使用空格分隔。
x ：定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y ：定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比