第四天

css盒模型

---

块级元素

• 独占一行
• 宽度默认为父元素 100%；高度默认由元素撑开
• 可以设置宽度和高度

  代表标签：div p h ul li dl dt dd form header nav footer

行内元素

• 一行显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽度和高度

代表标签：a span b u i s strong ins em del



行内块元素

• 一行显示多个
• 可以设置宽度和高度

代表标签：input textarea button select

 

元素显示转换
display: block; 块级元素
display: inline-block; 行内块元素
display:inline; 行内元素

注意：

块级元素一般作为大容器;
可以嵌套文本、块级元素、行内元素、行内块元素
p 标签中不要嵌套 div p h 等块级元素
a 标签内部可以嵌套任意内容但是不能嵌套 a 标签

盒子模型
（1）盒子
标签可以看做是一个盒子
（2）盒子模型：

• 外边距区域 margin
• 边框区域 border

  线条可选样式

  • solid 实线
  • dashed 虚线
  • dotted 点线

  布局顺序：从外到内，从上到下

• 内边距区域 padding 规律：顺时针，值不够看对边
• 内容区域 content

（3）盒子内容的宽高

• width
• height

清楚样式* { margin: 0; padding: 0; }