Web前端开发,什么是盒子模型?盒子模型有哪些属性 |
您所在的位置:网站首页 › 前端开发分为哪些 › Web前端开发,什么是盒子模型?盒子模型有哪些属性 |
在body中的每一个HTML标签实际上都被包围在一个看不见的矩形中,这个矩形就叫做“盒”。 盒子模型 首先介绍下HTML中标签的分类 一、HTML的标签分为两种:块标签和内敛标签 1、块标签:占据了容器的整个宽度,容器指的是 body 标签,每个块标签所在的盒都尽可能的占据页面的整个宽度,就是要占用浏览器一整行的位置。 块标签:包含p、div、ul、ol、li、h1~h6等;块标签独自占据一行、自带换行的效果;除了div以外,一般块级标签都会有内外边距,宽度和高度。 2、内联标签:不会占据容器的一整行,它会和它周围的内容在一起,在一行内自然的从左到右依次显示,内容的多少决定了内联标签的宽度。 内联标签:包含 span,a,img,input,label等 浏览器怎么会知道盒子与盒子之间的距离应该是多少?就会用到盒模式 二、盒模式 盒模式是描述标签的边框和间距的一种方式 1、盒模式由4部分组成 1)内容区域 content area 内容区域中包含的是盒子中真正的内容(文本,图片等) 2)补白或内边距 padding padding包围在内容区域的边缘,分为上,右,下,左四个区域 3)边框 border border包围在padding的边缘,也分为上,右,下,左四个区域 4)边距 margin margin包围在border的上、右、下、左四个边缘 盒模式 2、如何设置盒模式的属性? 1)每次设置padding属性的一个值 h1 { padding-top: 6px; padding-right: 3px; padding-bottom: 0; padding-left: 0; } padding属性 或者按照顺时针方向一次性设置:上,右,下,左 h1 { padding: 6px 3px 0 0; } padding属性 2)设置三个关于border的属性 h1 { border-width: 6px; border-style: solid; border-color: #ffff00; } border属性 或者使用简写的形式 h1 { border: 6px solid #ffff00; } border属性 也可以只设置其中一侧的边框 h1 { border-bottom: 6px solid #ffff00; } border属性 4)添加margin的方式和padding是一样的,如: h1 { margin-top: 6px; margin-right: 0; margin-bottom: 6px; margin-left: 0; } margin属性 或者按顺时针方向一次性设置 h1 { margin: 6px 0 6px 0; } margin属性 当上下和左右参数一致的时候,也可以这样设置,如下: h1 { margin: 6px 0; } margin属性 3、计算盒子的尺寸 在所有标签中都有padding,border,margin一层层的包围在内容区域的外面,四个部分被设置后,整个盒子的尺寸计算方法如下: 整个盒子的宽度=内容区域的宽度+左padding+右padding+左border+右border+左margin+右margin 整个盒子的高度=内容区域的高度+上padding+下padding+上border+下border+上margin+下margin 4、默认浏览器的样式 当你没有为网页定义样式的时候,浏览器会使用默认的样式,把下面的这段代码加入到你的CSS开始部分覆盖浏览器的默认样式,代码包含我们前面介绍过的标签,这样我们就可以根据自己需求自由控制网页了,这个过程称之为CSS的初始化,在实际的项目中,初始化是必不可少的部分。 html, body, h1, h2, h3, p, ol, ul, li, a { padding: 0; border: 0; margin: 0 } 设置浏览器默认样式 总结: 每个标签都填充在一个看不见的盒子中 块标签所在的盒会占据浏览器一整行的位置 使用padding可以设置边框到内容区域的距离 使用margin可以设置边框之外的距离 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |