登录  /  注册
首页 > web前端 > css教程 > 正文

css的盒模型有几种

青灯夜游
发布: 2021-10-12 16:08:39
原创
15644人浏览过

css的盒模型有2种,分别为:1、w3c标准的盒子模型(标准盒模型),width和height指的是内容区域的宽度和高度;2、ie标准的盒子模型(怪异盒模型),width和height指的是内容区域、边框、内边距总的宽度和高度。

css的盒模型有几种

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。

盒子中的区域

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

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

盒子模型的示意图:

代码演示:

上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

注意:宽度和真实占有宽度,不是一个概念!来看下面这例子。

标准盒模型和IE盒模型

盒子模型分为两种:

  • 第一种是W3c标准的盒子模型(标准盒模型)

  • 第二种IE标准的盒子模型(怪异盒模型)

我们目前所学习的知识中,以标准盒子模型为准。

标准盒子模型:

IE盒子模型:

上图显示:

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式:

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

CSS盒模型和IE盒模型的区别:

  • 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

  • IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。

注:Android中也有margin和padding的概念,意思是差不多的,如果你会一点Android,应该比较好理解吧。区别在于,Android中没有border这个东西,而且在Android中,margin并不是控件的一部分,我觉得这样做更合理一些,呵呵。

标签也有margin

标签有必要强调一下。很多人以为标签占据的是整个页面的全部区域,其实是错误的,正确的理解是这样的:整个网页最大的盒子是<document></document>,即浏览器。而<document></document>的儿子。浏览器给默认的margin大小是8个像素,此时占据了整个页面的一大部分区域,而不是全部区域。来看一段代码。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

<style type="text/css">

div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}

</style>

 </head>

 <body>

<div>有生之年</div>
<div>狭路相逢</div>

 </body>

</html>
登录后复制

上面的代码中,我们对div标签设置了边距等信息。打开google浏览器,按住F12,显示效果如下:

认识width、height

一定要知道,在前端开发工程师眼中,世界中的一切都是不同的。

比如说,丈量稿纸,前端开发工程师只会丈量内容宽度:

下面这两个盒子,真实占有宽高,都是302*302:

盒子1:

	.box1{
		width: 100px;
		height: 100px;
		padding: 100px;
		border: 1px solid red;
	}
登录后复制

盒子2:

	.box2{
		width: 250px;
		height: 250px;
		padding: 25px;
		border: 1px solid red;
	}
登录后复制

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

上面这两个盒子的盒模型图如下:

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

认识padding

padding区域也有颜色

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

效果如下:

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;
登录后复制

上面的padding对应盒子模型为:

下面的写法:

padding-left: 30px;
padding: 20px;
登录后复制

第一行的小属性无效,因为被第二行的大属性层叠掉了。

(学习视频分享:css视频教程

以上就是css的盒模型有几种的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号