CSS样式——盒子模型

已于 2022-04-01 18:28:20 修改
阅读量1.1k 收藏 5
点赞数 1
分类专栏： web前端 文章标签： css css3
于 2022-04-01 09:14:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42828394/article/details/123810534
版权

盒子模型

一、什么是盒模型

每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成

二、组成

1. width 宽度

2. height 高度

3.padding 内边距

(1).1-4个值
(2).按顺时针赋值
(3).从上开始

padding-top
padding-right
padding-bottom
padding-left

p{
    padding:50px,60,px,40px,30px;
    <!-- 内边距的值顺时针依此变成了50px，60px，40px，30px -->
}
/* 可以单独设置某一个，也可以按顺时针的顺序依次设 */
/* 如果不满四个则逆向 */
div{
	padding:50px,60px,30px;
	<!-- 内边距的值顺时针依此变成了50px，60px，30px，40px-->
}

4.borfer

复合属性

border-width
border-style:solid(实线)；dashed(虚线);dotted(点线);double(双线)。
border-color

div{
	border:10px soild skyblue;
	/*上下左右可以单独设置，宽度，样式，颜色也可以单独设置*/
	border-reght:5px dashed red
	border-top-color: yellow
}
<!-- border和padding会增加盒模型面积-->
/*盒模型面积：*/
s=(bl+pl+width+pr+br)*(bt+pt+height+pb+bb)

圆角

div{
	/*圆角*/
	border-radius:20px
	/*若参数是50%以上，且宽高比为1：1则为圆形否则为椭圆。若参数是50%以下则是圆角矩形*/
	/*会根据不同的参数来改变图形的形状*/
	/*同理也可以设置单一角*/
	border-top-right-radius:50px;
	
}

三角形

<!-- 三角形-->
div{
	border:25px soild pink;
	border-right-color:red;
	border-top-color:blue;
	border-bottom-color;yellow;
	/*会发现颜色分割时是斜着的，这是我们将宽度高度设置为0就可以得到四个三角形*/
	weight：0
	height：0
	/*此时只需我们将其他三角形的颜色边成透明色即可得到想要的三角形*/
	也可以通过刚刚的步骤使三角形变成扇形，大家自己试一下。
}

5.margin 外边距

(1).1-4个值
(2).按顺时针赋值，从上开始

外边距指的是盒子与盒子之间的距离

padding-top
padding-right
padding-bottom
padding-left

p{
    margin:50px,60,px,40px,30px;
    <!-- 外边距的值顺时针依此变成了50px，60px，40px，30px -->
}
/* 可以单独设置某一个，也可以按顺时针的顺序依次设 */
/* 如果不满四个则逆向 */
div{
	margin:50px,60px,30px;
	<!-- 外边距的值顺时针依此变成了50px，60px，30px，40px-->
}

(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>margin</title>
</head>
<style>
    div{
        width: 100px;
        line-height: 100px;
        background-color: aqua;
        margin-bottom: 80px;
    }
    p{
        width: 100px;
        line-height: 100px;
        background-color: aquamarine;
        margin-top: 150px;
    }
</style>
<body>
    <div>CSDN</div>
    <p>CSDN</p>
</body>
</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>margin</title>
</head>
<style>
    body{
        background-color: pink;
    }
    .fa{
        width: 300px;
        height: 300px;
        background-color: cyan;
    }
    .son{
        width:100px;
        height: 100px;
        background-color: gold;
        /* margin-top: 50px; */
    }
</style>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</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>margin</title>
</head>
<style>
    body{
        background-color: pink;
    }
    .fa{
        width: 300px;
        height: 300px;
        background-color: cyan;
    }
    .son{
        width:100px;
        height: 100px;
        background-color: gold;
        margin-top: 50px;
        
    }
</style>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

原因：常态下，父级的第一个子级标签是个块标签，并使用看margin或者margin-top

解决方案：

  1. 在父级使用border（会改变盒模型面积）
  2. 在父级将margin-top改为padding-top（面积会更改需要高边高度）
    3.在父级添加 overflow：hidden（隐藏溢出）

overflow:hidden的作用

  1. 隐藏溢出
  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>test</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: cyan;
            margin: 10px;

            padding: 10px;
            border: 10px solid gold;   
        }
        .d2{
            /* 怪异盒模型 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>

怪异盒模型

四、浮动

定义

定义：元素脱离文档、按照指定方向发生移动，遇到父及边界环行

取值

none 不浮动
left 左浮动
right 右浮动
inherit 继承父级

作用

解决水平布局问题

<!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>浮动</title>
    <style>
        div,span{
            width: 100px;
            height: 100px;
            color: aliceblue;
            font-size: 30px;
            text-align: center;
            line-height: 100px;

            /* 浮动 */
            float: left;
        }
    </style>

</head>
<body>
    <div style="background-color: tomato;">A</div>
    <div style="background-color: greenyellow;">B</div>
    <div style="background-color: skyblue;">C</div>

    <span  style="background-color: tomato;">a</span>
    <span  style="background-color: greenyellow;">b</span>
    <span  style="background-color: skyblue">c</span>
</body>
</html>

在这里插入图片描述

特性

所有的表情都会同排显示
行标签支持所有CSS样式
默认内容撑开行高
元素脱离文档流

五、清除浮动

为什么要清除浮动

清除浮动前demo

<!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>清除浮动</title>
    <style>
        .first{
            background-color: skyblue;
        }
        .first div{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .second{
            height: 300px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="first">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="second"></div>
</body>
</html>

在这里插入图片描述

蓝色区域消失
元素在使用浮动后会脱离文档流，父级元素检测不到子级元素的存在
高度无法撑开

解决方案

  1. 在父级使用height (拓展性不太好)
  2. 在父级使用overflow：hidden (够直接，省掉了其他不相关的操作)
  3. 使用clear （需要添加一个空样式）

清除浮动后demo

用height时demo
<!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>清除浮动</title>
    <style>
        .first{
            background-color: skyblue;
            height: 200px;
            /* overflow: hidden; */

        }
        .first div{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .second{
            height: 300px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="first">
        <div>1</div>
        <div>2</div>
        <div>1</div>
        <div>2</div>
        <div>1</div>
        <div>2</div>
        <div>1</div>
        <div>2</div>
        <!-- <section style="clear: both;"></section> -->
    </div>
    <div class="second"></div>
</body>
</html>

在这里插入图片描述

用overf：hidden；或clear时的demo

在这里插入图片描述

今年夏天.
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中盒子样式设置及浮动特性
yoghurt&girl的博客
06-06 2388
在CSS3中我们新增了圆角边框样式，这样我们可以使盒子变为圆角。注意：默认的是外阴影，但是不可以写outset这个单词，否则会造成外阴影无效。盒子阴影不占用空间，不会影响盒子的排列。 效果图： 在CSS3中我们可以通过box-sizing来指定盒子模型，它有两个属性值，content-box、border-box。盒子计算分为了两种情况：box-sizing：content-box（盒子大小）：width+padding+border 以前盒子默认大小组成border-sizing：border
CSS篇十六——盒子模型之边框
Regina_Cai的博客
11-16 3819
* border-style 边框样式 solid实线边框 dashed虚线边框 dotted点线边框 */所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。边框有三部分组成：边框宽度、边框样式以及边框颜色。/* border-width 边框的粗细，一般情况下都用 px *//* 利用层叠性，上述写法可以实现但过于麻烦 *//* border-color 边框颜色 *//* 边框的复合写法 简写： *//* 注意 不能颠倒顺序 *//* 合并相邻的边框 */
CSS样式----盒子模型（图文详解）
07-29 1095
盒子模型 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。padding：内边距。border：边框。margin：外边距。 盒子模型的示意图：
CSS盒子模型
weixin_64294248的博客
07-27 960
盒子模型，实际上就是指标签的外边距、边框、内边距、内容所组成的思维模型，这个模型可以直观的展示标签的尺寸、间距。盒子的实际大小：边框(border) + 内边距(padding) + 内容(文本/width/height)。我们可以通过F12或者鼠标右击检查来观察盒子模型，其中，我们选中某个元素时显示蓝色的区域就是内容，橙色区域是外边距；在选中的元素范围内，蓝色区域以外的绿色区域是内边距。
盒子模型代码_老生常谈的盒模型。
weixin_39671631的博客
12-01 272
这里我尽量用少一点的言语把这事儿给说清楚，尽量不拿代码说事儿。1、盒模型有几种？答：有两种盒模型，分别是IE盒模型（border-box） 和 W3C标准盒模型（content-box）。2、为什么会有盒模型？答：为了方便Web前端工程师掌控浏览器世界里最基本的盒子元素，所以盒子只是一个比喻，真正说的是其内在的呈现方式和计算方式。在浏览器世界里，所有HTML元素可以看作盒子，在CSS中，"box ...
CSS——盒子模型,元素的类型和转换
hi_Celia的博客
12-02 1563
进行网页布局的重要的属性，一个页面由多个盒子组成，每个盒子的内容都不相同 1、盒子的特性： (1)外边距(margin)：盒子与其他元素之间的额距离 (2)内边距(padding)：也称为填充距离,内容和边框之间的距离 (3)边框(border) ...
css基础(3)——盒子模型，标签分类
qq_51913153的博客
05-16 677
1.盒子模型 css处理网页时，会认为每个标签都包含在一个不可见的盒子中 把每个标签看做一个盒子，那么定义布局实质上就是将每个盒子摆放到网页中相应的位置种，即可完成布局 一个盒子分为四部分，假如将一个教室看做一个盒子 ——内容区：存放标签中的内容与标签,width与height的实际设置的区域（就相当于教室中桌椅的位置） ——内边距：内容区与边框之间的距离（可看做教室过道） ——边框：内边距与外边距之间的距...
用盒子模型的html代码,HTML/CSS基础课程笔记————盒子模型篇
weixin_39530838的博客
06-07 1470
——————————————————————————盒子模型———————————————————————————————盒子模型=网页布局的基石( 文本，图像，音频，视频等)，还能控制盒子与内容还要盒子与盒子之间的距离盒子模型由4个部分组成：边框(border)外边距(margin)内边距(padding)边框，外边距，内边距是盒子模型的特性也就是盒子模型的属性盒子中的内容(content)盒子...
CSS——盒子模型
s310040799的博客
08-11 362
在我学习CSS视频的时候，发现所有的元素都是由一个个的盒子模型包围着的，它们是我们使用CSS实现准确布局，处理元素排列的关键，因此今天就来写篇博客总结下。 盒子模型分为两种——块级盒子模型（Block box）和 内联盒子模型（Inlinebox） 为什么要这么区分呢，是因为这两种盒子模型会在页面流和元素之间的关系上表现出不同的行为 块级盒子模型（Block box） 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味
盒子模型代码
10-09
简单的html代码，盒子模型，只是大概的描述下盒子模型的例子
CSS样式中的盒子模型
WiniceS的博客
06-24 1382
盒子模型概述
盒子模型的宽度计算问题, 有什么问题，及解决方案
热门推荐
ForestCat的专栏
09-16 1万+
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是ie 盒子模型和标准 w3c 盒子模型。 标准W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 从上图可以看到 IE 盒子模型的范围
css样式基础之盒子模型
u011006044的专栏
09-07 1152
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。 在w3c中，有这样一幅图： 每个元素都有盒子模型，其实这东西了解起来也简单：把元素想象成一个衣柜，我们在衣柜中放的衣服其实就是图中的元素，衣服跟衣柜之间的空隙其实就是内边距，衣柜的
盒子模型代码_css盒模型
weixin_39900676的博客
11-29 789
目录普通盒模型一个盒子模型包括以下东西怪异盒模型ie6兼容性问题什么是css hack盒子高度不能低于默认字体高度普通盒模型CSS 盒子模型(Box Model)，所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间...
盒子模型代码_你真的了解盒模型吗？
weixin_39530833的博客
11-24 575
其实在文档解析过程中每个元素都会被描述为一个盒模型，然后一个盒子套进另外一个盒子，又会按照某种神秘的规则摆放，最后才形成了井井有条的页面。简单盒模型通常情况下，被更多人认知的盒模型就是简单盒模型，简单盒模型在早期IE时期有一种怪异模式下的解析方式，也就是现在的border-box，后来W3C制定的标准以后规定在标准解析模式下使用标准盒模型(content-box)。然后在CSS3推出的时候，增加了...
CSS盒子模型【怪异盒模型、定位看这一篇就够了！！！】
最新发布
zheshiyangyang的博客
08-26 829
也就是盒子里面能留给子元素的宽度和高度大小，也就意味着盒子里面的内容的最大面积就是width和height形成的矩阵面积。将盒子的左右两边的margin都设置为auto，盒子将水平居中。
CSS进阶：盒子模型与元素定位
在JavaScript和CSS的结合中，我们可以利用JavaScript来改变CSS样式，实现动态效果，例如响应用户操作、动画效果等。此外，理解块元素和内联元素的区别也很关键。块元素（如`<div>`、`<p>`）占据整个宽度并新起一行，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值