边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

边框

solid实线 dotted虚线  dashed点线

盒子在页面中实际的宽高都是5部分组成

宽=borderleft+paddingleft+width+paddingright+borderright

• 在块元素中宽度auto 适配到父元素，占满
• 高度auto 由内容撑开

在文本或者行元素居中

• 在他的块父元素上加text-align：center;
• padding不能加负值
• 行元素没有上下外间距

盒子模型

• 内容content padding border margin

margin外间距

• 块元素上下会合并
• 行元素左右不会合并
• 行元素不能加上下margin
• margin可以设负值，padding不能设负值
• margin：0 auto；
• margin-top的bug

display显示

• 将一个任意元素,转换为块元素
• display: block;
• 将一个任意块元素,转换为行元素
• display: inline;
• 讲一个任意元素，从页面上删除
• display：none;
• 将任意一个元素,隐藏
• display:inline-block;

overflow溢出

• hidden;隐藏
• scroll;滚动条
• auto;超出就有滚动条,不超出就没有
• overflow-x:hidden;横向隐藏
• overflow-y:hidden;纵向隐藏

textarea文本域

• 设置宽高为最小宽高！
• resize:both;全都能动
• resize:none;固定大小，不能变了
• resize:vertical;只能垂直的拖拽
• resize:horizontal;只能水平拖拽

float浮动

• 文档流中的元素看不到浮动的元素
• 文字，图片，控件除外（进不到浮动元素下边）

浮动停止的条件

• 紧贴浮动的兄弟元素或紧贴父元素边界时
• body的直接子元素不能用浮动
• 所有能写宽高的元素都要写宽高

解决办法

• 父元素写死高度
• 父元素加overflow：hidden；
• 清除浮动所带来的影响 clear：both; /left/right

margin-top的bug

• 现象：子元素加上margin-top,作用到了父元素身上
• 原因：同时满足四条

1. 父元素没有上边框
2. 父元素没有上内间距
3. 父元素没有浮动
4. 子元素没有浮动

清除默认样式

body,p,pre,ul,ol,li,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6

{margin:0;padding:0;}

ul,li,ol,dl,dt,dd{list-style:none;}

a{text-decoration:none}

img{border:0;}

ev.stoppropagationt