CSS盒子模型

最新推荐文章于 2024-07-19 15:50:46 发布
最新推荐文章于 2024-07-19 15:50:46 发布
阅读量227 收藏 1
点赞数 2
分类专栏： CSS 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_ooo/article/details/121213613
版权
CSS盒子模型

网页布局三大核心：盒子模型、浮动和定位

网页布局过程：

  1. 先准备好网页元素，网页元素基本都是盒子Box
  2. 利用css设置盒子样式
  3. 往盒子里面装内容

网页布局核心本质：利用css摆盒子

1.盒子模型组成

就是把HTML页面中元素看作是一个矩形的能盛装内容的盒子，CSS盒子模型本质上是一个盒子封装周围的HTML元素。它包括：边框(border)、外边距(margin)、内边距(padding)和实际内容(content)

2.边框(border)

边框由三部分组成：边框宽度（粗细）、边框样式和边框颜色

border:

border-width:border-top-width border-bottom-width border-right-width border-left-width

border-style:同理

border-color:同理

div {
    width: 300px;
    height: 200px;
    /* border-width 边框的粗细 一般情况下用px */
    border-width: 5px;
    /* border-style 边框的样式 solid实线边框 dashed虚线边框 dotted点线边框 double双线 groove立体效果线 */
    /* border-style: solid; */
    /* border-style: dashed; */
    border-style: dotted;
    /* border-color 边框的颜色 */
    border-color: pink;
}

边框简写：没有顺序

div {
    width: 300px;
    height: 200px;
    /* 边框的复合写法 */
    border: 5px dotted pink;
}

边框分开写法：

div {
    width: 200px;
    height: 200px;
    /* 上边框 */
    border-top: 5px solid red;
    /* 下边框 */
    border-bottom: 5px solid blue;
    /* 左边框 */
    border-left: 5px solid blue;
    /* 右边框 */
    border-right: 5px solid blue;
}

层叠性：

div {
    width: 200px;
    height: 200px;
    /* 层叠性 */
    border: 1px solid blue;
    border-top: 1px solid red;
}

表格的细线边框：

border-collapse: collapse 将相邻边框合并在一起

边框会影响盒子实际大小：

  1. 测量盒子不量边框
  2. 测量盒子包含边框，但需要width/height减去边框宽度
/* 我们需要一个200*200的盒子，但这个盒子有10px的红色边框 */
div {
    width: 180px;
    height: 180px;
    background-color: pink;
    border: 10px solid red;
}

如何让边框不会影响盒子大小：

box-sizing: border-box

article {
    border: solid 2px #ddd;
    width: 300px;
    height: 300px;
    padding: 50px;
    box-sizing: border-box;
}
3.内边距(padding)

边框与内容之间的距离（可以是负值）

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

内边距简写（4种情况）

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 内边距复合写法 */
    /* 上下左右内边距都为5px */
    padding: 5px;
    /* 上下内边距为5px 左右内边距为10px */
    padding: 5px 10px;
    /* 上内边距为5px 左右内边距10px 下内边距为20px */
    padding: 5px 10px 20px;
    /* 上5px 右10px 下20px 左30px （顺时针） */
    padding: 5px 10px 20px 30px;
}

内边距会影响盒子实际大小

需要width/height减去内边距大小

div {
    width: 160px;
    height: 160px;
    background-color: pink;
    padding: 20px;
}

实际开发时都使用padding值控制文字与边框距离，而不使用text-indent

如果盒子没有指定weight/height属性，内边距则不会撑开盒子weight/height

h1 {
    height: 100px;
    background-color: pink;
    padding: 30px;
}

div {
    width: 300px;
    height: 100px;
    background-color: purple;
}

div p {
    /* 宽度默认继承父类 高度默认为0 */
    padding: 30px;
    background-color: skyblue;
}
4.外边距(margin)

控制盒子和盒子之间的距离（可以是负值）

div {
    width: 200px;
    height: 200px;
    background-color: pink;
}

/* .one {
margin-bottom: 20px;
} */

.two {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

<div class="one">1</div>
<div class="two">2</div>

简写和padding一致

外边距的典型应用：让块级盒子水平居中，必须满足两个条件：

  1. 盒子必须指定了宽度（width），不然默认和浏览器宽度一致
  2. 盒子左右的外边距都设置为auto
.header {
    width: 900px;
    height: 200px;
    background-color: pink;
    margin: 0 auto;
}

常见的三种写法：

  • margin-left: auto margin-right: auto
  • margin: auto
  • margin: 0 auto

让行内元素/行内块元素水平居中：给其父元素添加text-align: center

.header {
    width: 900px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    /* 让行内元素/行内块元素水平居中,给其父元素添加text-align: center */
    text-align: center;
}

<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="../Day02/imgs/one.png" alt="">
    </div>
</body>
5.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

  1. 相邻块元素垂直外边距的合并

​ 两个块元素之间的垂直间距不是margin-bottom+margin-top，而是取两个值中的较大者。因此尽量只给一个盒子添加margin值。

.alison,
.ruby {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.alison {
    margin-bottom: 100px;
}

.ruby {
    /* 两个div间垂直边距为200px */
    margin-top: 200px;
}

<div class="alison">Alison</div>
<div class="ruby">Ruby</div>
  1. 嵌套块元素垂直外边距的塌陷

​ 两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

​ 解决方案：

  • 为父元素定义上边框
  • 为父元素定义上内边距
  • 为父元素添加overflow: hidden
.father {
    width: 400px;
    height: 400px;
    background-color: purple;
    margin-top: 50px;
    /* 为父元素定义上边框 */
    /* border: 1px solid transparent; */
    /* 为父元素定义上内边距 */
    /* padding: 1px; */
    /* 为父元素添加overflow: hidden */
    overflow: hidden;
}

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 100px;

}

<div class="father">
    <div class="son"></div>
</div>
6.清除内外边距

网页元素很多都带有默认的内外边距，不同的浏览器不一致。因此在布局前，需要清除网页元素的内外边距。

/* css的第一行代码 */
* {
    margin: 0;
    padding: 0;
}

123
<ul>
    <li>abcd</li>
</ul>

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。但是转换为块级和行内块元素就可以了。

新知识点：去掉li前面的项目符号（小圆点）

7.轮廓线

和边框的不同是：轮廓线不会占用空间

outline:outline-style outline-width outline-color

article {
    margin-top: 100px;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    /* 轮廓线不占用空间位 */
    outline-style: double;
    outline-width: 15px;
    outline-color: #ddd;
    /* outline: solid 15px #ddd; */
}

h2 {
    background: green;
}

* {
    margin: 0;
    padding: 0;
}

<article>
    <div>Yooo</div>
</article>
<h2>Alison</h2>

因为轮廓线不占用空间，因此会将h2遮盖住。

在这里插入图片描述

应用场景：去掉表单自带轮廓线效果

在浏览器中，点击表单会自动加入轮廓线效果，使用outline: none去掉。

input {
    /* 鼠标点击后表单自带轮廓线，可以去掉 */
    outline: none;
}

input:focus {
    /* 获取焦点时 */
    outline: none;
}
8.圆角控制详情使用

border-radius:border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

可简写（左上 右上 右下 左下）px或者百分数

article {
    width: 300px;
    height: 300px;
    border: solid 2px red;
    /* 简写 */
    border-radius: 10px 40px 80px 100px;
    border-top-left-radius: 10px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 80px;
    border-bottom-left-radius: 100px;
    /* 从边20%的位置开始画圆 */
    border-radius: 20%;
    /* 正圆 */
    border-radius: 50%;
}

div>em {
    border-bottom: solid 2px red;
    border-radius: 50%;
}

<body>
    <article>
        <div>Yooo <em>Alison</em></div>
    </article>
</body>

在这里插入图片描述

9.尺寸控制
（1）限制范围

max-width min-width max-height min-height

当图片过大，图片会被置为max-width max-height尺寸；若过小则被置为min-width min-height。

div {
    width: 300px;
    height: 200px;
    border: solid 2px #ccc;
    padding: 30px;
    margin: auto;
}

div img {
    /* 不超过width*90% */
    max-width: 90%;
    max-height: 90%;
    /* 不小于width*50% */
    min-width: 50%;
    min-height: 50%;
}

在这里插入图片描述

在这里插入图片描述

（2）自动撑满父元素可用空间

height/width: -webkit-fill-available

块级元素可直接使用，行级元素需要先转为行内块再使用。

main {
    width: 100vw;
    height: 100px;
    background: purple;
}

div {
    background: orange;
    /* 块级元素可直接使用
    自动撑满父元素main */
    height: -webkit-fill-available;
}

span {
    background: brown;
    /* 行级元素需要先转为行内块 */
    display: inline-block;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

在这里插入图片描述

在这里插入图片描述

（3）自身尺寸根据内容自适应

width:fit-content

宽度由自身内容大小决定。

div {
    background: orange;
    width: fit-content;
    margin: auto;
    padding: 10px;
}

在这里插入图片描述

在这里插入图片描述

（4）父元素盒子根据内容尺寸自适应

width: max-content||min-content

盒子宽度适应盒子内最大/最小元素的宽度

main {
    /* 宽度适应盒子内最大元素的宽度 */
    width: max-content;
    /* 宽度适应盒子内最小元素的宽度 */
    width: min-content;
    height: 100px;
    background: purple;
}

在这里插入图片描述

在这里插入图片描述

10.盒子阴影

box-shadow:水平偏移量 垂直偏移量 模糊度（羽化度） 颜色

div {
    width: 300px;
    height: 300px;
    border: solid 3px #ddd;
    /* 水平偏移量 垂直偏移量 模糊度（羽化度） 颜色 */
    box-shadow: 5px 5px 10px rgba(100, 100, 100, 0.2);
}

在这里插入图片描述

yooo*
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css边框(border)属性
码上行动
04-29 3021
border属性 代码如下： border：边框宽度 边框风格 边框颜色; 如：border:5px solid #555; 属性： （1）边框宽度： border-width:5px; （2）边框颜色： border-color:red; （3）边框样式： border-style:solid/dashed/dotted/double; 实线/ 虚线 /点线 /双线 整体设置： 1个值时：默认为四条边都设置 2个值时：1上下 2左右 3个值时：1上 2左右 3下 4个值时：上 右
HTML5中margin属性应用
大数据-攻城狮
12-09 6551
Document div{ width: 100px; height: 100px; background-color: red; /* 外边距 */ margin-top: 30px; margin-left: 100px; margin-right: 100px;
css盒子模型的外边距和内边距
weixin_52984349的博客
07-12 3994
css盒子模型的外边距和内边距
web前端：选择器，内外边距
weixin_43800846的博客
03-20 1444
盒模型： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; }...
CSS学习笔记 | 盒子模型
Curry_On的博客
10-31 1437
CSS盒子模型 本文内容 CSS盒子模型： 1. 看透网页布局的本质 2. 盒子模型的组成 3. 边框border 3.1 边框属性 3.2 边框的复合写法 3.3 边框分开写法 3.4 小作业 3.5 表格的细线边框 3.6 边框会影响盒子实际大小 4. 内边距padding 4.1 内边距属性 4.2 内边距复合写法 4.3 内边距会影响盒子的实际...
css盒子模型
08-22
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中，我们将探讨盒子模型的各个组成部分...
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
21.4 CSS 盒子模型
09-02
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
CSS盒子模型详解
weixin_46048542的博客
04-05 4万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三
css3之几种盒模型
winson的专栏
09-23 1万+
昨晚回去花了点时间，系统的学习了一下盒模型，现总结如下。 1、盒的基本类型： 在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。 我们之前所学的div元素和p元素属于block类型，span和a属于inline类型。如： 盒的基本类型 /*div{background: green}*/
CSS盒模型
sssnanPl的博客
05-05 440
css盒子模型，就是可以装东西的盒子，比如 div、li、h 等，而 input、img 就不是盒子。 盒模型：包括内容（content）、内边距（padding）、边框（border）、外边距（margin），内容又分为宽（width）和高（height）。 盒模型类型 盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型（border-box） IE盒模型：width 和 height 包含 content、padding、border。 W3C标准盒子模型 W3C标准盒子模型：与IE盒模型不同，宽和
CSS盒模型完整介绍
陈坚泓的博客
03-07 8384
CSS盒模型完整介绍盒模型的认识一、基本概念：标准模型+IE模型二、标准模型和IE模型的区别三、css如何设置获取这两种模型的宽和高四、javascript如何设置获取盒模型对应的宽和高五、外边距重叠六 、BFC推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 盒模型的认识 文章主要有以下内容 基本概念：标准模型+IE模型。 包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何
CSS盒子模型总结
热门推荐
码厩
09-27 6万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...
CSS盒模型（详解）
qq_44171586的博客
03-06 5189
什么是CSS盒模型 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，
最新！CSSCI（2023-2024）期刊目录公布！
最新发布
2301_76900678的博客
07-19 489
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
css盒子模型知识点
12-06
CSS盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域包含了元素的实际内容，内边距是内容区域和边框之间的空白区域，边框是内边距和外边距之间的线条，外边距是边框和相邻元素之间的空白...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值