总目录:https://blog.csdn.net/treesorshining/article/details/124725459
1.盒子模型
页面布局三大核心
-
盒子模型
-
浮动
-
定位
网页布局的本质
- 首先利用CSS设置好盒子的大小,然后摆放盒子的位置。
- 最后把网页元素比如文字图片等等,放入盒子里面。
盒子模型概述
- 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
- 盒子模型由元素的内容(content)、边框(border)、内边距(padding)、和外边距(margin)组成。
- 盒子里面的文字和图片等元素是内容区域
- 盒子的厚度称为为盒子的边框
- 盒子内容与边框的距离是内边距
- 盒子与盒子之间的距离是外边距
W3C标准盒子模型
标准 w3c 盒子模型的范围包括 margin、border、padding、content
当设置为box-sizing: content-box;时,将采用标准模式解析计算,也是默认模式;
内盒尺寸计算(元素实际大小)
- 高度:Element Height = content height + padding + border (Height为内容高度)
- 宽度:Element Width = content width + padding + border (Width为内容宽度)
- 盒子的实际大小:内容的宽度和高度 + 内边距 + 边框
IE盒子模型
IE 盒子模型的 content 部分包含了 border 和 padding
当设置为box-sizing: border-box时,将采用怪异模式解析计算;
2.边框(border)
- CSS 边框属性允许指定一个元素边框的样式和颜色
- 边框由三部分组成:边框宽度(粗细) 边框样式 边框颜色
border : borde-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
1.border-style
边框样式 border-style可以设置如下值:
none
:没有边框即忽略所有边框的宽度(默认值)solid
:边框为单实线(最为常用的)dashed
: 边框为虚线dotted
: 边框为点线
边框简写:没有顺序
border : 1px soilid red;
边框分开写法:
/* 只设定上边框,其余边框部位同理 */
border-top: 1px solid red;
很多情况下,不需要指定4个边框,可以单独给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:宽度 样式 颜色; |
2.border-collapse
- border-collapse 属性控制浏览器绘制表格边框的方式,它控制相邻单元格的边框
border-coppapse
表格的细线边框
border-collapse : collapse;
- 表示相邻边框合并在一起,在此处合并指的并非单元格的合并,而是表格单元格边框线条的合并,因为在一般情况下,相邻表格单元格的边界虽只有一条,但其实是两个单元格的重叠,所以显得较粗,合并之后则只显示一条。
边框会影响盒子实际大小
边框会额外增加盒子的实际大小,因此有两种方案解决:
- 测量盒子大小的时候,不量边框
- 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
3.内边距(padding)
padding 属性用于设置内边距,即盒子边框与内容之间的距离
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding -top | 上内边距 |
padding-bottom | 下内边距 |
- padding属性(简写属性)可以有一到四个值
值的个数及示例 | 表达意思 |
---|---|
1个值,padding : 5px; | 1个值,代表上下左右都有5像素内边距 |
2个值,padding :5px 10px; | 2个值,代表上下内边距是5像素,左右内边距是10像素 |
3个值,padding: 5px 10px 20px; | 3个值,代表上内边距5像素,左右内边距10像素,下内边距20像素 |
4个值,padding :5px 10px 20px 30px | 4个值,上是5像素,右是10像素,下20像素,左是30像素,顺时针 |
padding会影响盒子大小的情况
当给盒子指定 padding 值之后,发生了2件事情:
- 内容和边框有了距离,添加了内边距
- padding影响了盒子实际大小
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子
解决方案:
如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可
padding不会影响盒子大小的情况
- 如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
4.外边距(margin)
margin
(外边距)属性用于设置外边距,即控制盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin 简写方式代表的意义跟 padding 完全一致
块级盒子水平居中
外边距可以让块级盒子水平居中,但是必须满足两个条件
- 盒子必须制定了宽度(width)
- 盒子左右的外边距都设置为 auto
.header {
width: 960px;
margin: 0 auto;
}
左右的外边距都设置为 auto 有三种写法:
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意:
以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。
外边距合并
使用 margin 定义块级元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况:
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
①相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案:
尽量只给一个盒子添加 margin 值
②嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
解决方案:
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加 overflow: hidden
还有其他方法,比如浮动、固定、绝对定位的盒子不会有塌陷问题。
③清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此在布局前,首先要清除下网页元素的内外边距。
* {
padding: 0;
margin: 0;
}
注意:
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
随记: 去掉 li 前面的小圆点
li {
list-style: none;
}