前言：这里是以前在职的时候写的一些笔记的记录，由于我的个人文档除了在组内分享会以及个人电脑里出现过以外还没有怎么整理过。近来自己也在找新工作，顺便整理一下以前的笔记。
浮动属性：float、clear
特征
浮动元素只能左右浮动而不能上下
浮动元素不会互相重叠
display属性将完全失效
可以设置宽高
不会独占一行
语法
float:none/left/right;
盒子模型：border、margin、padding
圆角边框：border-radius
阴影：text-shadow、box-shadow
清除浮动：
属性：clear 值：left right both
常用方式
1.结尾处空div标签，clear:both
2.浮动元素的父级div定义 overflow:hidden
3.浮动元素的父元素定宽高
定位
相对定位
position: relative
top:xx
bottom:xx
left:xx
right:xx
相对于自身原本位置进行定位
元素移动后原有物理位置依然被占用
绝对定位
position: absolute
元素不占有原有物理位置
参考位置：浏览器(0,0) or 外层元素(父节点、爷节点......)有定位(不是static)
固定定位
position: fixed
top
bottom
right
left
可以保持元素在浏览器窗体中的位置
z-index
可以设置 **定位元素 **的显示顺序(不是定位元素的话不好使)
z-index: 1
越大越在上层，z-index相同时参照元素顺序，后边的在上方
display
用于确认元素的类型，每一个元素都有其默认属性，如div(display:block)、span(display:inline)
// 常见属性
none: 隐藏对象，元素不再占据原有位置(另一种方式visibility: hidden,仍占据行内元素，只有当值为visible时可以显示；opacity,设置透明度0~1，仍占据物理空间)
inline: 指定对象为内联元素，无宽高属性，不独占一行
block: 指定对象为块级元素，有宽高属性，独占一行
inline-block: 指定对象为内联块元素，有宽高属性，不独占一行
table-cell: 指定对象作为表格单元格，具有该属性的同级元素如同单元格一样共占一行
flex: 弹性盒
盒子模型
W3C建议将网页上的元素看成是 一个盒子。
盒模型定义了四个区域：content内容(通常设置宽高的对象) padding内边距 border边框 margin外边距
定位居中
margin: 1px auto; //重点是auto
Note: 外间距合并,只有上下合并(以大的值为准)，没有左右合并。父子元素、兄弟元素之间存在合并，浮动元素的外边距也不存在合并
// 解决父子元素之间的外间距合并,给父元素加边框
boder: 1px solid red;
外边距
围绕在元素边框周围的空白区域
- 在元素外创建额外空白区域
- 外边距是透明的
语法
margin:valuevalue可取值为像素, %, auto, 负值
边框
边框的style一定要设置，才会出现边框
boder-style: dotted //点状 boder-style: solid //实线 boder-style: double //双线 boder-style: dashed //虚线 boder-style: none //无边框一般书写顺序：宽度 样式 颜色
内边距
- 内容区域和边框之间的空间
- 会扩大元素边框所占用的区域
- 语法：padding:value
标准盒：padding、border的宽高要记录在盒子模型的宽高之内(元素实际大小=宽高+border+padding),margin则不在
box-sizing: content-box
怪异盒：元素的实际大小=宽高
box-sizing: border-box
