（Hbuilder快捷方式创建）
一、CSS字体样式属性
font-size：字号
font-family：字体样式
font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，等等＊／
font-size: 14px;
color: pink;
}
font-weight：字体粗细
除了HTML中的的＜ｂ＞和＜strong＞标签外，还可以使用CSS完成字体加粗效果，但是CSS是没有语义的。
font-wieght属性定义字体的粗细，属性值有normal，bold，bolder，lighter，数字１００～９００
【一般更喜欢用数字表示，数字４００＝normal，数字７００＝bold】
strong{
font-weight: normal;/* 让标签包裹的粗体不加粗 */
}
font-style：字体风格
除了HTML中的的＜i＞和＜em＞标签外，还可以使用CSS完成字体倾斜效果，但是CSS是没有语义的。
normal：指定文本字体样式为正常的字体
italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字【不常用】
font：综合式样式【重点】
二、选择器
选择器可分为基础选择器和复合选择器两大类。
基础选择器由单个选择器组成
基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定同一的CSS样式。
语法：
标签名 {
属性1: 属性值1;
…
}
类选择器
如果想差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器
类选择器在HTML中以class属性表示，在CSS中以 “.” 号显示。
语法：
.类名 {
属性1: 属性值1;
…
}
ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id元素，在CSS中以 “#” 号显示。
语法：
#id名 {
属性1: 属性值1;
…
}
id选择器和类选择器的区别：
1.类选择器（class）可以被一个或者几个标签使用
2.id选择器不能被重复使用
3.id选择器和类选择器最大的区别在于使用次数上
4.类选择器在修改样式中使用最多，id选择器一般用于页面唯一性的元素，通常和JavaScript搭配使用
通配符选择器
在CSS中，通配符选择器使用 “*” 号定义，它表示选取页面中的所有元素（标签）
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，通常用于清除所有元素的内外边距
* {
padding: 0;
margin: 0;
}
伪类选择器
倾向于给某些选择器添加效果，如给链接添加效果
（1）链接伪类选择器
改变顺序可能造成效果全部无法实现的后果。
eg：
<head>
<style>
a:link {
/* 未访问的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:visited {
/* 访问过一次的链接 */
color: darkorchid;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* 鼠标移动到连接上时链接的变化 */
color: tomato;
font-size: 20px;
font-weight: 700;
}
a:active {
/* 选定的链接，我们按住鼠标别松开时的状态 */
color: green;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>
以下是链接伪类选择器的简写方式【最常用写法】
<head>
<style>
a {
/* a是标签选择器，指所有的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* ：hover是链接伪类选择器 */
color: tomato; /* 鼠标经过，由蓝色变红色 */
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>
三、CSS外观属性
颜色属性
line-height:行间距
用于设置行间距，也称行高。一般比字号大7，8个像素，即px。
p {
line-height: 40px;
}
text-align: 水平对齐方式
center：居中
left：左对齐
righ：右对齐
text-indent：首行缩进
所有段落都会缩进，建议使用em，作为单位，1em=一个字的宽度
p {
text-indent: 2em;/* 此时2em就是两个字的宽度 */
}
letter-spacing：字间距
字符之间的空白，允许使用负数，默认为normal
div {
letter-spacing: 2px;
}
word-spacing：单词间距
对中文无效
四、引入CSS样式表
内部样式
内部样式是集中将代码卸载HTML文档的head头部，用style标签定义。也可也将style标签放在文档任何地方。
type=“text/CSS”在HTML5中可以省略，但写上也比较规范。
行内样式（内联样式）
内联样式，又称行内样式，内嵌样式，通过标签的style属性来设置元素的样式。只适合样式比较少的情况
<标签名 style=“属性1：属性值1；属性2：属性值2”> 内容 </标签名>
外部样式表
外部样式奥是将所有样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签连接到HTML文档中。【link是单标签】，完全实现了结构与样式分离。
<head>
<link rel="stylesheet" href="style.css"/>
</head>
三种样式对比
块级元素（block-level）
每个元素通常会独自占据一整行或者多行，可以对其设置高度，宽度，对齐属性
⭐关于块级元素的特点，要能口述
行内元素（inline-level）
不占独立区域，仅靠自身大小和图像尺寸来支撑结构。一般不可设置宽度、高度、对齐属性。
行内块元素（inline-block）
标签模式转换display
五、CSS复合选择器
1. 后代选择器
该选择器指向的是某节点的某个后代结点，使用选择器之间有空格分隔例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.d1{
background-color: pink;
}
.d1 .d2 { // 选择的是.d1的后代节点.d2
color: yellow;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">我是后代1</div>
<div class="d3">我是后代2</div>
</div>
</body>
</html>
2. 交集选择器
交集选择器的写法为： 选择器A选择器B ，两个选择器之间是连起来的，没有分隔。指向既满足选择器A且满足选择器B的元素结点
// 交集选择器
div.d3 {
color: green;
}
3. 并集选择器
并集选择器的写法：用逗号隔开。
.d2, .d3{
background-color: red ;
}
4. 子代选择器
与后代选择器不同的是，子代选择器只选择到第一代。使用 父节点选择器 > 子结点选择器 的写法。
.d1>d2{
background-color: pink;
}
5. 兄弟选择器
兄弟选择器表示两个并列的结点，通过某结点选择到它的下一个兄弟结点。使用 “+” 号分隔。
.d2+.d3{
font-size: 28px;
}
六、CSS背景（background）
背景图片（image）
必须引用在同一个项目下的图片，可以不在同一个文件夹中，引用不同项目下的图片会失败
背景图片更改大小只能用background-size
背景平铺（repeat）
默认平铺，取消平铺要no-reprat。
背景位置（position）
设置检索对象的背景图像位置必须先指定background-image属性。默认为（0% 0%）。如果只指定了一个值，该值应用于横坐标，纵坐标默认50%，如果有两个值，第二个值应用于纵坐标。
== 利用方位名词更改图片位置，位置默认左上角==
方位名词没有顺序，谁在前都行，如果只有一个方位词另一个默认是center
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: right top;
}
利用精确单位更改图片位置
第一个值一定是x坐标，第二个值一定是y坐标。
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: 15px 30px;
}
== 混合使用==
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: center 30px;
}
背景附着
默认是scroll
背景简写
和字体简写类似，但是顺序没有强制标准，一般建议如下
background：背景颜色 、背景图片地址，背景平铺，北京滚动，背景位置
background: pink url(“女儿.png”) no-repeat fixed center 30px;
背景透明（CSS3）
背景半透明是指盒子背景半透明，对于盒子里边的内容不受影响。
给文字和边框（border） 设置半透明都可以用rgba。
背景缩放（CSS3）
cover：自动调整缩放比例，保证图片始终填充满背景区域，如果有溢出会被隐藏，图片等比缩放并保证宽高同时满足盒子大小。
contain：自动调整缩放比例，但保证图片始终完整显示在背景区域。只要宽度和高度有一样曼珠盒子大小，就不再缩放。保证了图片的完整性，不会有缺失，但是盒子会有一部分裸露，没有背景图片覆盖。
多背景（CSS3）
一个元素可以设置多重背景图像
每组属性之间使用逗号分隔
如果设置的背景图片之间存在重叠关系，前面的背景图片会覆盖在后面的背景图片之上
为了避免背景色将图片给盖住，背景色通常定义在最后一组
div {
height: 800px;
width: 700px;
background: url("女儿.png") no-repeat 10px 20px/300px,
url(001.jpg) no-repeat right 20px/300px,/*位置/大小*/
url(troye.jpg) no-repeat 10px bottom/300px pink;
}
凹凸文字
<head>
<style>
body {
background-color: #ccc;
}
div {
color: #CCCCCC;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div >
<div>我是凸起的文字</div>
<div class="second">我是凹下的文字</div>
</div>
</body>
此处产生了 :last-child 未成功调用问题
解决方法：两个div必须在父类div下才能成使用 :last-child ，否则只能使用 :first-child 。
== 使用时必须选择父类下的最后一个元素。==
另外：可以成功使用nth-child(n)，不必在父类标签下
text-decoration:通常用于给链接修改装饰效果。
使用技巧：在一行内，设定行高等于盒子高度，可以使文字垂直居中。
七、CSS三大特性
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一种能力，如果一个属性通过两个相同的选择器设置到了同一个元素上，那么此时一个属性就会将另一个属性层叠掉，此为样式冲突。如果出现样式冲突，以最后的样式为准。
CSS继承性
所谓继承性就是指，书写CSS样式表时，子标签会继承父标签的某些样式，比如文本颜色和字号。
CSS优先级
在定义CSS样式时，经常出现两个或更多规则应用在一个元素上，这时会出现优先级的问题。
关于CSS权重，用一套公式来计算，是衡量CSS优先级的一个标准，具体规范如下：
四个级别从左到右，一级大于一级，数位之间没有进制，级别之间不可超越。
继承样式权重为0，不管父类元素权重多大，它被子类继承时权重都为0，子元素定义的元素会覆盖继承样式。
八、CSS盒子模型（重点）
所谓盒子模型，就是把html页面中的元素看作是一个矩形的盒子，每个矩形都有元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
所有文档元素（标签）都会生成一个矩形框，我们称之为元素框（element box)，它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己的大小和为之外，还影响着其他盒子的大小和位置。
盒子边框（border）
语法
边框属性一：设置边框样式（border-style）
边框样式用于定义页面中的边框风格，常用如下：
border-style，border-width，border-color，设置四边属性时是按照上右下左的顺时针顺序。
div {
border-color: red blue springgreen black;
border-style: dashed double solid dotted;
border-width: 1px 5px 10px 30px;
}
简写的时候中间用空格隔开。
div:nth-child(4) {
border-top: 3px solid orangered;/*上边框，宽度 样式 颜色*/
border-bottom: blueviolet 3px solid;/*下边框 颜色 宽度 样式*/
/*样式顺序不影响表现*/
}
border属性不继承，可以继承的属性回看关于继承的部分。
cellspacing和cellpadding的区别：
前者为两个单元格之间的距离，后者为单元格内文字与边框的距离。
cellspacing表示表格各单元格之间的空隙，参数值是数字
cellpadding表示表格内文字和表格边框的距离
两个属性都应用在
标签内部
表格的细线边框
圆角边框（CSS3）
<style>
div {
height: 400px;
width: 400px;
border: 1px solid red;
}
div:first-child {
border-radius: 10px;
/* 一个数值表示四个角都是相同的10px */
}
div:nth-child(2) {
border-radius: 50%;
/*取宽度和高度的50%，会变成一个圆形*/
}
div:nth-child(3) {
border-radius: 10px 40px;
/* 取对角线，左上角和右下角是10px，右上角和左下角是40px */
}
div:nth-child(4) {
border-radius: 10px 40px 80px;
/* 左上角10 右上角和左下角40 右下角80 */
}
</style>
内边距（padding）
padding属性用于设置内边距，是指内容与边框之间的距离。
padding后跟的数值个数不同表达意思也不同，padding两个值代表的方向要和radius分开
外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能用来放置其他内容。
margin：上外边距 右外边距 下外边距 左外边距
取值顺序和内边距（padding）一样。
外边距实现盒子居中
让一个盒子实现水平居中需要满足两个条件 ：
1、必须是块级元素
2、盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
header {
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;/* 上下不管，左右是auto就能居中 */
}
实际案例中，制作导航栏高度应选择奇数高度，行高用偶数就会出现边框像素留白的问题，使用a:hover时行内块不能全部变色，上下边缘会有1px的空白区域
注意：
插入图片也可也看作一个盒子，可以用margin和padding更改位置，但是背景图片更改位置只能用background-position。
一般情况下背景图片适合做一些小图标使用，产品展示类用的就是插入图片
清除元素默认外边距
行内元素只有左右外边距，没有上下外边距。我们尽量不要给行内元素指定上下外边距。
外边距合并
使用margin定义块级元素的垂直外边距时没可能会出现外边距的合并（也称外边距的塌陷）。
相邻块元素垂直外边距合并
嵌套元素垂直外边距合并
content宽度和高度
使用宽度属性width和高度属性height可以对盒子大小进行控制。
width和height属性值可以为不同单位的数值或相对于父元素的百分比，但最常用的还是像素px
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对于行内元素无效（img和input标签除外）
2、计算盒子模型总高度时，应该考虑上下两个盒子垂直外边距合并的情况。
盒子模型布局稳定性
根据稳定性区分使用优先级
原因：
1、margin会有外边距合并问题，所以最后使用
2、padding会影响盒子大小，需要进行加减计算后使用，比较麻烦
3、width没有问题，经常使用宽度 / 高度剩余法来做。
CSS3盒模型（CSS3新增属性）
CSS3中可以用box-sizing 来指定和模型，可指定为content-box，border-box，这样计算盒子大小的方式会分为两种情况
九、浮动（float）
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：
普通流（标准流）
浮动
定位
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
标准流（普通流/文档流）
所谓的标准流: 就是标签按照规定好默认方式排列
块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。
浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 { float: 属性值; }
浮动特性（重难点）
1、浮动脱标（脱离标准流），不占位置，会影响标准流。浮动只会左右浮动
2、浮动的盒子不再保留原先的位置
3、 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。
4、浮动元素会具有行内块元素特性
·如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
·浮动的盒子中间是没有缝隙的，是紧挨着一起的
·行内元素同理
浮动常常和父级标准流一起使用，即标准流父盒子内是浮动的子盒子
一个元素浮动了，理论上其余的兄弟元素也要浮动。
如果不浮动会出问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流.
清除浮动
清除浮动本质：解决父级元素因为子元素浮动引起的内部高度为0的问题。【本来子盒子是可以把父亲撑开的，但是浮动相当于飘起来，没法撑开了，父亲如果不设置高度，高度就会变成0】
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
我们实际工作中， 几乎只用 clear: both;
1.额外标签法
额外标签法也称为隔墙法，是 W3C 推荐的做法。
注意： 要求这个新的空标签必须是块级元素
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
2.父级添加 overflow 属性
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
例如：
overflow:hidden | auto | scroll;
优点：代码简洁
缺点：无法显示溢出的部分
注意：是给父元素添加代码
3.父级添加after伪元素
:after 方式是额外标签法的升级版。给父元素添加：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等
4.父级添加双伪元素
\给父元素添加
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
总结浮动
为什么需要清除浮动？
父级没高度。
子盒子浮动了。
影响下面布局了，我们就应该清除浮动了。
十、定位(position)
为什么使用定位
场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.
场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
定位：
将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子
定位也是用来布局的，它有两部分组成：
定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
边偏移（方位名词）
边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。
边偏移属性
示例
描述
top
top: 80px
顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom
bottom: 80px
底部偏移量，定义元素相对于其父元素下边线的距离。
left
left: 80px
左侧偏移量，定义元素相对于其父元素左边线的距离。
right
right: 80px
右侧偏移量，定义元素相对于其父元素右边线的距离
定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。
定位模式 (position)
在 CSS 中，通过position 属性定义元素的定位模式，语法如下：
选择器 {
position: 属性值;
}
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
静态定位 - static
相对定位 - relative
绝对定位 - absolute
固定定位 - fixed
1.静态定位 - static
静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。
2.相对定位 - relative
<style>
div{
position: relative;
background-color: red;
border-top:1px solid #000
}
</style>
<style>
div{
position: relative;
background-color: red;
border-top:1px solid #000;
top: 30px;
left: 30px;
}
</style>
可以看到该元素向右下各偏移了30px.
相对定位的特点就是元素本身在文档流中的占位不变，无形的东西就是B元素在文档流中的占位，这也是为什么C元素不会浮动过去的原因。可以想象成B元素的本体依然处于普通文档流中，它的替身在参照本体进行移动。
相对定位的特点：
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
3.绝对定位 - absolute
语法
选择器 {
position: absolute;
}
绝对定位是参考父元素的相对定位来实现的：
#A{
position: relative;
background-color: red;
border-top:1px solid #000;
height: 300px;
width: 300px;
/* left: 30px;
top: 30px; */
}
#B{
position: absolute;
background-color: rgb(17, 255, 0);
border-top:1px solid #000;
height: 100px;
width: 100px;
left: 30px;
top: 30px;
}
可以看出绿色div是以红色为定位位移30px。
绝对定位的特点总结：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）
定位口诀 —— 子绝父相
弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个**“子绝父相”太重要了，是我们学习定位的口诀**，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
4.固定定位 - fixed
固定定位比较简单，固定定位是参照浏览器窗口的左上角进行偏移。
固定定位的特点就是：无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。
另外，如果设置了固定定位的元素也设置了width或height的百分比值，那么此百分比的值是参照窗口宽高来计算的。
z-index属性：
z-index属性是设置元素的层级，数值低的会被数值高的遮住。
固定定位的特点：
1.以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
2.固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）
完全脱标—— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
跟父元素没有任何关系；单独使用的
不随滚动条滚动。
堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
语法：
选择器 { z-index: 1; }
z-index 的特性如下：
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
定位(position)的拓展
绝对定位的盒子居中
1.left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2.margin-left: -100px;：让盒子向左移动自身宽度的一半。
定位特殊特性
绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
十一、圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
如果4个角，数值相同
border-radius: 15px;
里面数值不同，我们也可以按照简写的形式，具体格式如下:
border-radius: 左上角 右上角 右下角 左下角;
十二、元素的显示与隐藏
目的（本质）
让一个元素在页面中消失或者显示出来
场景
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现
display 显示（重点）
display 设置或检索对象是否及如何显示
display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：
visibility 可见性 （了解）
visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible ; 元素可视visibility：hidden; 元素隐藏
特点：visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置， 就用 visibility：hidden
如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）
overflow 溢出（重点）
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
visible：不剪切内容也不添加滚动条
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出内容否，总是显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。
十三、CSS 三角
介绍
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-color: red green blue black;
line-height:0;
font-size: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
/* border: 10px solid pink; */
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: pink;
margin: 100px auto;
}
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="jd">
<span></span>
</div>
</body>
</html>
十四. vertical-align 属性应用
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom
图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2.把图片转换为块级元素 display: block;
十五、HTML5新特性
概述
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
语义化标签 （★★）
以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签
多媒体标签
多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。
因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用
视频标签- video（★★★）
基本使用
当前 元素支持三种视频格式： 尽量使用 mp4格式
使用语法：
<video src="media/mi.mp4"></video>
兼容写法
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</ video >
上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
video 常用属性
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg">
</video>
音频标签- audio
基本使用
当前 元素支持三种视频格式： 尽量使用 mp3格式
使用语法：
<audio src="media/music.mp3"></audio>
兼容写法
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio> 标签。
</ audio>
上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
audio 常用属性
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
新增的表单元素
常见的：text password radio checkbox button file hidden submit reset image
新的输入类型：
十六、CSS3新增
选择器
css3中新增了一些选择器
新样式
1.边框
border-radius：创建圆角边框；
box-shadow：添加阴影；
border-image：使用图片绘制边框
2.背景
background-clip：确定背景画区；
background-origin：当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的；
background-size：用来调整背景图片的大小；
background-break：元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
3.文字
word-wrap：normal：使用浏览器默认的换行；break-all：允许在单词内换行。
text-overflow：当文本超过盒子大小时，是修建文本，还是省略号表示。
text-shadow：设置文本阴影。
4.颜色
rgba：颜色和透明度；
hala：色相+饱和度+亮度+透明度。
transition过渡（一般和:hover搭配使用）
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* transition: width 1s, height 2s; */
transition: all 1s;
}
.box:hover {
width: 400px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
transform转换
1.translate移动
.box {
width: 200px;
height: 100px;
background-color: pink;
transform: translate(100px,200px);
}
定位+transform: translate(-50%，-50%)可以实现元素居中
2.rotate旋转
img {
width: 200px;
transform: rotate(45deg);
}
设置转换中心点 transform-origin
img {
width: 200px;
transform-origin: top right;
transform: rotate(45deg);
}
3.scale缩放
.box2 {
width: 200px;
height: 100px;
background-color: pink;
transform: scale(2,1.5)
}
4.skew倾斜
.box2 {
width: 200px;
height: 100px;
background-color: black;
transform: skew(30deg,20deg)
}
animation动画
颜色渐变
flex弹性布局
对父盒子设置成弹性布局，他的所有子元素自动成为容器成员，称为flex项目item。容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每个轴都有自己的起点和终点。
容器的属性
1.flex-direction：决定主轴的方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
2. justify-content：在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
3. flex-wrap：排列不下时，item如何换行。
4.align-content ：侧轴上子元素的排列方式(多行)，如果项目只有一根轴线，该属性不起作用。
5.align-items：定义项目在交叉轴上如何对齐
成员的属性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
