盒子模型(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、清除元素的默认内外边距(重要)

⑴、为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除。

⑵、代码:

* {
     padding: 0;  /* 清除内边距 */
     margin: 0;    /* 清除外边距 */
 }
⑶、注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
7、外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
⑴相邻块元素垂直外边距的合并:
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top时,则它们之间的垂直间距不是margin-bottom与margin-top之和,
而是取两个值中的较大者,这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
解决方案:尽量只给一个盒子添加margin值。
⑵嵌套块元素垂直外边距的合并(塌陷):
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。
解决方案:
①可以为父元素定义上边框;
②可以为父元素定义上内边距;
③可以为父元素添加overflow:hidden。
还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题.....
四、盒子模型布局稳定
1、什么情况下用内边距,什么情况下用外边距:大部分情况下是可以混用的,觉得哪个方便,就用哪个。
根据稳定性来分,建议如下:
按照 优先使用 宽度(width),其次 使用内边距(padding),再次 外边距(margin)。
width > padding > margin
2、原因:
①margin 会有外边距合并,还有ie6下面的margin加倍的bug(讨厌),所以最后使用;
②padding 会影响盒子大小,需要进行加减计算(麻烦),其次使用;
③width 没有问题(嗨皮),我们经常使用宽度剩余法,高度剩余法来做。
 五、去掉盒子默认的样式
1、原因:因为无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,而且也比较难看,所以,我们一般上来就直接去掉这些列表样式就行了。
2、代码
li { list-style: none; }
 
 
 
posted @   燕归楼  阅读(915)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示