Web开发中怎么设置盒模式的属性-创新互联
本篇内容主要讲解“Web开发中怎么设置盒模式的属性”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Web开发中怎么设置盒模式的属性”吧!
在body中的每一个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。
盒子模型
首先介绍下HTML中标签的分类
一、HTML的标签分为两种：块标签和内敛标签
1、块标签：占据了容器的整个宽度，容器指的是body标签，每个块标签所在的盒都尽可能的占据页面的整个宽度，就是要占用浏览器一整行的位置。
块标签：包含p、div、ul、ol、li、h2~h7等；块标签独自占据一行、自带换行的效果；除了div以外，一般块级标签都会有内外边距，宽度和高度。
2、内联标签：不会占据容器的一整行，它会和它周围的内容在一起，在一行内自然的从左到右依次显示，内容的多少决定了内联标签的宽度。
内联标签：包含span，a，img，input，label等
浏览器怎么会知道盒子与盒子之间的距离应该是多少？就会用到盒模式
二、盒模式
盒模式是描述标签的边框和间距的一种方式
1、盒模式由4部分组成
1）内容区域contentarea
内容区域中包含的是盒子中真正的内容（文本，图片等）
2）补白或内边距padding
padding包围在内容区域的边缘，分为上，右，下，左四个区域
3）边框border
border包围在padding的边缘，也分为上，右，下，左四个区域
4）边距margin
margin包围在border的上、右、下、左四个边缘
盒模式
2、如何设置盒模式的属性？
1）每次设置padding属性的一个值
h2{
padding-top:6px;
padding-right:3px;
padding-bottom:0;
padding-left:0;
}
padding属性
或者按照顺时针方向一次性设置：上，右，下，左
h2{
padding:6px3px00;
}
padding属性
2）设置三个关于border的属性
h2{
border-width:6px;
border-style:solid;
border-color:#ffff00;
}
border属性
或者使用简写的形式
h2{
border:6pxsolid#ffff00;
}
border属性
也可以只设置其中一侧的边框
h2{
border-bottom:6pxsolid#ffff00;
}
border属性
4）添加margin的方式和padding是一样的，如：
h2{
margin-top:6px;
margin-right:0;
margin-bottom:6px;
margin-left:0;
}
margin属性
或者按顺时针方向一次性设置
h2{
margin:6px06px0;
}
margin属性
当上下和左右参数一致的时候，也可以这样设置，如下：
h2{
margin:6px0;
}
3、计算盒子的尺寸
在所有标签中都有padding，border，margin一层层的包围在内容区域的外面，四个部分被设置后，整个盒子的尺寸计算方法如下：
整个盒子的宽度=内容区域的宽度左padding右padding左border右border左margin右margin
整个盒子的高度=内容区域的高度上padding下padding上border下border上margin下margin
4、默认浏览器的样式
当你没有为网页定义样式的时候，浏览器会使用默认的样式，把下面的这段代码加入到你的CSS开始部分覆盖浏览器的默认样式，代码包含我们前面介绍过的标签，这样我们就可以根据自己需求自由控制网页了，这个过程称之为CSS的初始化，在实际的项目中，初始化是必不可少的部分。
html,body,h2,h3,h4,p,ol,ul,li,a{
padding:0;
border:0;
margin:0
}
到此，相信大家对“Web开发中怎么设置盒模式的属性”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
本文标题：Web开发中怎么设置盒模式的属性-创新互联
转载源于：http://6mz.cn/article/dhcgee.html