边框
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,作用到了父元素身上
- 原因：同时满足四条
- 父元素没有上边框
- 父元素没有上内间距
- 父元素没有浮动
- 子元素没有浮动
清除默认样式
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