0
0

[前端]CSS盒子模型&布局

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，“Box-Model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其他元素和周围元素边框之间的空闲位置放置元素。

下面的图片说明了盒子模型（Box Model）：

在这里插入图片描述

每一部分的说明：

  • Margin（外边距）清除边框外的区域，外边距是透明的。
  • Border（边框）围绕在内边距和内容外的边框。
  • Padding（内边距）清除内容周围的区域，内边距是透明的。
  • Content（内容）盒子的内容，显示文本和图像。

不同区域的相关属性

content

width, height，一般来说就是这两个指标

padding
/* 以上边界为开始顺时针旋转，没有值则和该边界的对称边界取相同值 */div{padding: 30px;padding: 30px 20px;padding: 30px 20px 10px;padding: 30px 20px 10px 0px;}/* 单独对一个方向进行设置 */div{padding-top: 40px;padding-bottom: 60px;padding-left: 60px;padding-right: 90px;}
border
/* 拆分的属性 */div{border-style: dashed;border-color: red;border-width: 10px;}/* 简化的写法(无顺序要求) */div{border: 10px dashed red;}/* 对不同方向的样式 */div{border-top-style: solid;border-bottom-color: blue;border-left-width: 2px;}
margin

margin属性，设置盒子整体与外部的距离，用法和padding的区别是可以设置auto

div{margin: 10px auto;}

padding中无auto

通过对width和height的定义的不同可以大致分为两种

现在主流浏览器使用的是W3C标准规定的盒子模型

W3C的标准盒子模型

在这里插入图片描述

IE盒子模型（非标准）

在这里插入图片描述

CSS元素的分类

  1. 块级元素：独占一行，对宽度，高度支持 display:block
  2. 内联元素：不独占一行，对宽度高度不支持；内容多长占据多大的空间 diaplay:inline
  3. 内联块级元素：不独占一行，但是对宽度高度支持 display:inline-block

对于块级元素拥有自带属性

display:block

对于内联元素拥有自带属性

display:inline

对于内联块级元素拥有自带自带属性

display:inline

布局

一、float普通的盒子类型

是一种横着的布局：float普通盒子类型

常用的就两种：左浮动和右浮动

.right{width: 700px;height: 200px;background-color: blue;float: right;}

会产生的问题

  1. 用了float之后，所在的父级元素无高度的情况下会导致下方元素向上移动

在这里插入图片描述

解决这个问题可以给父级元素设置高度或者将溢出的部分隐藏

  1. 元素之间的间距均匀分布需要计算，而且不一定能均分

二、内联元素&内联块级元素

这布局我有二不用

在这里插入图片描述

一、我不用span，因为他没办法调整高度很局限

二、我不用内联块级元素，因为他会识别换行符导致产生空白很不美观

三、flex弹性盒子属性（推荐）

只要设置父级元素display: flex就可以让父元素随着子元素的高度变化

子元素始终横着布局甚至压缩自身空间，这就是弹性盒子的体现

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>.flexBox{display: flex;width: 100%;height: 500px;background-color: chocolate;}.child{width: 100%;text-align: center;}.child:nth-child(even){background-color: aqua;}.child:nth-child(odd){background-color: brown;}</style><title>弹性盒子Demo</title></head><body><divclass="flexBox"><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div></div></body></html>

在这里插入图片描述

在布局中，我们常常通过改变flex盒子的排列方向以达到我们设计的占比，也就是控制子元素的排列方式

控制子元素横向排列方式：flex-direction

flex-direction 设置弹性盒子内子元素的排列方向 ，默认row（横着从左到右），row-reverse(横着从右到左), column(靠左从上到下)，column-reverse(靠左从下到上)

控制子元素换行：flex-warp

flex-warp 设置弹性盒子内子元素换行方式（横着的时候才能讨论是否换行），默认nowarp(不换行） warp（换行）（作用到弹性盒子上）

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>.flexBox{display: flex;flex-wrap: wrap;width: 100%;height: 500px;background-color: chocolate;}.child{width: 20%;text-align: center;}.child:nth-child(even){background-color: aqua;}.child:nth-child(odd){background-color: brown;}</style><title>弹性盒子Demo</title></head><body><divclass="flexBox"><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div><divclass="child">这是一个弹性盒子的孩子</div></div></body></html>

在这里插入图片描述

控制子元素的顺序：flex-order

order设置在display为flex的类上，order的值越小排序越优先靠前

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>.flexBox{display: flex;flex-wrap: wrap;width: 100%;height: 500px;background-color: chocolate;}.child{width: 20%;text-align: center;}.child:nth-child(even){background-color: aqua;order: 1;}.child:nth-child(odd){background-color: brown;}</style><title>弹性盒子Demo</title></head><body><divclass="flexBox"><divclass="child">这是一个弹性盒子的孩子1</div><divclass="child">这是一个弹性盒子的孩子2</div><divclass="child">这是一个弹性盒子的孩子3</div><divclass="child">这是一个弹性盒子的孩子4</div><divclass="child">这是一个弹性盒子的孩子5</div><divclass="child">这是一个弹性盒子的孩子6</div><divclass="child">这是一个弹性盒子的孩子7</div><divclass="child">这是一个弹性盒子的孩子8</div><divclass="child">这是一个弹性盒子的孩子9</div><divclass="child">这是一个弹性盒子的孩子10</div><divclass="child">这是一个弹性盒子的孩子11</div><divclass="child">这是一个弹性盒子的孩子12</div><divclass="child">这是一个弹性盒子的孩子13</div></div></body></html>

这是不设置order的排列方式

在这里插入图片描述

设置后

在这里插入图片描述

控制子元素的拉伸/压缩比例：flex

flex 设置弹性盒子内子元素的压缩比例/拉伸比例（作用到弹性盒子子元素上）
flex是复合属性，由flex-grow（拉伸因子）,flex-shrink（压缩因子）,flex-basis（基准宽度）三个属性组成
复合属性可以简写

.container{flex-grow: 1;flex-shrink: 2;}/* 上述写法等价于 */.container{flex: 1 2;}/* 若值拉伸压缩比例相同 */.container{flex: 2;}

存中…(img-agDs65Pl-1723017199791)]

控制子元素的拉伸/压缩比例：flex

flex 设置弹性盒子内子元素的压缩比例/拉伸比例（作用到弹性盒子子元素上）
flex是复合属性，由flex-grow（拉伸因子）,flex-shrink（压缩因子）,flex-basis（基准宽度）三个属性组成
复合属性可以简写

.container{flex-grow: 1;flex-shrink: 2;}/* 上述写法等价于 */.container{flex: 1 2;}/* 若值拉伸压缩比例相同 */.container{flex: 2;}
标签： 前端 css
本文转载自: https://blog.csdn.net/Coniary/article/details/140994199
版权归原作者 Coniary 所有， 如有侵权，请联系我们删除。
登录后发布评论

“[前端]CSS盒子模型&布局”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

基于微信小程序的科学健身助手的设计与实现

自动驾驶车载SoC设计功能安全

量化交易系统开发-实时行情自动化交易-3.4.3.4.期货衍生数据

XCVU13P板卡设计原理图：509-基于XCVU13P的4路QSFP28光纤PCIeX16收发卡

近期两篇NeRF/3DGS-based SLAM方案赏析：TS-SLAM and MBA-SLAM

uni-app Vue3语法实现微信小程序样式穿透uview-plus框架

21.3D surface

文章导航