CSS视频教程,第5章 CSS盒子模型

课程目录
1 CSS元素分类
2 CSS块级元素
3 CSS内联元素
4 CSS内联块状元素
5 CSS盒子模型概述
6 CSS盒子内边距
7 CSS盒子边框
8 CSS盒子外边距
9 CSS盒子宽度和高度

1 CSS元素分类

html中的标签大体被分为以下三种不同的类型：块状元素、内联元素（行内元素）、内联块状元素。
①常用的块状元素有：

<div>、<p>、<h1>至<h6>、<ol> <li>、<ul>、<table>、<address>、<blockquote>、<form>
②常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<code>
③常用的内联块状元素有:
<img>、<input>

2 CSS块级元素(disaply:block)

块级元素特点:1)每个元素都从新的一行开始，其后元素另起一行2）元素的宽度、高度、行高以及顶和底边距都可以设置3）元素的宽度再不设置情况下，和父级元素的宽度一致

3 CSS内联元素(disaply:inline)

内联元素特点:1)和其他元素都在同一行上2）元素的宽度、高度、行高以及顶部和底边距不可设置3）元素的宽度就是它包含的文字或者图片的宽度，不可改变

4 CSS内联块状元素（disaply:inline-block）

特点：1）同时具备内联元素和块状元素特点,常见元素为<img>、<input>

5 CSS盒子模型概述

盒子的组成包含margin（外边距）、边框（border）、内边距（padding）、内容（content），正文框的内部是盒子的实际内容

6 CSS盒子内边距

内边距是正文content外边框border内，控制改区域的属性是padding，定义元素边框与内容之间的空白区域，padding属性支持长度数值或者百分比，但不允许使用负值，按照上右下左的顺时针顺序设置各边的内边距。

div{
    padding-top: ;/*上边内边距*/
    padding-right: ;/*右边内边距*/
    padding-bottom: ;/*下面内边距*/
    padding-left: ;/*左边内边距*/
}

7 CSS盒子边框

border（边框宽度）中的宽度也可以设置为： thin|medium|thick（但不是很常用），最常还是用像素（px）。

.div{
    border-top-width: ;
    border-right-width: ;
    border-bottom-width: ;
    border-left-width: ;
    border-width: 15px 5px 15px 5px ;
}

8 CSS盒子外边距

css定义了一些规则，允许为外边距指定少于4个的值，规则如下：
如果缺少左边距的值，则使用右边距的值；如果缺少上边距的值，则使用下边距的值，对称

h1{margin: 0.25em 1em 0.5em;}
/*等价于*/
h1{margin: 0.25em 1em 0.5em 1em;}
h2{margin: 0.5em 1em;}
/*等价于*/
h2{margin: 0.5em 1em 0.5em 1em;}
h3{margin: 1em;}
/*等价于*/
h3{margin: 1em 1em 1em 1em;}

9 CSS盒子宽度和高度

css定义的宽width和高height指的是填充以里的内容，因此一个元素的实际宽度（盒子的宽度）=左边界（margin-left）+左边距(border-left)+左填充(padding-left)+内容宽度(width)+右填充(padding-right)+右边框(border-right)+右边距(margin-right)