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://scyanting.com/article/dhcgee.html