css盒子模型

真的想不出名儿

已于 2023-06-02 14:58:18 修改

阅读量104

点赞数

分类专栏： css 文章标签： css 前端

于 2023-06-01 22:43:26 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/130996170

版权

css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box。
利用CSS设置好盒子样式，然后摆放到相应位置。
往盒子里装内容

网页布局的核心本质：就是利用CSS摆盒子。

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分

1. 内容-元素溢出

作用：控制溢出元素的内容的显示方式

属性名:overflow

hidden 溢出隐藏

scroll 溢出滚动(无论是否溢出，都显示滚动条位置)

auto 溢出滚动(溢出才显示滚动条位置)

2. 边框

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式边框颜色

border: border-width || border-style ||border-color

边框简写：

border: 1px solid red; 没有顺序

2.1 表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse: collapse

collapse单词是合并的意思
border-collapse: collapse;表示相邻边框合并到一起

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

边框会额外增加盒子的实际大小。两种解决办法：

测量盒子大小的时候不测边框
如果测量的时候包含了边框，则需要width/height 减去边框宽度

2.3 边框制作小三角

<!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>
        .box {
            width: 0;
            height: 0;
            border: 100px solid red;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid transparent;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

小三角朝哪个方向，剩余的三个方向颜色就设置为transparent

要使小三角方向朝下，其他条件不变，只需把左右下的边框颜色设置为透明即可

3. 内边距

padding 属性用于设置内边距，即边框与内容之间的距离

padding: 10px;
/* 上 右 下 左 */
padding: 10px 20px 30px 40px;
/* 上 左+右 下 */
padding: 10px 30px 50px;
/* 上下 左右 */
padding: 10px 30px;

注意：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

4. 外边距

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

① 盒子必须指定了宽度

② 盒子左右的外边距都设置为 auto

.header { width: 960px; margin: 0 auto; }

常见的写法：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内块元素或者行内元素水平居中给其父元素添加 text-align: center 即可

4.1 外边距合并

场景：垂直排列的兄弟元素，上下margin会合并

解决：取两个margin中的较大值生效，尽量只给一个盒子添加 margin 值

4.2 外边距塌陷

场景：父子级的标签，子级添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

取消子级 margin-top，父级设置 padding-top
父级设置 overflow: hidden
父级设置 border-top
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

4.3 行内元素-内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直问题

解决方法：给行内元素添加 line-height 改变元素垂直问题

5. 圆角

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

boeder-radius: 10px;
/* 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;
/* 左上 右上+左下 右下 */
border-radius: 10px 30px 50px;
/* 左上+右下 右上+左下 */
border-radius: 10px 30px;

参数值可以为数值或百分比的形式
如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是一个矩形，设置为高度的一半就可以
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

6. 盒子阴影

作用：给元素添加阴影

属性名: box-shadow

属性值: x轴偏移量 y轴偏移量 模糊半径扩散半径颜色内外阴影;

注意：x轴偏移量和y轴偏移量必须书写

默认是外阴影，内阴影需要添加 inset

7. 文字阴影

text-shadow属性

text-shadow: h-shadow v-shadow blur color;

真的想不出名儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型

盒子模型
复制链接

扫一扫

专栏目录

css盒子模型

1. 内容-元素溢出

2. 边框

2.1 表格细线边框

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

2.3 边框制作小三角

3. 内边距

4. 外边距

4.1 外边距合并

4.2 外边距塌陷

4.3 行内元素-内外边距问题

5. 圆角

6. 盒子阴影

7. 文字阴影

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