CSS学习笔记四（盒子模型）

最新推荐文章于 2023-02-08 10:53:47 发布
最新推荐文章于 2023-02-08 10:53:47 发布
阅读量172 收藏
点赞数
分类专栏： 前端 文章标签： html css3 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbean1028/article/details/116353357
版权

CSS学习笔记四（盒子模型）

文章目录

盒子模型

边框属性

  • 边框就是环绕在标签宽度和高度周围的线条

  • 连写(同时设置四条边)

    border: 边框的宽度 边框的样式 边框的颜色;

  • 示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
</style>

  • 快捷键:

    bd+ border: 1px solid #000;

  • 注意点:

    连写格式中颜色属性可以省略, 省略之后默认就是黑色

    连写格式中样式不能省略, 省略之后就看不到边框了

    连写格式中宽度可以省略, 省略之后还是可以看到边框

  • 按方向连写(分别设置四条边)

    border-top: 边框的宽度 边框的样式 边框的颜色;

    border-right: 边框的宽度 边框的样式 边框的颜色;

    border-bottom: 边框的宽度 边框的样式 边框的颜色;

    border-left: 边框的宽度 边框的样式 边框的颜色;

  • 示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
</style>

  • 按要素连写(分别设置四条边)

    border-width: 上 右 下 左;

    border-style: 上 右 下 左;

    border-color: 上 右 下 左;

  • 示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
        }
</style>

  • 注意点:

    这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

    这三个属性的取值省略时的规律

    上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

    上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

    上 右 下 左 > 上 > 右下左边取值和上边一样

  • 示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
</style>
  • 注意点:
    • 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的
.box3{
            border: 5px solid red;
            border-right:5px dashed red;
}

内边距属性

  • 边框和内容之间的距离就是内边距

  • 单独设置四条边

    padding-top: ;

    padding-right: ;

    padding-bottom: ;

    padding-left: ;

  • 示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
            padding-right:40px;
            padding-bottom:80px;
            padding-left:160px;
       }
</style>

  • 同时设置四条边

    padding: 上 右 下 左;

  • 示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
</style>

  • 注意点:

    这三个属性的取值省略时的规律

    上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

    上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

    上 右 下 左 > 上 > 右下左边取值和上边一样

    给标签设置内边距之后, 标签占有的宽度和高度会发生变化

    给标签设置内边距之后, 内边距也会有背景颜色

外边距属性

  • 标签和标签之间的距离就是外边距

  • 单独设置四条边

    margin-top: ;

    margin-right: ;

    margin-bottom: ;

    margin-left: ;

  • 示例代码

<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
</style>

  • 同时设置四条边

    margin: 上 右 下 左;

  • 示例代码

<style>
  .box1{
            margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        }
</style>
  • 注意点:
    • 这三个属性的取值省略时的规律
    • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
    • 上 右 下 左 > 上 > 右下左边取值和上边一样
  • 外边距的那一部分是没有背景颜色的
  • 外边距合并现象
  • 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
  • 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

  • margin-top问题

    如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

    如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

    在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

  • 示例代码

<style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            /*不设置边框, big也会被small的顶部外边距顶下去*/
            border: 5px solid #000;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top:150px;
            margin-left:150px;
        }
    </style>

  • text-align:center;和margin:0 auto;区别

    text-align: center; 是设置盒子中存储的文字/图片水平居中

    margin:0 auto;是让盒子自己水平居中

  • 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和内容居中</title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*文字图片会居中*/
            /*text-align: center;*/
            /*盒子自身会居中*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    我是文字<br/>
    ![](images/girl.jpg)
    <div class="son"></div>
</div>
</body>
</html>

盒子模型

  • CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型

  • CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签

  • 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型

  • 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-CSS盒子模型</title>
    <style>
        span,a,b,strong{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 6px solid #000;
            padding: 20px;
            margin: 20px;
        }

    </style>
</head>
<body>

<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>

</body>
</html>

  • 盒模型宽度和高度

  • 内容的宽度和高度

  • 就是通过width/height属性设置的宽度和高度

  • 元素的宽度和高度

    宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

    高度 同理可证

  • 规律

    增加了padding/border之后元素的宽高也会发生变化
    - 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

  • 元素空间的宽度和高度

    宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

    高度 同理可证

box-sizing属性

  • CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

  • box-sizing取值

    content-box

    元素的宽高 = 边框 + 内边距 + 内容宽高

    border-box

    元素的宽高 = width/height的宽高

  • 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

  • 示例代码

<!--增加padding/border之后元素宽高会变大-->
<style>
.box1{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

<!--增加padding/border之后元素宽不会变大-->
<style>
.box1{
 box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

感谢极客江南，B站有相关视频，参考链接：https://www.jianshu.com/p/34b6b5446a12

江山点墨
关注
专栏目录
html盒子嵌套教程,深入讲解CSS中盒模型的用法
weixin_31777631的博客
06-05 4022
视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。例如：如何生成元素框；处理各元素之间的关系；根据框的尺寸、定位等CSS属性来确定元素的位置等；因此，要掌握使用CSS控制页面内元素的技巧，就需要深入了解框模型(Box Model)及视觉格式化模型的原理。文档树中的元素都产生矩形的框(Bo...
[CSS学习笔记]盒子模型
weixin_45369645的博客
07-28 230
一、CSS将页面中的所有元素都设置为一个矩形的盒子，每一个盒子都由以下几个部分组成：内容区(content)、内边距(padding)、边框(border)、外边距(margin)。 二、盒子边框中三个要素缺一不可，分别是：border-width（边框的宽度）、border-color（边框的颜色）、border-style（边框的样式）。以border-width为例子，border-width的值指定四个方向上边框的宽度(上 右 下 左：顺时针旋转，下同)。 border简写属性，通过该属性可以同时
14-CSS基础-盒模型
weixin_34348805的博客
10-08 119
盒模型 边框属性 什么边框? 边框就是环绕在标签宽度和高度周围的线条 边框属性的格式 连写(同时设置四条边) border: 边框的宽度 边框的样式 边框的颜色; 示例代码 <style> .box{ width: 100px; ...
CSS第三天学习基础（总结）
weixin_45883291的博客
02-05 176
2.盒模型（框模型） 一个盒子的内容包含了五部分：宽度（width），高度（height），内边距（padding），边距（margin），边框（border）。 width:500px; height:500px; padding:100px； 1.宽高（width，height） 规定用来书写的区域，盒子的实际内容区域。 实际占有区是：width...
15.CSS-盒子模型
Veronnit的博客
07-15 180
文章目录CSS盒子模型盒子模型宽度和高度1.内容的宽度和高度2.元素的宽度和高度3.元素空间的宽度和高度盒子box-sizing属性1.取值2.注意点text-align:center和margin:0 auto;的区别 CSS盒子模型 在HTML中，所有的标签都可以设置宽度/高度、内边距、边框、外边距，HTML中所有的标签都是盒子。 宽度/高度（蓝色）：指定可以存放内容的区域。 内边距（绿色） 边框（黄色） 外边距（橘色） 盒子模型宽度和高度 1.内容的宽度和高度 内容的宽度和高度就是通过标签的widt
CSS总结 • 【第3章 盒子模型】
冯上
12-09 226
CSS //1.宽度：width //2.高度：height 让盒子里的元素垂直居中: div{ height: 40px; line-height: 40px; } //3.边框：border 边框样式 属性 样式 属性值 border-width 边框大小 （像素：px）（倍数：em） border-color 边框颜色 （16进制RGB值：#aabbcc）（rgba函数：rgba(红，绿，蓝，透明度)）（名称：red） border-radius 圆角边框 （像素：px）
css基础笔记3-盒子模型
m0_54386801的博客
07-17 150
盒子模型 边框 border:border-width border-style border-color 定义边框粗细，单位是px。边框的样式（dashed虚线，dotted点线）。边框颜色。 边框可以分开写用border-top等 表格 一个table就是相当于一个div，里面的每一个单元格相当于行内块元素的小div。如果给每个td一个边框会造成相邻的两个边框会加在一起，要解决这个问题需要：border-collapse:collapse;表示相邻边框合并在一起。 边框会直接影响div的大
前端爱好者的小白学习之路 4-1 CSS学习笔记-盒子模型基础知识
一碗菜粥的博客
02-10 2671
经过前面一个阶段对HTML CSS基础语法的学习之后 我们已经可以写出来一个简单的网页了 HTML基础知识总结 CSS基础语法总结 但这些想要做好网页布局 只有那些基础知识肯定是不够的诶 （学会了这些基础知识 我们只能对网页中单一的一块内容进行设计 或者是凌乱地对一整片网页进行布局 太不系统啦！） 所以我们引入了“盒子模型”这个概念， 不理解盒子模型 是不能清晰明了地写出来一个网页的~ 我们看到的网页中一个个分块显示的内容，其实就是一个个的盒子 作为一名初入前端领域的小白 肯定是要从盒子模型开始 像搭积
CSS学习笔记五---盒子模型 & 溢出属性
Flora_hsx的博客
07-24 446
学习笔记五
CSS学习笔记10——盒子模型
lxy95512的博客
01-13 176
页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布顾页面。 网页布局过程: 1.先准备好相关的网页元素，网页元素基本都是盒子Box。 2.利用CSS设置好盒子样式，然后摆放到相应位置。 3.往盒子里面装内容。 盒子模型组成 盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子 ，也就是一个盛装内容的容器。 CSS好模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。 边...
CSS笔记(二) - 页面布局 盒子模型
最新发布
JUN_7777的博客
02-08 2221
行内元素
CSS盒子模型——高度塌陷问题
zg0601的博客
10-19 549
盒子模型三种高度塌陷问题
border-radius制作四色正方形
日常分享
07-06 847
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div{width: 0; border-top:
CSS 盒子模型——边框、内边距、外边距
蟹黄堡
05-13 2522
盒子模型的组成 盒子模型包括：边框、内边距、外边距和实际内容，具体参见下图： 边框 边框由三部分组成，分别是：边框宽度，边框样式以及边框颜色，具体参见下表： 属性 说明 border-width 定义边框粗细，单位是px border-style 定义边框的样式，主要记住：solid（实线）、dashed（虚线）、dotted（点线） border-color 定义边框的颜色 边框的复合写法： border:1px solid blue; （没有顺序） bor
获取随机图片的API-亲测可行
热门推荐
xbean1028的博客
03-26 1万+
获取随机图片的API 在个人博客或者一些web页面中，我们可能想让背景是随机图片。这里有两种方法： 一种是使用现有的随机图片API，另一种就是在服务器端准备好图片，随机展示。 URL的使用方法是img标签嵌入到网页中。 随机图片API 效果展示网址：https://xubean.top/ bing的github API 功能: 来自github的项目 https://github.com/xC...
CSS学习笔记一（常见属性、选择器）
xbean1028的博客
05-02 351
CSS学习笔记一（常见属性、选择器） html是一种描述结构的语言，与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。 文章目录CSS初体验CSS格式CSS常见属性文字属性font-stylefont-weightfont-sizefont-family字体属性补充文字属性缩写文本属性text-decorationtext-aligntext-indent颜色属性rgbrgb
CSS学习笔记三（显示模式，背景和精灵图）
xbean1028的博客
05-02 276
CSS学习笔记三（显示模式，背景和精灵图） 文章目录CSS显示模式Div和Span标签CSS元素显示模式CSS元素显示模式转换背景和精灵图背景相关属性背景颜色背景图片背景平铺背景定位背景属性连写背景关联插入图片和背景图片的区别css精灵 CSS显示模式 Div和Span标签 什么是div? 作用: 一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px;
HTML学习笔记一（基础标签）
xbean1028的博客
03-31 235
HTML学习笔记一（基础标签） 文章目录一. 基本概念HTML标签分类HTML标签关系分类DTD文档声明二. 基础标签H系列标签(Header 1~Header 6)P标签(Paragraph)Hr标签(Horizontal Rule)HTML注释(Annotation)img标签(image)br标签(Break)a标签(anchor) 一. 基本概念 HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议 HTML标签分类 单标签 只有开始标签没有结束标签, 也就是
HTML学习笔记二（常用标签）
xbean1028的博客
03-31 202
HTML学习笔记二（常用标签） 文章目录列表标签无序列表(unordered list)有序列表(ordered list)定义列表(definition list)表格标签表格中的属性表格中的其它标签表格的结构表单标签form标签input标签数据列表多行文本框(文本域)下拉列表多媒体标签video标签audio标签详情和概要标签marquee标签HTML中被废弃的标签HTML实体meta其它类型eywords类型Descriiption类型Author类型Refresh类型Robots类型 列表标签 无
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值