CSS视频教程|CSS盒子模型

弹指间学会CSS admin 457浏览

第5章 CSS盒子模型

  1. CSS元素分类
  2. CSS块级元素
  3. CSS内联元素
  4. CSS内联块状元素
  5. CSS盒子模型概述
  6. CSS盒子内边距
  7. CSS盒子边框
  8. CSS盒子外边距
  9. 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盒子模型