CSS——盒子模型(上)
导读
目录
盒子模型
页面布局要学习三大核心,盒子模型、浮动和定位,学习好盒子模型能帮助布局页面
看透网页布局的本质
网页布局过程:
1.先准备好相关的网页元素,网页元素基本都是盒子box
2.利用CSS设置好盒子样式,然后摆放到相应位置
3.往盒子里面装内容
网页布局的核心本质:利用CSS摆盒子
盒子模型(Box Model)组成
盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,一个盛装内容的容器
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容
边框(border)
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色
语法:
border: border-width || border-style || border-color
属性 | 作用 |
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框的样式
CSS边框属性允许指定一个元素边框的样式和颜色
边框简写:
border: 1px solid red; 没有顺序
边框分开写法:
border-top: 1px splid red; /* 只设定上边框 其余同理 */
div{
width: 200px;
height: 200px;
/* border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000; */
border: 1px solid #000;
}
如果我们想简写一个盒子,但是只改变上边框呢?
div{
width: 200px;
height: 200px;
/* border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000; */
border: 1px solid #000;
/* 层叠性 */
border-top: 1px solid #159;
}
利用层叠性,我们改变了上边框的颜色
如果我们将上边框的这一行写到border上面呢?
div{
width: 200px;
height: 200px;
/* border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000; */
border-top: 1px solid #159;
border: 1px solid #000;
/* 层叠性 */
/* border-top: 1px solid #159; */
}
可见border的层叠性是从下往上覆盖的
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制单元格的边框
语法:
border-collapse: collapse;
- collapse单词是合并的意思
- border-collapse: collapse; 表示相邻边框合并在一起
边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此有两种方法解决:
1.测量盒子大小的时候,不量边框
2.如果测量的时候包含了边框,则需要width/height减去边框宽度
内边距(padding)
padding属性用于设置内边距,即边框与内容之间的距离
属性 | 作用 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding属性(简写属性)可以有一到四个值
值的个数 | 表达意义 |
padding: 5px; | 1个值,代表上下左右都是5像素内边距 |
padding: 5px 10px; | 2个值,代表下内边距是5像素,左右内边距是10像素 |
padding: 5px 10px 20px; | 3个值,代表上内边距是5像素,左右内边距是10像素,下内边距是20像素 |
padding: 5px 10px 20px 30px; | 4个值,代表上内边距5像素,右内边距10像素,下内边距20像素,左内边距30像素(顺时针) |
内边距会影响盒子实际大小
与盒子同理,让width/height减去多余的内边距大小即可。另外,盒子本身没有指定width/height属性,则外边距不会撑开盒子大小
外边距(margin)
margin属性用于设置外边距,即控制盒子和盒子之间的距离
属性 | 作用 |
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin简写方式代表的意义和padding完全一致
外边距会影响盒子实际大小
解决方式同上
(本文是根据b站黑马程序员pink老师做的笔记)