盒子模型
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
div{
100px;
height: 100px;
padding: 10px;
border: 1px solid red;
margin: 10px;
}
属性:
- width:指内容宽度
- heigth:指内容高度
- padding:边框到内容之间的距离。可以分别设置4个方向的填充,有背景颜色,颜色和内容区域颜色一样,即background-color设定样式
- 小属性设置:
- 综合属性设置:顺时针方向,上、右、下、左
- border:可通过三要素设置
- 粗细:默认为0
- 线性:只写solid线性,默认有3px的黑色宽度,dotted double dashed
- 颜色:默认是黑色
- margin:指距离,上下设置0,左右设置auto即可对齐居中显示
margin:0 auto;
盒模型计算
清除某些标签默认padding属性
ul有默认的margin、padding属性
body默认有margin属性
使用并集选择器清除
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
使用border属性制作三角形
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小三角</title> <style type="text/css"> div{ width: 0; height: 0; border-top:20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid green; } </style> </head> <body> <div></div> </body> </html>
标准文档流现象
- 空白折叠现象,空白字符或空白行会折叠成一行或一个空格
- 高矮不齐,底边对其
- 一行显示不完自动换行