web前端学习135-144（盒子模型---网页布局，盒子模型组成，边框，表格细线边框，盒子实际大小，内边距）

香甜的甲基橙

已于 2022-01-20 15:29:24 修改

阅读量1.4k

点赞数 3

分类专栏： css web前端基础学习笔记文章标签：前端 css

于 2022-01-16 11:04:30 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/122520539

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

文章目录

盒子模型
1. 盒子模型

盒子模型

能够准确阐述盒子模型的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减去多出来的内边距大小即可。

香甜的甲基橙

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
web前端学习135-144（盒子模型---网页布局，盒子模型组成，边框，表格细线边框，盒子实际大小，内边距）

文章目录盒子模型1. 盒子模型1.1 看透网页布局的本质1.2 盒子模型（Box Model）组成1.3 边框（border）1.4 表格的细线边框1.5 边框会影响盒子的实际大小1.6 内边距（padding）盒子模型能够准确阐述盒子模型的4个组成部分能够利用边框复合写法给元素添加边框能够计算盒子的实际大小能够利用盒子模型布局模块案例能够给盒子设置圆角边框能够给盒子添加阴影能够给文字添加阴影1. 盒子模型页面布局要学习三大核心，盒子模型,浮动和定位学习好盒子模型能非常好的帮助我们布
复制链接

扫一扫