css盒子模型。重点就是理解盒子模型图。

一、知识点

(1)元素分类-块级元素

什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block可以将元素显示为块级元素。

如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

块级元素特点:

  1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行(真霸道,一个块级元素独占一行)。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

(2)元素分类-内联元素

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。

如下代码就是将块状元素div转换为内联元素,从而使div元素具有内联元素特点。

内联元素特点:

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度及顶部和底部边距不可设置;
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。

(3)元素分类-内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状标签。

inline-block元素特点:

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

可以看到,我为a元素设置了宽和高,但都没有起到作用。原因是a在默认的时候是内联元素,内联元素是不可以设置宽和高的。

(4)盒子模型的px设置?

盒子模型:<div>等块级标签封装的一个区域,

  1. 文本/标签距离盒子内边框的距离:padding;
  2. 盒子之间的外边距:margin;
  3. 盒子的边框粗度:border;
  4. 以上3个属性均有四个方向:padding-top,padding-right,padding-bottom,padding-left;

其实我们可以把div块级元素想象成一个月饼盒,里面的月饼是内容,

  1. 内容可以是文字,图片,也可以是另一个标签元素。
  2. 盒子与月饼之间的距离叫内填充,padding。
  3. 一个月饼盒与另外一个月饼盒的距离叫做外边距,magin。
  4. 盒子的边框,border。
  5. 以上属性都有4个方向。

5.盒子模型-边框(一)

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:

上面是 border 代码的缩写形式,可以分开写:

一些属性:

  1. border-style(边框样式)常见样式有:dashed(虚线)| dotted(点线)| solid(实线)。
  2. border-color(边框颜色)中的颜色可设置为十六进制颜色,如:border-color:#888;
  3. border-width(边框宽度)中的宽度也可以设置为:thin | medium | thick(但不是很常用),最常还是用象素(px)。
  4. dotted:定义点状边框。在大多数浏览器中呈现为实线。
  5. boder-style属性。

border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

(6)盒模型–边框(二)

现在有一个问题,如果想为p标签单独设置下边框,而其它三边都不设置边框样式,该怎么办呢?

css样式中允许只为一个方向的边框设置样式:

同样可以使用下面代码实现其它三边(上、右、左)边框的设置:

(7)盒模型–宽度和高度(重点)

盒模型宽度和高度和我们平常所说的“物体的宽度和高度”是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)= 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界。

如图所示:

元素的高度也是同理。举个例子:

元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型,如下图:

(8)盒模型–填充

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:

顺序一定不要搞混。可以分开写上面代码:

如果上、右、下、左的填充都为10px;可以这么写

如果上下填充一样为10px,左右一样为20px,可以这么写:

(9)盒模型–边界

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:

也可以分开写:

如果上右下左的边界都为10px;可以这么写:

如果上下边界一样为10px,左右一样为20px,可以这么写:

总结一下:padding和margin的区别,padding在边框里,margin在边框外。

二、总结

本节内容就这么多了,主要是要理解css里盒式模型的思想,心中要有一个月饼盒子的概念。

发表评论

电子邮件地址不会被公开。 必填项已用*标注