CSS:盒子模型

目录

[▐ box---model概述](#▐ box—model概述)

[▐ 盒子的组成](#▐ 盒子的组成)

[▐ 内容区](#▐ 内容区)

[▐ 内边距](#▐ 内边距)

[▐ 边框](#▐ 边框)

[▐ 外边距](#▐ 外边距)

[▐ 清除浏览器默认样式](#▐ 清除浏览器默认样式)


▐ box---model概述

• CSS处理网页时,它认为每个标签都包含在一个不可见的盒子里.

• 如果把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子.

• 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局.

盒子的组成

• 一个盒子分为4个部分:

➱ 内容区(content)

➱ 内边距(padding)

➱ 边框 (border)

➱ 外边距(margin)

✩ 标签大小 = 内容区大小 + 内边距大小 + 边框

内容区

• 内容区指的是盒子中放标签内容的区域,子标签都存在于内容区中

width和 height两个属性只是设置内容区的大小而不是整个盒子的大小。

• 如果没有为标签设置内边距和边框,则内容区大小默认和盒子大小是一致的。

• width和height属性适用于块标签。

内边距

• 内边距指的就是标签内容区到边框以内的区域。

• 内边距会影响整个盒子的大小 (涉及计算问题),使用padding属性来设置标签的内边距。

html 复制代码
padding: 15px;              /* 四个方向内边距相同 */
padding: 5px 10px 15px 20px;/* 上 右 下 左 */
padding: 10px 20px;         /* 上下 左右 */

▐ 边框

• 可以在标签周围创建边框,边框是标签可见框的最外部(边框也会算在标签大小中)

• 边框的三要素:宽度 width、颜色 color 、样式 style

• 边框可以设置样式:

dotted (点线) dashed (虚线) solid (实线) double (双线)

groove (槽线) border-radius(设置四个角为圆角边框)

border-top/bottom-left/right-radius(设置某个位置为圆角边框)

html 复制代码
				/* 设置边框属性 */
				border-top:  2px;
				border-color: black;
                border-style: inset;	
				/* 可以简写为border: black inset 2px; */
				
				/* 设置元素外边框圆角 */
				border-radius: 15px;

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框

外边距

• 外边距是标签边框与周围标签相距的区域,使用margin属性可以设置外边距。

• 外边距不影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围。

• 用法和padding类似,同样也提供了四个方向的 . margin-top/right/bottom/left

• margin的值可以为负值 .

• margin的值还可以auto,设置外边距为最大值 .

当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,标签水平居中

上下设置为auto,外边距为0,上下外边距需要给具体的值;水平居中可以简写为 margin*:** 0 auto*

html 复制代码
margin:0 auto;

清除浏览器默认样式

📖 浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

* 表示所有标签

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架