HTML & CSS box sizing

た入场券 2022-12-12 12:27 91阅读 0赞

### box-sizing属性介绍 ###

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

即总宽度=margin+width

很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：

1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好  
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

### 实际开发中遇到的和框模型相关的应用及小问题。 ###

1· margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）

以第一个子元素的margin-top 为例：

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：

（1）给父元素加边框border （副作用）

（2）给父元素设置padding值 （副作用）

（3）父元素添加 overflow：hidden （副作用）

（4）父元素加前置内容生成。（推荐）

以第四种方法为例：  
···  
.parent \{  
width : 500px;  
height : 500px;  
background-color : red;  
\}  
.parent : before \{  
content : " ";  
display : table;  
\}  
.child \{  
width : 200px;  
height : 200px;  
background-color : green;  
margin-top : 50px;  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关 box-sizing: border-box；box-sizing:content-box；讲解

box-sizing: border-box;box-sizing:content-box;讲解简介：本文讲解box-sizing: border-box;box-si

淡淡的烟草味﹌/ 2024年03月31日 09:09/ 0 赞/ 86 阅读

相关 css box-sizing

> 原文来源: [老姜博客 css第24讲之css box-sizing][css_24_css box-sizing] `box-sizing`:用来控制padding和b

深藏阁楼爱情的钟/ 2022年12月27日 14:15/ 0 赞/ 130 阅读

相关 HTML & CSS box sizing

box-sizing属性介绍 box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。 b

た入场券/ 2022年12月12日 12:27/ 0 赞/ 92 阅读

相关 css-------box-sizing

一般来说，我们说元素的总宽度是不包括它的边距（margin)的，而box-sizing这个属性就是设置了元素计算宽度的时候应该从哪个位置开始算起，它的默认值为content-b

秒速五厘米/ 2022年09月29日 04:20/ 0 赞/ 14 阅读

相关 css之box-sizing用法

CSS 中的 box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 hei

红太狼/ 2022年08月31日 02:23/ 0 赞/ 122 阅读

相关 HTML/CSS（八）CSS3 Transition,Tranform,box-sizing及浏览器支持

Transition •定义和用法 •transition 属性是一个简写属性，用于设置四个过渡属性： •transition-property •trans

以你之姓@/ 2022年08月08日 14:49/ 0 赞/ 5 阅读

相关 css3的box-sizing

box-sizing: content-box|border-box|inherit; border-box可以将盒子内的border内减

迷南。/ 2022年08月07日 09:41/ 0 赞/ 99 阅读

相关关于CSS3的box-sizing属性

CSS3中有一个属性叫box-sizing，该属性取不同的值会决定box高宽不同的计算方式。 1、content-box(默认值) 这也就是最常规的计算方式，某个box的高

阳光穿透心脏的1/2处/ 2022年06月15日 01:38/ 0 赞/ 172 阅读

相关 box-sizing

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

爱被打了一巴掌/ 2022年06月03日 09:17/ 0 赞/ 154 阅读

相关 css3属性box-sizing:border-box 用法解析

响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。

柔情只为你懂/ 2021年07月04日 23:40/ 0 赞/ 353 阅读