CSS视频教程|CSS盒子模型-大灰牛博客

第5章 CSS盒子模型

CSS元素分类
CSS块级元素
CSS内联元素
CSS内联块状元素
CSS盒子模型概述
CSS盒子内边距
CSS盒子边框
CSS盒子外边距
CSS盒子宽度和高度

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>

CSS块级元素(disaply:block)

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

CSS内联元素(disaply:inline)

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

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

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

CSS盒子模型概述

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

CSS盒子内边距

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

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

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 ;
}

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;}

CSS盒子宽度和高度

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

转载请注明：大灰牛博客 » CSS视频教程|CSS盒子模型