#块元素和内联元素
##两者简介及其区别
div就是一个块元素，所谓块元素就是会独占一行的元素，无论他的内容有多少，他都会独占一整航
常见的块元素：p h1 h2 h3
div这个标签没有任何语义，就是一个纯粹的块元素，并且它不会为它里面的元素设置任何默认的样式
div主要用来对页面进行布局
span就是一个内联元素，也称行内元素，所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：a img iframe span
span没有任何的语义，专门用来选中文字，为文字设置其样式
注意：一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含块元素
##盒子模型----关于块元素和内联元素的盒子模型
盒子模型中分为 ：外边距margin + 边框 border + 内边距 padding+ 内容content
我们一般设置的样式都是默认给内容设置的样式，所以说设置具体样式时，记得指定元素
margin和padding的设置
可以设置1-4个数字：分别按顺时针顺序对应
例如：
padding: 25px 50px 75px 100px 对应即为 上 右 下 左的内边距
**对于padding和margin，浏览器都会对其有默认的样式，如果必要时，要对默认的样式进行清理
语法：
XX{
margin：0；
padding：0；
}**
border的设置：
boder-width、border-style、border-color
还有border：10px solid black 可以直接为边框设置宽度，样式，颜色
内联元素较为特殊，不能设置width和height
但内联元素可以设置水平方向和垂直方向的内边距，而且垂直方向的内边距不会影响页面整体的布局，也就是说，不会和其他的div产生冲突
内联元素还支持水平方向的外边距的设置
##display和visibility样式——两者都是写在CSS样式表里的
display 可以用来修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block：可以将一个元素作为块元素显示
inline-block：将一个元素转换为行内块元素
可以使元素既有块元素的特点，又有内联元素的特点
所以就既可以设置宽高，又不会独占一行的空间
none：不会显示元素，而且元素不会再页面中占用位置
如 display：inline；
visibility 可以用来设置元素的隐藏和显示状态
可选值：
visible 默认值，默认元素在页面中显示
hidden 元素会隐藏不显示，但它的位置依然会保持
如 visibility：hidden
##overflow样式
子元素默认存在于父元素的内容区，所以子元素的大小最大等于父元素的大小 但是如果子元素的大小超过了父元素的内容区
那么超过大小的部分，就会在父元素以外的位置显示
超出父元素的内容部分，我们就称之为溢出的内容
父元素默认是将溢出的内容，在父元素外显示
所以需要用到overflow样式
通过overflow 可以设置父元素如何处理溢出的内容
可选值：
visible，默认值，不会对溢出内容做处理
hidden，溢出的内容，会被修剪，不会显示
scroll，会为父元素添加滚动条，通过拖动滚动条俩查看完整的内容
该属性不论内容是否溢出，都会为水平和垂直双向添加滚动条
aoto，会根据需求自动添加滚动条，需要水平就加水平，需要垂直就加垂直，
##float浮动样式
当为一个元素设置了浮动样式以后，元素会立刻脱离文档流，
脱离文档流以后，它下边的元素就会立刻向上浮动，
语法 float：right/left
1、元素浮动以后，会尽量向页面的左上或者右上漂浮，直到遇到父元素的边框
2、所以，如果浮动的元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素。
3、浮动元素也不会超过他上面的兄弟元素，最多一边齐
4、浮动元素内的文字，并不会被块元素覆盖而是会环绕在其周围
5、当块元素脱离文档流后，高度和宽度都由子元素来决定
若没有脱离文档流，高度宽度就由自身的定义决定
6、当一个内联元素脱离文档流后，会变成块元素，就可以设置高度和宽度
（因为本身内联元素并不可以设置高度和宽度）
##关于浮动的高度塌陷问题
在文档流中，父元素的高度是由子元素的高度撑开的，而当子元素设置浮动脱离文档流后，父元素的高度就会塌陷
所以在开发中，为了避免高度塌陷问题
**解决父元素高度塌陷
.clearfix:after{
content:" ";
display: block;
clear:both;
}**
解决父子元素的外边距重叠问题
.box:before{ before指的是元素的开头
content:" ";
display:table; 将一个元素设置为表格的形式
}
##元素的定位position
position属性，用来确定元素位置，定位，将指定的元素，摆放在任意位置
可选值：
static：默认值，元素没有开启定位
relative：开启了元素的相对定位
absolute：开启了元素的绝对定位
fixed：开启元素的固定定位，也是绝对定位的一种
###相对定位relative
1、当开启元素相对定位后，但不设置偏移量，那么元素不会发生任何变化
开启定位后，可以通过left right top bottom 四个属性来设置元素的偏移量
四者均为元素相对于其定位位置的偏移量
2、相对定位是相对于元素在文档流中原来的位置进行定位
3、开启相对定位的元素，不会脱离文档流，原来的位置不会被其他元素挤掉
4、相对定位会使元素提升一个层级（相当于高了一层）
5、相对定位并不会改变元素的性质，块元素仍然是块元素
###绝对定位absolute
1、当元素开启了绝对定位后，会使元素脱离文档流
2、开启了绝对定位后，如果不设置偏移量，元素位置不会发生改变
3、绝对定位的定位是相对于离他最近的开启了相对定位position不是static的祖先元素进行定位的（一般情况下，开启了子元素的绝对定位后，都会开启父元素的相对定位）
4、绝对定位也会使元素提升一个层级
5、绝对定位会改变元素的性质，内联元素会变成块元素
###固定定位fixed
1、固定定位也是一种绝对定位，具有绝对定位的大多数特点
2、但不同的是，固定定位永远是相对于浏览器窗口进行定位的
3、固定定位会固定在浏览器的某个位置，不会随滚动条滚动
p{
position:fixed; //固定在当前位置不动
top:XXpx;
right:XXpx;
}
##元素的层级问题
1、通过z-index属性，可以用来设置元素的层级
2、指定一个正整数作为值，该值则为当前元素的层级
**3、z-index对于没有开启定位的元素不起作用**
4、父元素设置的层级再高，也不会盖住子元素
##设置元素的透明背景
opacity可以用来设置背景的透明
它需要一个0-1之间的值，0表示完全透明，1表示完全不透明
