div布局

<div></div>无意义块状元素标签
<span></span>无意义行内元素标签
<p></p>段落标签
<ul></ul>无序列表
<li></li>列表项
<a href=""></a>超链接标签
<img src="" alt="">图片标签
<i></i>斜体标签
<b></b>粗体标签

id选择器 #id
类选择器 .class
关系选择器 div p ,div>p, div,p
伪类型选择器 hover
结构性伪类选择器：E:after E:before E:nth-child() E:first-child E:last-child

页面布局常用的属性
字体属性 font-size
文本属性 text-decoration text-align
首行缩进 text-indent
行高 line-height
宽高属性 width height min-height max-height
背景属性 background
列表属性 list-style
字体颜色 color

页面布局应用属性
定位属性 position
布局属性 display
浮动属性 float clear
盒子模型 border margin padding
圆角边框 border-radius
阴影 text-shadow box-shadow

浮动定位
将元素排除在普通流之外
元素将不在页面中占据空间
将浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框之内
浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或者另一个浮动框的边框为止
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动sadplay属性将完全失效均可以设置宽高，并且不会独占一行
语法: float:none/left

css清楚浮动:
描述：清楚浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清楚浮动也变得非常麻烦
属性:clear
值: left,right,both
清除浮动的常用方式：
1.结尾处加div空标签 clear:both
2.浮动元素的父级div定义 overflow:hiddin
3.浮动元素的父级定宽高

position定位
position属性制定一个元素(静态，相对的，绝对的或者固定的)的定位方法的类型
absolute 生成绝对定位的元素，相对与static定位的以外的第一个父元素进行定位
元素的位置是通过'left''top'等确定
fixed 生成绝对定位的元素，相对于浏览器窗口进行对位
元素的位置通过'left'等属性进行规定
relative 生成相对定位的元素，相对于其正常位置进行定位
因此，'left:20'会向元素的LEFT位置添加20像素
static 默认值，没有定位，元素出现在现在正常的流中

position:relative 这是一个相对定位
相对定位是以当前为参照物为指定的距离
被定位的元素会占有原有的物理位置
绝对定位的元素不会占有原有的物理位置
元素外层一旦有定位的话，它的参考点就会变化
如果元素的外层元素没有设置任何position的值，那么这个元素就会寻找距离自己最近的其他设定过position的元素为参考物

z-index堆叠顺序
一旦修改了元素的定位方式，则元素可能发生堆叠
可以使用z-index属性来控制元素框出现的重叠顺序
z-index仅能在定位的元素上生效
z-index属性：
值为数值，数值越大表示堆叠顺序越高，离用户越近
可以设置为负值，表示离用户远
z-index仅能在定位元素上奏效

display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型
每一个元素都有默认的display属性值，例如div元素，他的默认display属性值为'block'
称为元素块，而span元素的默认display属性值为'inline'，成为行内元素
块元素和行内元素是可以相互转换的
display常见属性值 用visibility : hiddin 可以保留物理位置 opacity:0（设置透明度）也可以
none:隐藏对象
inline：指定对象为内联元素
block:指定元素为块元素
inline-block：指定对象为内联块元素
table-cell:指定对象作为表格单元块
flex:弹性盒