学习HTML的第三天

一、背景图片

1、url 同意资源定位 （如果图片大小填充不满标签内容,会自动复制）
2、background-repeat 设置背景图片是否重复显示
3、background-attachment: fixed 背景图片固定，不随页面内容而固定 （背景图片显示的大小是图片原始尺寸）
4、cover 较短的一遍平铺 另一边等比缩放
5、contain 较长的一遍平铺 另一边等比缩放

二、边框和圆角

1、border: 用于设置边框 线宽 和颜色
2、border-width 边框线宽
3、solid 实线 dashed虚线 dotted点线 double 双实线
4、border-radius 边框圆角（边框圆角只是背景圆角 实际元素内容还是原来的）

三、浮动布局

1、flort 浮动 设置元素浮动布局（元素浮动之后，会脱离原有的文档流）
2、！！！使用浮动布局 必须在最后一个元素结束的地方清除浮动 否则会造成后续标签的布局 也会导致父元素不能根据内容显示高度
3、clear: both 在不添加新元素的情况下清除浮动
**4、**浮动元素都会有一个共同的父元素，可以给父元素添加一个后缀伪元素，在后缀中清除浮动；一般情况都会讲清除浮动的样式写成一个class（clear-fix)，那个元素需要清除子元素的浮动，就给那个标签添加这个class。

四、盒模型

1、标签元素从里到外分为四个部分，分别是内容盒子 (contant-box) 内间距(padding-box) 边框盒子（border-box) 外边距盒子（maigin)加粗样式**
2、默认情况下给标签设置的宽高是指内容盒子，(contant-box) 不包含内边距和边框
3、content-box 默认值，计算高度宽度是按照内容盒子进行计算，可设置为 border-box

五、外边距重叠

**1、**两个标签外边距产生重叠，优先保留最大值

六、伪类选择器和伪元素选择器

1、hover 当鼠标指针在元素上悬停是触发（伪元素）
2、visited a标签专用 表示访问过得标签 （伪元素）
3、focus 当元素成为焦点时触发，用户可以交互的元素才能处于焦点状态，一个页面同时只能有一个元素成为焦点状态
4、active 当元素被鼠标按下是触发
5、before；after（伪元素）
6、first-letter；first-letter（伪类）

七、元素内容溢出

1、当元素固定宽高，宽高就不在根据内容撑开，如果内容的宽高超出元素本身的宽高，超出元素的内容仍会显示。
2、overflow 设置元素溢出内容的显示方式 默认为显示
3、hiddent 元素溢出内容部分隐藏不显示
4、scroll 表示溢出的内容可以滚动浏览
5、 overfloow-x x轴溢出内容处理方式

八、长度单位

1、px 表示像素 一个最小的显示单位
2、em 表示当前元素的父元素的字体大小
3、rem 表示根元素（html）的字体大小
4、vw 1vw表示浏览器窗口宽度的%1
5、vh 1vh表示浏览器窗口高度的%1
6、cm mm pt(磅)