三大重点
1:元素类型
| (1)块级元素 哪些标签:div p h1 h2 h3 ul li -独占成行(如果有其它元素只能换到下一行) -高度为0 (默认) -如果有子元素或者文字图片会块元素撑起来(子元素多高它多高) 示例：一组商品列表(可能多，可能少 高低不确定) -也可指定高度 示例: 导航栏 -宽度默认(与父元素宽度相同 100%) -背景颜透明 -适用场景（什么时候用块级元素） (1.1) 一个独立功能最外层父素(宽 高 背景 定位) div (1.2) 中间发现有独立方格状内容(div) 位置精确 示例:红色方格就是 div (1.3) 中间导航列表 ul li(块级元素)(文字居中 垂直 水平) a |
| (2)行内元素 哪些标签:span a -元素宽度和高度都是依靠内容撑起 (内容宽度就是元素宽度) -不能指定宽度高度 -无效 -加内边距(左右) padding -撑开元素 -与其它行内元素共用一行 -适用场景 (1)单行或多行文字 价格
(2)a范围(鼠标从小箭头变成小手 95% a)
-由于不能指定宽度和高度（用户操作不方便） 太小用户点击错误 (转行内块 转块 能指定大小) |
| (3)行内块元素 哪些标签:input img(背景图比img位置更精确;适用性更广) (3.1)可以指定宽度和高度 (3.2)会和多个行内块元素或者行内元素共用一行 -适用场景
(3.2)图片会下方有条空白边线 解决办法: (1)img display:block; (2)如果img有父元素 font-size:0; |
| (4)相互转换 所有元素转换块 display:block; 所有元素转换行内块 display:inline-block; 所有元素转换行内 display:inline; |
2:盒模型
#在网页中的每个标签(元素)都包裹在一个透明的盒子中(我们称盒子:盒模型)
## 盒子模型
### 1. 盒尺寸四大家族
每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。
(1)内容 #文字 图片 最里面
(2)内边距-内补丁(padding) #透明 第一层(鞋泡沫板)
(3)边框 (border) #透明(可改) 第二层(壳)
(4)外边距-外补丁(margin) #透明 第三层(盒子与盒子之间距间)
.item2宽度 = 内容290px;+内补丁50px(左右);+边框50px;(左右)
+外边距 50px;(左右)
#############################################
七、显示和隐藏属性
1. display:none
- `display：none;`使元素消失，脱离文档流的消失 (搬家)
- `display：block;`使元素出现，元素显示为块级元素
2. visibility: hidden
- `visibility: visible;`元素显示
- `visibility: hidden；`元素隐藏，占据自身位置 (出去了)
3. opacity: 0; (出去了)
- opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明
- 缺点是，元素内的一切都会随着透明度改变
| 不同隐藏和显示适用哪些场景 |
| (1)最常见 程序: 隐藏display:none; 显示 display:block; |
| (2)动画 淡入淡出;左移 右移 上移 下移 opacity:0; left: top: |
八、文本格式化
1. 字体属性
（1）字体大小
字体大小可以使用不同的单位，如 px、em、rem、vw 等等，不允许负值像素，
- `font-size: 30px;`字体号属性
- px 像素
- em 父级元素的倍数
- rem 根标签的倍数(移动端网页 !!!!)
- vw 视窗尺寸
用户的浏览器默认渲染的文字大小是“16px”（大多数浏览器）“em”是一个相对的大小，相对的是"父级元素"的字体大小，我们可以这样来设置 1em，0.5em，1.5em。
（2）字体系列(客户电脑与手机相关)
在选择字体之前，一定要按照产品要求赋值，要确定用户有该字体，或者可能有该字体。字体不要只写中文，最好英文中文一起加入，并把该字体的英文描述写在前面。
- `font-family`属性设置所需要的字体
- 一个单词的可以之际使用，多个单词组成词组的用引号括起来，中文尽量用引号括起来
- 多个字体列表按照顺序从前往后查找执行
推荐字体序列
移动端项目：
| font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self; |
pc端(含Mac)项目：
| font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self; |
移动和pc端项目：
| font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self; |
（3）字体字重
字体字重就是字体粗细，但根据浏览器的不同可能展现的粗细表现也不同，因此有些值的差别看不出来，尤其是移动端，要提醒 ui 不要太细，不要太粗，显得更专业
- `font-weight`字体的字重，字的粗细
- 于 1 和 1000 之间的数字类型值，必须要是 100 的倍数。
- 常用关键词：normal（400 默认）、bold（700）、lighter（300）
- 浏览器不同展现效果不同，需要注意
（4）字体样式
在一般情况下，因为部分标签带有自己的样式，所以一些公司在 css 样式重置的时候会先把所有的字体样式搞成统一的，比如具有斜体的``标签,会先把它变成默认样式再进行操作。
【注意】加粗的标签也会变成默认粗细。不建议使用标签做斜体
- `font-style`字体样式属性
- `font-style: normal;` 默认正常
- `font-style: italic;` 斜体
（6）字体的简写方式
- `font:italic 400 40px chiller;`
- 顺序：字体样式 字重 字号 字体系列，不可改变顺序
- 最简方式 `font：40px chiller; `字号和字体系列，不能再减少
2. 文本属性
（1）字体颜色
注意：不同终端展示颜色可能不同，尽量使用 web 安全色，或者沟通颜色的要求
- color：颜色的色值
- 取值:英文，十六进制，rgba()，其他
（2）文本的水平(左右)对齐方式
- `text-align`针对块级元素中的内联元素，它需要写在父级（块级元素）中，不能写在子元素中（文字本身和内联元素）
| 注意: |
| (1)方向水平(左右)居中 |
| (2)父元素是块级 ok #div li 父元素是行内 error #a span |
- 取值
- `left`默认,左对齐
- `center`居中对齐
- `right`右对齐
- 内联元素（单个）与文字（单行）在父级水平居中的方式：是对块级元素中的文字，或对块级元素的内联元素水平居中，这个元素需要给父级（块元素），块级元素的水平居中不能使用该属性。
| div { width: 500px; height: 200px; text-align: center; /* 适用于div内部的文字和内联元素 */ } |
(3) 文本的行高
- `line-height`属性可以设置文本的行间距(一行与另一行之间距离),可使用长度单位 px，或使用无单位的倍数如 1，1.5，2
- 文本的行高包括文字上下间距+文本高度，文本居中上下行间距相等
- 使行间距等于元素高度，则“单行文本”垂直显示在元素中
- 常用场景
- 行元素在块元素里上下左右居中（行高等于父级元素高度）
- 增加元素的文字行间距（在父元素设置，子元素也会生效）
| 文字垂直方向居中(注意:父标签 块级) (1)二条指句一起写: height:40px;line-height:40px; 结果:文字垂直居中 |
(4) 文本的线条修饰
在使用 a 标签的时候有一个默认下划线,有时不需要,在 css reset 中将 a 标签的默认下划线去掉
- `text-decoration: none;`无线条
- `text-decoration: underline;`下划线
- `text-decoration: overline;`上划线
- `text-decoration: line-through;` 删除线
（5）首行缩进
- `text-indent`指定块容器中第一行文本的缩进
- `text-indent:2em`两倍的字体大小,相当于空两格
(6)文本的换行
- 文本换行的原因
- 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的`white-space:normal`,当定义的宽度之后自动换行。
- 对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行
- 换行属性
- `white-space: nowrap;`不换行
- `word-wrap:break-word;`强制换行
（7）文本溢出
各浏览器对`text-overflow:ellipsis`支持都不统一，特别是表现形式上，因此它的兼容性并不好。
| 为炽加地lakdsfasdflkj为为为为为为为为为为为为为为 /* 出现省略标记 .d1 { background-color: turquoise; (1)父元素是块元素 15:43*/ width: 150px; /* (2)强制不换行 */ white-space: nowrap; /* (3)超出部分隐藏（后面会学） */ overflow: hidden; /* (4)当对象内文本溢出时显示省略标记（...） */ text-overflow: ellipsis; } |
#谨慎使用:文字与图片在一行中显示，调整 图片与文字垂直位置
#精度高:定位
| #位置精度不高可以使用以上方法 #位置精度高用:定位 |
.vertical-align 属性
- `vertical-align`是用来设置内联元素对齐方式的，针对的并不是自身的文字
- 常用关键字值：
- `vertical-align: middle;`
- `vertical-align: top;`
- `vertical-align: bottom;`
- `vertical-align: baseline;`img 的默认对齐值为基线对齐
#################################################
##盒子阴影
### 1.盒子阴影的属性
- `box-shadow: x轴偏移(水平向右) y轴偏移(垂直向下)
羽化(模糊) 扩展 颜色 内阴影`
- 第一个值和第二个值代表： x轴上的偏移量 和y轴上的偏移量（正负值）。
- 第三个值代表：模糊半径的大小（羽化）不允许负值。
- 第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。
- 第五个值代表：颜色值。
- 第六个值（可选）代表：阴影向内inset：默认阴影向外扩散。
```css
.d1 {
width: 200px;
height: 100px;
background-color: black;
/* x轴偏移 y轴偏移 羽化 扩展 颜色 */
box-shadow: 15px 14px 10px 20px #666;
}
.d2 {
width: 200px;
height: 100px;
background-color: red;
/* x轴偏移 y轴偏移 羽化 扩展 颜色 内阴影*/
box-shadow: 3px 5px 5px 0 green inset;
}
.d3 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
box-shadow: 0 0 50px 30px gold;
}
```
光标设置
- `cursor: default;`箭头
- `cursor: pointer;`小手
- `cursor: wait;`等待
- `cursor: text;`文本
- `cursor: crosshair;`十字
- `cursor: progress;`箭头+等待
- `cursor: help;`箭头+问号
```css
.l1 {
/* 小手 */
cursor: pointer;
}
.l2 {
/* 箭头+等待 */
cursor: progress;
}
.l3 {
/* 文本 */
cursor: text;
}
.l4 {
/* 等待 */
cursor: wait;
}
.l5 {
/* 求助 */
cursor: help;
}
```
、背景
### 1. 背景颜色
`background-color: 颜色色值;`
### 2. 背景图片(!!!!!!!)
#### （1）背景图
- `background-image: url(路径);`
- 路径可以是绝对路径或者相对路径,注意外部css的路径
- 背景图必须要求元素具有宽度和高度
```css
.bg {
width:100%;
height:500px;
background-image: url(./img/xz-login/regist.png);
}
```
#### （2）背景图和img的区别
- 尺寸角度
- img具有自己的尺寸，不设置宽度高度，可以直接显示 （如同照片）
- 背景图必须设置宽度和高度 （如同打印）
- 增加内容角度
- img图片上不可以直接写文字，除非在img盒子外部定位
- 背景图是可以在图片上写文字的，背景图其实和颜色一样
- 功能角度
- img一般用于产品展示，可以根据素材更新
- 背景图一般大背景或者更新小图标icon
### 3. 背景图平铺
- `background-repeat:repeat;` 默认值 横向纵向都
- `background-repeat:no-repeat;` 不平铺
- `background-repeat:repeat-x;` x轴平铺
- `background-repeat:repeat-y;` y轴平铺
```css
div {
width: 300px;
height: 300px;
border: 2px solid black;
background-image: url(./img/背景图定位.png);
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
}
```
### 4. 背景图定位
- `background-position`可以改变背景图的默认的位置，默认位置在元素的左上角。
- 调整背景图在元素中的位置，有2个方向：x轴方向和y轴方向。
- `background-position:x轴 y轴` 两个方向
- `background-position-x` 单独定义x轴
- `background-position-y` 单独定义y轴
- `background-position`取值
- 可以使用长度单位，如：px、pt、em、%等
- 关键字：top、bottom、center、right、left
- 取值可以为正值和负值，正值向右移动负值向左移动
### 【练习】精灵图
> 从素材精灵图68*56中随意选取三个小精灵分别显示在三个div中作为背景
> 利用图片定位做，一个小精灵图片位置为68*56，通过数字进行查找，宽度为68的倍数，高度为56的倍数
```css
div{
width:68px;
height:56px;
border:1px solid black;
background-image:url(./img/精灵图68x56.png);
background-repeat:no-repeat;
}
.d1{background-position:-68px -112px;}
.d2{background-position:-612px 0;}
.d3{background-position:-204px -280px;}
```
### 【练习】
> 使用背景图定位将小图片定位在输入框里
```css
input {
width: 200px;
height: 26px;
background-image: url(./img/xz-login/yhm.png);
background-repeat: no-repeat;
background-position: right;
}
```
### 5. 背景图尺寸
- `background-size`属性来控制背景图片的大小.在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值`background-size:x轴拉伸 y轴拉伸;`
- 取值
- 取1个值，这个值指定图片的宽度，图片的高度隐式的为auto
- 尺寸可以为px、pt、em、%
- cover:铺满整个容器的宽高，而图片多出的部分则会被裁掉；
- contain:容器内至少有一张完整的图，no-repeat情况下容器会有留白区域。repeat情况下留白区域则平铺背景图
### 【练习】
> 要求 width: 100%; height: 500px;
> 背景充满宽度
```css
* {
margin: 0;
padding: 0;
}
.bg {
width: 100%;
height: 500px;
background-image: url(./img/xz-login/regist.png);
background-repeat: no-repeat;
background-size: cover;
}
```
### 6. 背景的简写方式
- `background:color image repeat position;`简写属性，四组值用空格分开,没有顺序
- background简写中不包括`background-size`，`size`需要单独写
- background最简写法可以是background：color 或者 background：url，其他不可以
- 简写的弊端：简写的方式会覆盖上边定义好的
## 十四、元素特有样式
### 1.表单轮廓
- `outline`属性
- 简写`outline:width style color;`
- input标签有默认的轮廓线，清空轮廓线`input {outline: none;} 或 {outline: 0;}`
### 2.列表样式
- `list-style` 属性是一个简写对属性集合
- `list-style`简写，`list-style:none`去掉标识(常用)
- 分开写样式包括:
- `list-style-type`列表标记
- `list-style: none;`没有标记
- `list-style: disc;`默认实心圆点
- `list-style: circle;`空心圆点
- `list-style: '♥';`自定义圆点
- `list-style-image`设置列表标识为小图片
- url()使用绝对路径或者相对路径
- 最好放小图，图标大小无法设置
- `list-style-position`设置标识在li的定位
- `list-style-position: outside;`默认在li外
- `list-style-position: inside;`默认在li里
### 3.表格样式
- table的样式
- `border-collapse: collapse;`去双边框缝隙
- `border-spacing: 10px;`单元格之间的距离，前提是“不能”去掉双边框缝隙
- td的样式
- margin外边距设置无效
- td的垂直居中`vertical-align: middle`其他值:top,bottom
- `rowspan="x"` 合并行，x写数字不带单位
- `colspan="x"` 合并列，x写数字不带单位
### 【练习】
```html
html>
```
## 十五、溢出!!!!!!!!!!!!!!!!!!!!!
### 1.溢出属性
- `overflow: hidden;`溢出隐藏
- `overflow: scroll;`x轴y轴都出现拖动条，子元素不超出也会有滚动条的那条轨道。
- `overflow: auto;`只有溢出的方向出现拖动条
- `overflow: visible;`溢出默认展示
- 单独设定x轴或者y轴的溢出
- overflow-x: auto;
- overflow-y: hidden;
- 如果overflow-x、overflow-y的值相同，则等同于overflow设置了这个值。
- overflow-x：hidden；那么overflow-y就会被重置为auto。
```css
/* 文字溢出 */
.div1 {
width: 200px;
height: 200px;
background-color: yellow;
/* 溢出隐藏 */
overflow: hidden;
/* x轴y轴都出现滚动条 */
overflow: scroll;
/* 溢出的轴出现滚动条 */
overflow: auto;
/* 默认值，溢出照样显示 */
/* overflow: visible; */
}
/* 元素溢出 */
.div2 {
width: 200px;
height: 200px;
background-color: red;
/* 溢出隐藏 */
overflow: hidden;
/* x轴y轴都出现拖动条 */
overflow: scroll;
/* 只有溢出的方向出现拖动条 */
overflow: auto;
/* 溢出默认展示 */
overflow: visible;
}
.erzi {
width: 300px;
height: 400px;
background-color: rgba(0,255,0,0.3);
}
```
### 2.overflow与BFC（清除浮动和清除外边距溢出时着重讲解）
- BFC块级格式化上下文，内部元素除了脱离文档流，之外无论如何设置都不会影响父级。（如同杯中水，如何改变也不会撒出）
- BFC元素不会让元素及元素内部的内容与外边有任何瓜葛。所以形成BFC的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了BFC的初衷，所以要清除浮动带来的影响。
- scroll、auto、hidden这三个可以触发元素的BFC特性。visible不会。
- 利用overflow形成BFC的应用：
- 清除浮动影响：父元素设置overflow：auto/scroll/hidden；可以清除子元素浮动带来的影响。（形成bfc结界，与外界隔绝，仅支持ie7+及现代浏览器）
- 避免margin穿透/重叠问题（形成bfc结界，与外界隔绝）
### 【练习】
> 一共四张图，横向排列
> 格子里只显示两张图利用横向拖拽条看到另外两张
```html
html>
```