盒子模型(CSS重点)
一、盒子模型(Box Model)
1、概念:所谓盒子模型,就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
2、总结:
①盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成;
②盒子里面的文字和图片等元素是内容区域;
③盒子的厚度,我们称为盒子的边框;
④盒子内容与边框的距离是内边距(类似单元格的cellpadding);
⑤盒子与盒子之间的距离是外边距(类似单元格的cellspacing)。
二、盒子边框(border)
1、语法:
borer : border-width || border-style || border-color
属性 | 作用 |
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
2、边框的样式
①none:没有边框即忽略所有边框的宽度(默认值);
②solid:边框为单实线(最为常用的);
③dashed:边框为虚线;
④dotted:边框为点线。
3、边框的综合设置
语法:borer : border-width || border-style || border-color
如 border:1px solid red;(没有顺序)
4、盒子边框写法总结表
上边框 | 下边框 | 左边框 | 右边框 |
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border-bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border-bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
5、表格的细线边框
①通过表格的 cellspacing="0" ,将单元格与单元格之间得距离设置为0;
②但是两个单元格之间的边框会出现重叠,从而使边框变粗;
③通过css属性:
table {border-collapse:collapse;}
collapse单词是合并的意思;
border-collapse:collapse;表示相邻边框合并在一起。
二、内边距(padding)
1、概念:padding属性用于设置内边距,是指边框与内容之间的距离。
2、设置:
属性 | 作用 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
3、当我们给盒子指定padding值之后,发生了2件事:
①内容和边框有了距离,添加了内边距;
②盒子会变大。
4、简写
值的个数 | 表达意思 |
1个值 | padding:上下左右内边距; |
2个值 | padding:上下边距 左右边距; |
3个值 | padding:上内边距 左右内边距 下内边距 |
4个值 | padding:上内边距 右内边距 下内边距 左内边距 |
5、遇到导航栏里面字不一样多的,不方便直接给宽度,直接给padding,撑开盒子。
6、内盒尺寸计算(元素实际大小)
①宽度:Element Height=content height+padding+border(Height为内容高度)
②高度:Element Width=content width+padding+border(Width为内容宽度)
③盒子实际大小=内容的宽度和高度+内边距+边框
7、padding不影响盒子大小的情况:
如果没有给一个盒子指定宽度,此时,如果给这个盒子指定padding,则不会撑开盒子。
三、外边距(margin)
1、概念:margin属性用于设置外边距,margin就是控制盒子和盒子之间的距离。
2、设置
属性 | 作用 |
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin值的简写(复合写法)代表意思跟padding完全相同。
3、外边距实现盒子居中
⑴可以让一个盒子实现水平居中,需要满足以下两个条件:
①必须是块级元素;
②然后就给左右的外边距都设置为auto。
⑵实际工作中常用这种方式进行网页布局,如:
.header {width:960px; margin:0 auto;}
常见的写法,以下三种都可以:
①margin-left:auto; margin-right:auto;
②margin:auto;
③margin:0 auto;
4、文字居中和盒子居中区别
①盒子内的文字水平居中是 text-align:center,而且还可以让行内元素和行内块元素居中对齐;
②块级盒子水平居中,左右margin改为auto。
5、插入图片和背景图片的区别
①插入图片,我们用的最多,比如产品展示类,移动位置只能靠盒模型padding、margin;
②背景图片,我们一般用于小图标背景或者超大背景图片,背景图片只能通过background-position。
6、清除元素的默认内外边距(重要)
⑴、为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除。
⑵、代码:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库