CSS（十四）：盒子模型
页面布局的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子。
- 利用CSS设置好盒子样式，然后放到相应的位置
- 往盒子里面装内容
网页布局的本质：就是利用CSS摆盒子
盒子模型
组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上就是一个盒子，封装周围的HEML元素，它包括：边框、外边距、内边距和实际内容
边框（border）
border可以设置元素的边框。边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法
border: border-width || border-style || border-color;
说明
属性 作用 border-width 定义边框的粗细，单位px border-style 边框样式 border-color 边框颜色 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之边框</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下都用 px */
border-width: 5px;
/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色 */
border-color: purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框的复合写法
语法：
border: border-width border-style border-color;
/* 没有先后顺序*/
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框的复合写法</title>
<style>
div {
width: 300px;
height: 200px;
/* 边框的复合写法 简写: */
border: 5px solid purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框分开写法
语法：
/* 上边框 */
border-top: border-width border-style border-color;
/* 下边框 */
border-bottom: border-width border-style border-color;
/* 左边框 */
border-left: border-width border-style border-color;
/* 右边框 */
border-right: border-width border-style border-color;
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框的复合写法</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width: 5px;
border-style: solid;
border-color: purple; */
/* 边框的复合写法 简写: */
/* border: 5px solid purple; */
/* 上边框 */
border-top: 5px solid red;
/* 下边框 */
border-bottom: 10px dashed purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
表格的细线边框
梦回表格标签
border-collapse 属性控制浏览器绘制表格边框的样式。他控制相邻单元格的边框
语法
border-collapse: collsapse;
说明
- collapse：合并的意思
border-collapse: collsapse;：表示相邻的边框合并在一起
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日小说排行榜</title>
<style>
table {
width: 500px;
height: 249px;
} th {
height: 35px;
} table,
td,
th {
border: 1px solid purple;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
边框会影响盒子的实际大小
边框会额外增加盒子的实际大小。因此我们有两种解决方案：
- 测量盒子大小的时候，不量边框
- 如果测量的时候包含了边框，则需要width/height减去边框
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框会影响盒子的实际大小</title>
<style>
/* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */
div {
/* width: 200px;
width: 200px; */
width: 180px;
height: 180px;
background-color: purple;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
内容（content）
这玩意没啥好说的，就是被装在盒子里面的东西。可以是文字、图片也可以是另一个盒子
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
但是你会发现，这些文字和盒子贴的太近了，有没有办法调整呢？这就涉及到padding（内边距了）
内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离
属性说明
属性 说明 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: purple;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
复合写法
padding属性（简写）可以有一到四个值
说明
值得个数 说明 padding: 5px; 1个值，代表上下左右都有5px的内边距 padding: 5px 10px; 2个值，代表上下内边距是5px，左右内边距是10px padding: 5px 10px 20px; 3个值，代表上内边距是5px，左右内边距是10px，下内边距是20px padding: 5px 10px 20px 30px; 4个值，上5，右10，下20，左30。按照顺时针方向设置 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: purple;
/* padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px; */
/* 内边距复合写法(简写) */
/* padding: 5px; */
/* padding: 5px 10px; */
/* padding: 5px 10px 20px; */
padding: 5px 10px 20px 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
padding带来的影响
当我们给盒子指定了padding值后，发生了2件事情：
内容和边框有了距离，添加了内边距
padding影响了盒子的实际大小
也就是说，如果盒子已经有了宽高，此时在指定内边距会撑大盒子
解决方案
- 如果要保证盒子跟效果保持一致，则让宽高减去多出来的内边距大小即可
padding不会撑开盒子的情况
如果盒子没有指定width/height属性，则此时padding不会撑开盒子大小
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding不会影响盒子大小的情况</title>
<style>
h1 {
/* width: 100%; */
height: 200px;
background-color: purple;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
外边距（margin）
margin属性用于设置外边距，即控制盒子与盒子之间的距离
属性说明
属性 说明 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之外边距margin</title>
<style>
div {
width: 200px;
height: 200px;
background-color: purple;
}
/* .one {
margin-bottom: 20px;
} */
.two {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
复合写法
同内边距
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之外边距margin</title>
<style>
div {
width: 200px;
height: 200px;
background-color: purple;
}
/* .one {
margin-bottom: 20px;
} */
.two {
margin: 30px 50px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
CSS（十四）：盒子模型的更多相关文章
- 【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
- CSS学习之盒子模型
1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
- css中的盒子模型
css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型. 1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- css布局与盒子模型
一. 盒子模型 注: 1.红色为border; 2.背景应用于内容.内边距.边框组成的区域: 3.Width和height指的是内容区域的高度和宽度. 边框属性: 1. padding属性:( ...
- CSS学习摘要-盒子模型
注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...
- DIV+CSS两种盒子模型（W3C盒子与IE盒子）
在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...
- css — 选择器、盒子模型
目录 1. css引入方式 2. css选择器 3. css的盒模型 css: 层叠样式表 1. css引入方式 行内样式 <div style='color:red;'>mjj</ ...
随机推荐
- mybatis plus 使用 SQL 保留字(关键字)
MybatisPlus:使用SQL保留字(关键字)的操作 必须要手动在 entity 的字段上加注解,否则最终会报错,因为 mybatis 或者 mybatis plus 不会自动处理
- vue大型电商项目尚品汇（前台篇）day02
现在正式回归,开始好好做项目了,正好这一个项目也开始慢慢的开始起色了,前面的准备工作都做的差不多了. 而且我现在也开始慢慢了解到了一些项目才开始需要的一些什么东西了,vuex.router这些都是必备 ...
- 羽夏笔记—— AT&T 与 GCC
写在前面 本文是本人根据<AT&T 汇编语言与 GCC 内嵌汇编简介>进一步整理,修改了一些错误,并删除我并不能复现代码相关的部分.该文章一是我对 AT&T 的学习记录 ...
- AntdVue使用
AntdVue使用 配置与安装 #安装 npm install ant-design-vue --save #按需加载 import { Button, Layout, Row, Col, Menu, ...
- Netty是什么，Netty为什么速度这么快，线程模型分析
哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,现在下着大雨看来是去 ...
- Random方法中的nextInt(int arg0)方法讲解
nextInt方法会生成一个随机的在5以内的数,负载均衡随机策略底层用的就是这个方法: Random rand = new Random(); int index = rand.nextInt(5); ...
- 当运行npm install 命令的时候带上ignore-scripts，会发生什么？
摘要:运行npm install 命令的时候带上ignore-scripts, 可以避免一个恶意包里的病毒. 本文分享自华为云社区<运行npm install 命令的时候带上--ignore-s ...
- C语言- 基础数据结构和算法 - 09 栈的应用_中缀表达式转后缀表达式20220611
09 栈的应用_中缀表达式转后缀表达式20220611 听黑马程序员教程<基础数据结构和算法 (C版本)>, 照着老师所讲抄的, 视频地址https://www.bilibili.com/ ...
- go-zero微服务实战系列（四、CRUD热热身）
上一篇文章我们把整个项目的架子搭建完成,服务在本地也已经能运行起来了,顺利成章的接下来我们就应该开始写业务逻辑代码了,但是单纯的写业务逻辑代码是比较枯燥的,业务逻辑的代码我会不断地补充到 lerbon ...
- nginx https证书配置
1. Nginx配置 server { listen 443; #指定ssl监听端口 server_name www.example.com; ssl on; #开启ssl支持 ssl_certifi ...