这是我参与「第四届青训营 」笔记创作活动的的第4天
一、盒子模型
所有HTML元素可以看作一个个矩形盒子，对网页布局只需摆放盒子。
一个盒子我们会分成几个部分：
1. 内容区（content）
2. 内边距（padding）
3. 边框（border）
4. 外边距（margin）
1、内容区
只强调一个，就是width和height只设置内容区的大小
2、内边距
padding-top padding-right padding-bottom padding-left
设置四个方向的内边距
简写样式：
padding:10px;20px;30px;10px; (分别对应上，右，下，左。顺时针顺序)
3、外边距
margin-top margin-right padding-bottom padding-left
设置四个方向的外边距
（1） 简写样式同上
（2） margin:0 auto; (对应上下、左右)
auto(自动)，左右设置默认最大，上下设置默认为0
这是最常用的，用于居中
（3） 可以设置负值，会向反方向移动元素
4、边框
边框设置必须指定三个样式
border-width边框的宽度
border-color边框的颜色
border-style边框的样式（如dashed 虚线， solid实线）
注意：（1）border-width可分别按顺时针给边框加相应宽度
例：border-width:10px 20px 15px 25px;
(2)如果只指定一个值，则默认各边均为该值
二、内联元素的盒子
（1）内联元素不能设置width和height（可以转化成块元素在设置）
（2）内联元素可以设置水平方向的内边距，也可以设置垂直方向的内边距，且不会影响页面的布局
（3）可以设置边框
（4）支持水平方向的外边距，不支持垂直方向的外边距
三、display属性
作用：修改元素类型
可选值：
inline：可以将一个元素作为内联元素显示
block：可以将一个元素设置为块元素显示
inline-block：将一个元素设置为行内块元素，既可以设置宽高，又不会独占一行
none：隐藏元素且不占位置
四、浏览器的默认样式
浏览器为了显示一个好的效果，通常为很多元素设置一些默认的margin和padding，而我们一般不需要。
*{
margin:0 auto;
padding:0;
}
消除浏览器的默认样式，且让元素居中
五、visibility属性##
作用：设置元素是否可见
可选值：
visible 默认显示
hidden 隐藏不显示
与display的区别是位置仍然占据，但隐藏
六、overflow属性
作用：设置父元素如何处理溢出的内容
可选值：
visible 默认值，不对溢出做处理
hidden 溢出部分会被修剪
scroll 添加水平、垂直方向的滚动条
auto 自动
七、高度坍塌
有的时候，我们不清楚具体有多少内容，占多大地方，所以通常不设宽度，由子元素去撑开。
在文档流中，父元素的高度默认是被子元素撑开的，但当为子元素设置浮动以后，子元素会脱离文档流，无法撑起父元素的高度，导致父元素高度坍塌。导致父元素下所有元素上移，导致页面混乱。
如何解决高度坍塌问题？
根据w3c标准，在页面元素中都有一个隐含的属性Block Formatting Context,简称BFC。默认是关闭的，当开启后，元素将具有以下特性：
1、 父元素的垂直外边距不会和子元素重叠
2、 开启后的元素不会被浮动元素所覆盖
3、 开启后的元素可以包含浮动的元素
主要是第三点，用来解决高度坍塌问题
如何开启BFC？
法一：设置元素浮动
法二：设置元素绝对定位
法三：设置display（inline-block）
法四：将元素的overflow设置为非visible的值（推荐使用）
八、clear属性
作用：用来消除其它元素对当前元素的影响
可选值：
left：消除左侧元素对当前元素的影响
right：消除右侧元素对当前元素的影响
both：消除两侧元素对当前元素的影响
九、行高（line-height）
可选值：1、px
2、数字（倍数）
3、百分数
文字默认在行高中居中
十、居中
1、单行文本垂直居中
方法：将行高设置和父元素高度一致
2.文本水平居中
方法：text-align:center;
其它可选值：
left：左侧对齐
right：右侧对齐
justify：两端对齐
十一、定位(position属性)
可选值：static 默认值，未开启定位
relative 开启元素相对定位
absolute 开启元素绝对定位
fixed 开启元素固定定位（也是绝对定位的一种）
（1） 相对定位
开启后不设置偏移量，元素不会发生任何变化
元素偏移量可通过left、right、top、bottom四个属性来设置
例如：
.box1{
position:relative;
left:200px;
top:100px;
}
注意事项：
1、相对定位的元素不会脱离文档流，所以下面的元素不会上去占位
2、相对定位会提升元素的一个层级，可以盖在别的元素上
3、通常只用两个偏移量（水平、垂直方向）为一个元素定位
4、相对定位不会改变元素的性质（块元素还是块元素，不会变）
（2）绝对定位
position:absolute;
注意事项：
1、 开启后，会使元素脱离文档流，位置空出来
2、 绝对定位是相对于离他最近的祖先元素（或父元素）定位的，如果所有的祖先元素均未定位，则相对于页面左上角定位（一般开启了子元素的绝对定位，要同时开启父元素的相对定位）
3、 绝对定位也会提升元素的一个层级
4、 绝对定位会改变元素的性质
（原因是元素脱离了文档流，导致内联元素会变成块元素）
（3）固定定位
position：fixed；
1、 固定定位也是一种绝对定位，大部分性质与绝对定位基本相同，不同点是固定定位是相对于页面左上角定位的
2、 会固定在某个位置上，不随滚动条去动
十二、元素的层级（z-index属性）
（1）元素层级一样时，下面的会盖住上面的
例：两个元素都开启了绝对定位，层级一样，这样下面那个元素会盖住上边那个元素
（2）通过z-index属性来为元素设置层级，给z-index一个指定的正整数的值，该值会作为当前元素的层级。层级越高，越优先显示。
（注意：只能应用于开启定位的元素）
（3）父元素的层级再高，也盖不住子元素
十三、设置元素的透明背景（opacity属性）
用opacity属性来设置元素背景的透明，值0-1
0完全透明，1完全不透明
文本和背景颜色都会受到不透明度的影响
十四、背景
（1）使用background-image来设置背景图片
例：background-image:url(img/2.jpg);
1、 如果背景图片大于元素，默认显示图片的左上角
2、 如果背景图片小于元素，则默认将图片平铺，重复铺满元素
3、 可以同时为一个元素指定颜色和背景图片，则会将背景颜色作为背景图片的底色
（2）background-repeat 用于设置背景图片的重复方式
可选值:
1、 repeat 默认值，双方向平铺
2、 no-repeat 不重复
3、 repeat-x 沿水平方向重复
4、 repeat-y 沿垂直方向重复
（3）背景图片默认贴着元素左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
top、right、left、bottom、center
（一般用两个值来指定一个背景图片的位置）
例：background-position:100px 10px;(水平方向、垂直方向)
（4） background-attachment
设置背景图片是否随页面滚动
可选值：
scroll 默认值，背景图片随窗口滚动，会消失
fixed 固定，不随页面滚动，一般只设置给body
十五、下拉列表
select 元素可创建单选或多选菜单。
<select> 元素中的 <option>标签用于定义列表中的可用选项。
例：
<select name=setting onchange="window.location=this.value">
<option value="saab">菜单</option>
<option value="https://www.baidu.com">菜单1</option>
<option value="opel">菜单2</option>
<option value="audi">菜单3</option>
</select>
