web前端学习135-144（盒子模型---网页布局，盒子模型组成，边框，表格细线边框，盒子实际大小，内边距）
文章目录
- 盒子模型
- 1. 盒子模型
- 1.1 看透网页布局的本质
- 1.2 盒子模型（Box Model）组成
- 1.3 边框（border）
- 1.4 表格的细线边框
- 1.5 边框会影响盒子的实际大小
- 1.6 内边距（padding）
盒子模型
能够准确阐述盒子模型的4个组成部分
能够利用边框复合写法给元素添加边框
能够计算盒子的实际大小
能够利用盒子模型布局模块案例
能够给盒子设置圆角边框
能够给盒子添加阴影
能够给文字添加阴影
1. 盒子模型
页面布局要学习三大核心，盒子模型,浮动和定位学习好盒子模型能非常好的帮助我们布局页面.
1.1 看透网页布局的本质
网页布局过程：
- 先准备好相关的网页元素,网页元素基本都是盒子Box。
- 利用CSS设置好盒子样式,然后摆放到相应位置。
- 往盒子里面装内容.
网页布局的核心本质：就是利用CSS摆盒子。
1.2 盒子模型（Box Model）组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子 ,也就是一个盛装内容的容器。
CSS盒子模型本质上是-个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容
1.3 边框（border）
border可以设置元素的边框。边框有三部分组成边框宽度(粗细)边框样式边框颜色
语法：
border: border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
eg : 盒子模型之边框html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 200px;/* border-width 边框的粗细 一般情况下都用 */border-width: 5px;/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 *//* border-style: solid; *//* border-style: dashed; */border-style: dotted;/* border-color 边框的颜色 */border-color: pink;}</style>
</head>
<body><div></div>
</body>
</html>
CSS边框属性允许你指定一个元素边框的样式和颜色
边框简写：
border : 1px solid red; 没有顺序
边框分开写法：
border-tpo : 1px solid red; /*只设定上边框，其余同理*/
若设置上边框红色，其他蓝色，可以如下：
border : 1px solid blue;
/*层叠性,只是层叠了上边框*/
border-top : 1px solid red;
1.4 表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法
border- collapse : collapse;
- collapse 单词是合并的意思
- border-collapse: collapse;表示相邻边框合并在-起
12-细线表格今日小说排行榜案例.html
对之前html做的表格进行修改，主要是看style部分的添加部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 500px;height: 249px;}table,td,th {border: 1px solid pink;/* 合并相邻的边框 */border-collapse : collapse;font-size: 14px;text-align: center;}</style>
</head>
<body><table align="center" cellspacing="0" ><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七天</th><th>相关链接</th></tr><tr><td>1</td><td>鬼吹灯</td><td>↓</td><td>345</td><td>123</td><td><a href="http://jump2.bdimg.com/f?kw=%E9%AC%BC%E5%90%B9%E7%81%AF&ie=utf-8&tab=good" target="_black">贴吧</a> <a href="https://cn.bing.com/images/search?q=%e9%ac%bc%e5%90%b9%e7%81%af%e5%9b%be%e7%89%87&qpvt=%e9%ac%bc%e5%90%b9%e7%81%af%e5%9b%be%e7%89%87&form=IGRE&first=1&tsc=ImageBasicHover" target="_black">图片</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790" target="_black">百科</a></td></tr><tr><td>2</td><td>盗墓笔记</td><td>↓</td><td>124</td><td>65432</td><td><a href="https://jump2.bdimg.com/f?kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&ie=utf-8&tab=good" target="_black">贴吧</a> <a href="https://cn.bing.com/images/search?q=%e7%9b%97%e5%a2%93%e7%ac%94%e8%ae%b0%e5%9b%be%e7%89%87&qpvt=%e7%9b%97%e5%a2%93%e7%ac%94%e8%ae%b0%e5%9b%be%e7%89%87&form=IGRE&first=1&tsc=ImageBasicHover" target="_black">图片</a> <a href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859" target="_black">百科</a></td></tr><tr><td>3</td><td>西游记</td><td>↑</td><td>212</td><td>7654</td><td><a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E8%A5%BF%E6%B8%B8%E8%AE%B0&fr=search" target="_black">贴吧</a> <a href="https://cn.bing.com/images/search?q=%e8%a5%bf%e6%b8%b8%e8%ae%b0%e5%9b%be%e7%89%87&qpvt=%e8%a5%bf%e6%b8%b8%e8%ae%b0%e5%9b%be%e7%89%87&form=IGRE&first=1&tsc=ImageBasicHover" target="_black">图片</a> <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723" target="_black">百科</a></td></tr><tr><td>4</td><td>东游记</td><td>↑</td><td>23</td><td>75645</td><td><a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0&fr=search" target="_black">贴吧</a> <a href="https://cn.bing.com/images/search?q=%E4%B8%9C%E6%B8%B8%E8%AE%B0%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=dong%E6%B8%B8%E8%AE%B0%E5%9B%BE%E7%89%87&sc=0-8&cvid=AFC63EA04447491D8F4A5EFCDF6F5EC6&first=1&tsc=ImageBasicHover" target="_black">图片</a> <a href="https://baike.baidu.com/item/%E4%B8%9C%E6%B8%B8%E8%AE%B0/15083" target="_black">百科</a></td></tr><tr><td>5</td><td>甄嬛传</td><td>↓</td><td>121</td><td>7676</td><td><a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E7%94%84%E5%AC%9B%E4%BC%A0&fr=search" target="_black">贴吧</a> <a href="https://cn.bing.com/images/search?q=%E7%94%84%E5%AC%9B%E4%BC%A0%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=zhen%27huan%27z%E5%9B%BE%E7%89%87&sc=0-13&cvid=4744640D05B248AB93F60B23D252EDFB&first=1&tsc=ImageBasicHover" target="_black">图片</a> <a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B%E4%BC%A0/4701562" target="_black">百科</a></td></tr><tr><td>6</td><td>水浒传</td><td>↑</td><td>576576</td><td>1231412</td><td><a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E6%B0%B4%E6%B5%92%E4%BC%A0&fr=search" target="_black">贴吧</a> <a href="https://cn.bing.com/images/search?q=%E6%B0%B4%E6%B5%92%E4%BC%A0%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=%E6%B0%B4%E6%B5%92%E4%BC%A0%E5%9B%BE%E7%89%87&sc=8-5&cvid=B72EF8478EDE4C4D98D710CB0CB2CE8D&first=1&tsc=ImageBasicHover" target="_black">图片</a> <a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348" target="_black">百科</a></td></tr><tr><td>7</td><td>三国演义</td><td>↑</td><td>234</td><td>7686</td><td><a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89&fr=search" target="_black">贴吧</a> <a href="https://cn.bing.com/images/search?q=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=san%27guo%27yan%27yi%E5%9B%BE%E7%89%87&sc=0-16&cvid=CD66661AEFBE4232932DB9884BA01DF2&first=1&tsc=ImageBasicHover" target="_black">图片</a> <a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782" target="_black">百科</a></td></tr></table>
</body>
</html>网页显示
1.5 边框会影响盒子的实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
- 测量盒子大小的时候,不量边框.
- 如果测量的时候包含了边框,则需要width/height减去边框宽度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 我们需要一个200*200 的盒子，但是这个盒子有10像素的红色边框 */div {width: 200px;height: 200px;background-color: pink;border: 10px solid red;}</style>
</head>
<body><div></div>
</body>
</html>
1.6 内边距（padding）
padding属性用于设置内边距,即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
| 值的个数 | 表达意思 |
|---|---|
| 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像素 顺时针 |
以上4种情况,我们实际开发都会遇到。
14-盒子模型之内边距.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;/* padding-left: 20px; *//* padding-top: 30px; *//* 内边距复合写法 */padding: 20px;}</style>
</head>
<body><div>盒子内容是content盒子内容是content盒子内容是content</div>
</body>
</html>
网页显示及检查
盒子变大了，原来200 * 200，后来四周都加了内边距20，那么就变成了240* 240
当我们给盒子指定padding值之后,发生了2件事情：
内容和边框有了距离。添加了内边距。
padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
解决方案:
如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。
web前端学习135-144（盒子模型---网页布局，盒子模型组成，边框，表格细线边框，盒子实际大小，内边距）相关推荐
- Web前端学习笔记05：CSS_盒子模型_复合选择器_标签显示 模式_三大特性_书写规范
文章目录 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. ...
- Web 前端学习之制作网页音频
Web 前端学习之制作网页音频 1. 新建目录(image) 2. 完整代码如下所示 结束语 1. 新建目录(image) 用来存放音频文件 2. 完整代码如下所示 <!DOCTYPE html ...
- 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签
一.html5概述 html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本.我们平时所说的html5其实是包含了html5,css3的新特性,以及新增的Jav ...
- html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...
- 零基础web前端学习路线【全新web前端入门视频教程】
零基础怎么学web前端?下面就一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?这里为大家整理完整的零基础 前端学习路线分享给大家. 适合零基础学员 ...
- 零基础web前端学习路线
很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取. 前端开发入门学习有:HTML.CSS.JavaScript(简称JS)这三个部分.所以在学习之前我们需 ...
- WEB前端学习路线2023完整版（附视频教程+学习资料）
下面小编为web前端学习爱好者汇总了一条完整的自学线路,适合初学者的WEB前端学习路线汇总! 需要更多教程,文末扫码即可 别忘了扫码领资料哦[高清Java学习路线图] 和[全套学习视频及配套资料] 1 ...
- 2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
- Web前端学习——HTML
Web前端学习day1 一.html的基本介绍 html基本框架 二.html元素 1.标题标签 2.水平线标签 3.段落标签 4.强制换行标签 5.文本格式化标签 6.超链接标签 7.图片标签 8. ...
- web 前端学习线路图
web 前端学习线路图 一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
最新文章
- C#编码简单性之语义篇（如何编写简短的C#代码，随时更新）
- 分享一个简单的功能集网站
- 释放linux 内存
- TreeView的复选框隐藏 重新整理
- java内部类为什么使用很少_Java内部类你真的会吗？
- Golang 之协程详解
- 自制操作系统：引导扇区的实现
- 中国射频前端产业现状分析
- 执行以下代码后，可以看到小猫在舞台上右转了4次正好一圈。
- 前端改好，验证码显示不出来！！
- Go开发 之 单端口转发到多个端口
- Arduino与按钮，火警传感器，无源红外（PIR）传感器和酒精传感器
- 华为云linux登录用户名密码,华为云Linux服务器安装宝塔Linux面板详细图文教程
- 思科交换机配置试题_cisco交换机配置简单教程.doc
- linux打印函数名,linux kernel 打印函数指针对应的函数名方法
- 国内人工智能行业全梳理
- 哲哲打游戏（读清题意）
- 爵士乐里全用13和弦吗？_用微妙的视差爵士化静态网页
- N1-防火墙的工作原理
- python起笔落笔_起笔、行笔、落笔，讲话稿还能这样写