css 自动换行_前端CSS的box-sizing属性讲解与应用场景

最新推荐文章于 2024-07-03 14:06:55 发布
最新推荐文章于 2024-07-03 14:06:55 发布
阅读量559 收藏
点赞数
文章标签： css 自动换行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35774446/article/details/112116545
版权

box-sizing是什么？

box-sizing是定义元素宽度与高度范围的属性，简单点说：当我们在开发自适应布局的时候，经常会出现DIV的边框而导致DIV自动换行。

6891fb674fc5e4d0b385547bf1cbe421.png

从上图可知，当我们设置两个DIV 分别为宽度200的时候，在加上边框各自2px无法满足同一水平线对其，因此只能换行处理。

c870189b47ff9b0d21b22f0443b89c67.png

当我们将父边框body属性设置404，即包含各自DIV的两个边框1px像素时候，能满足水平对其。

现在问题来了，由于某些原因，我们就一定要求父边框400像素同时水平对其两个DIV。

我们可以设置box-sizing:border-box属性。它的含义是将边框和内边距包含在我们设置的200px单位内。因此可以满足400像素父边框，同时子边框200像素，水平对其。

83ae8b34b955de8abeaabe3eb998fec8.png
4a897678264a8240d79d1882ff61aa25.png

应用的场景，这种东西一般应用在自适应的布局界面，如购物车，列表等左右对齐的布局

a25d147ba609b116ec78d80ca691c094.png

总结

前端CSS的box-sizing属性，可以帮助我们快速的根据设计图开发页面布局，不在需要填写完固定宽度后，然后在加入边框从而导致自动换行的出现，有了这个属性，我们可以减少了设置width与height的长度单位去计算加减边框，反复修改数值的操作麻烦步骤，从而大大加强了我们开发页面速度的效率

Shepherd Young
关注
CSS | box-sizing的解析与应用场景
MGsniper的博客
01-21 2952
文章目录box-sizing 定义1.content-box2.border-box应用场景需求使用border-box注意附 box-sizing 定义  box-sizing 属性规定了一个元素用于计算元素宽度和高度的CSS 盒子模型。  目前box-sizing的关键字值只有两个，一个是content-box，另一个是border-box。  我们在absolute定位下宽高的百分比设定一文...
css3 box-sizing属性使用参考指南
12-01
CSS3的`box-sizing`属性是一个非常重要的样式规则，它允许开发者改变元素的盒模型，从而更好地控制元素的布局和尺寸。盒模型是CSS布局的基础，理解`box-sizing`属性对于构建响应式和灵活的网页设计至关重要。 在CSS...
css中box-sizing的使用场景
xu3tu的博客
01-24 1902
首先，要知道box-sizing是用来干啥的：改变盒模型中宽度和高度的定义范围。  border-box: width = content + padding + border ，也就是IE的盒怪异模式。  content-box:width = content 正常模式 使用场景分析：当需要以content + padding + border为整体的时候使用border-box，例如
CSS 实现自动换行、强制换行、强制不换行的属性
最新发布
老高的博客
07-03 191
这样的设置可以帮助你在HTML中控制文本的显示方式，特别适用于需要在有限空间内显示长文本内容的情况。
css box-sizing 使用场景
枫的博客
12-26 3560
1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。2、bor
CSS3中box-sizing属性的作用以及应用场景
anmeiba2865的博客
10-18 358
盒模型box-sizing: 取值 1.content-box 默认值，标准盒模型，设置宽度为内容宽度，实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度 2.border-box 设置宽度等于元素内容宽度，content包含了元素的border和padding 3.inherit 继承父元素的盒模型模式 兼容 iE8+ 解决问题： 边框和填充被计算到盒模型内，不会破坏布局 转...
box-sizing的使用
不爽的麻雀的博客
10-26 327
HTML: <div class="box"></div> CSS .box{ box-sizing: border-box; /*box-sizing: content-box;*/ /*box-sizing: inherit;*/ width: 80px; background-color: #0055aa; margi...
CSS3 box-sizing属性详解
12-13
box-sizing属性包括content-box（default），border-box，padding-box。  1、content-box，border和padding不计算入width之内  2、padding-box，padding计算入width内  3、border-box，border和padding计算入...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定...
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
css3 盒模型以及box-sizing属性全面了解
12-13
渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界...
【前端】解决盒子被撑大问题 box-sizing
萌狼蓝天の技术栈
03-11 1336
设置 box-sizing:border-box(原本的默认值为:content-box) box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/ box-sizing: border-box;/*盒子的宽度=css中设置的width*/ 实例对比 <!DOCTYPE html> <html lang="en"&...
自动计算盒子的宽高， box-sizing属性介绍。
weilai_a的博客
11-29 458
我们前端工作者在写项目的静态页面时，页面中某一部分的宽度高度是200px,此时就是指这个盒子本身的大小就是一个200*200的盒子（包括边框，内边距，外边距）。但我们写的时候会先给盒子宽高分别是200px,然后根据项目的实际要求设置边框线和内外边距(如果此时四个内边距都是相同的宽度，会简单一些，如果每个边的宽度都不同，那就比较麻烦了)，此时盒子总体的大小就改变了。为了解决这一问题，有了box-sizing这个属性，使用最频繁的属性值是：border-box 给大家上一段代码 .box{ .
浅谈box-sizing的用法
xi_2130的博客
09-21 1707
box-sizing，css3新属性，为了改变ie浏览器的盒模型遗留的width（名副其实）bug属性：content-box | border-box两种属性的用法和区别：<!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <style type="text/css"> *{
box-sizing 一个小例子搞懂它
weixin_34077371的博客
09-21 116
2019独角兽企业重金招聘Python工程师标准>>> ...
css布局box-sizing使用
Hello,你好!
04-05 1521
div{  box-sizing:border-box; width:200px; padding:20px; border:1px solid red; }   这段css的意思是说，div宽度为200px,边框为1px，左右空白边距是20px,时间内容宽度自适应，是200-2-20*2=158px;   如果box-sizing的值为content-box,说明设置的是内容区
css-布局- box-sizing 的含义及作用
热门推荐
我有一个梦想的专栏
06-11 1万+
含义 了解过前端的同学都知道前端控制样式使用典型的盒子模型, 盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content; box-sizing 就是指定盒子的大小和结构的。 它支持三种值： box-sizing: content-box; //默认值 内容真正宽度 = 设置的宽度 box-sizing: border-box; // 内...
box-sizing属性的使用方法
WhoWrongsWhere的专栏
01-19 1989
定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 默认值： content-box 继承性： no 版本： CS
box-sizing什么时候用？常用的值都有什么？
weixin_33845477的博客
11-24 675
一般在做自适应的网页设计的时候用，用这个属性网页结构才不会被破坏。 常用的值： 1. content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。 2. border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 3. inherit：规定应从父元素...
CSS盒模型与box-sizing属性解析
"这篇文章主要汇总了CSS面试中的关键知识点，特别是盒模型以及`box-sizing`属性的使用。" 在前端开发中，CSS是用于样式化和布局网页的重要工具。盒模型是理解CSS布局的基础，它定义了元素在网页上占用的空间。CSS3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值