码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习之盒子模型

时间:2018-02-03 00:34:34      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:width   20px   颜色   ash   col   gpo   盒子模型   显示   顺时针   

1. 前言

盒子模型,英文即box model。无论是div、span、还是a都是盒子。

但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。

2. 盒子中的区域

一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。
  • margin:外边距。

盒子模型的示意图:

 技术分享图片

标准盒子模型:

技术分享图片

上图显示:

  • 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式: 内容、内边距、边框、外边距
  • 在 CSS的标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

真实占有宽度 = 左border + 左padding + width + 右padding + 右border

如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的,这会把别的盒子挤下去。

3. 认识padding

3.1 padding区域也有颜色

  padding就是内边距。padding的区域有背景颜色,css2.1前提下,并且背景颜色一定和内容区域的相同。也就是说,background-color将填充所有boder以内的区域。

3.2 padding有四个方向

  padding是4个方向的,所以我们能够分别描述4个方向的padding。方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。

小属性的写法:

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

综合属性的写法:(上、右、下、左)(顺时针方向,用空格隔开。margin的道理也是一样的)

padding:30px 20px 40px 100px;

如果写了四个值,则顺序为:上、右、下、左。

如果只写了三个值,则顺序为:上、右、下。??和右一样。

如果只写了两个值,比如说:

padding: 30px 40px;

则顺序等价于:30px 40px 30px 40px;

要懂得,用小属性层叠大属性。比如:

padding: 20px;
padding-left: 30px;

4. 认识border

border就是边框。边框有三个要素:像素(粗细)、线型、颜色。颜色如果不写,默认是黑色。另外两个属性不写,要命了,显示不出来边框。

4.1 border-style

border的所有的线型如下:(我们可以通过查看CSS参考手册得到)

技术分享图片

 

4.2 border拆分

border是一个大综合属性。比如说:

border:1px solid red;

就是把4个边框,都设置为1px宽度、线型实线、red颜色。

border属性是能够被拆开的,有两大种拆开的方式:

  • (1)按三要素拆开:border-width、border-style、border-color。(一个border属性是由三个小属性综合而成的)

  • (2)按方向拆开:border-top、border-right、border-bottom、border-left。

现在我们明白了:一个border属性,是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值,那么就是上右下左的顺序。举例如下:

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

(1)按三要素拆:

border-width:10px;    //边框宽度
border-style:solid;   //线型
border-color:red;     //颜色。

等价于:

border:10px solid red;

(2)按方向来拆:

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

等价于:

border:10px solid red;

 

转自:https://www.cnblogs.com/smyhvae/p/7256371.html

CSS学习之盒子模型

标签:width   20px   颜色   ash   col   gpo   盒子模型   显示   顺时针   

原文地址:https://www.cnblogs.com/sunfie/p/8407445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!