CSS box-sizing 两种属性 border-box,content-box

box-sizing 是什么？

css的盒子模型box model 不会将padding与border计算到容器（如div）的宽高中的，

这就导致你所设定的容器宽度未必是最终宽度（需要加上padding与border）.

因此有了box-sizing：border-box的设定，其效果就是将padding和border纳入容器宽高

如何应用box-sizing

多用与所有css选择器，一般都在reset.css里直接指定

*{
box-sizing:border-box;
}

相对于border-box，原本的不计算padding与border的称为：content-box.

用 * 设置的问题是box-sizing是不被继承的，如果需要在某些地方用回content-box，

这个content-box内部的容器依然会是border-box;

可以这样设置

html{
box-sizing:border-box;
}
*,
*::before,
*::after{
box-sizing:inherit;
}

*::before 和*::after 也被加进来，并且所有元素都会继承上级的设定。

注：

bootstrap 推翻了这一设定，

理由：

chrome 中 details 无法正确继承父级的box-sizing，

bootstrap的做法，放弃继承的部分：如下：

*，
*::before,
*::after{
box-sizing:border-box;
}

chrome 存在的这个问题影响很小，所以就这个考虑而言，不推荐bootstrap的做法，

::after 是css3 的写法要考虑兼容问题还是写 :after

CSS box-sizing 两种属性 border-box,content-box相关推荐

CSS初始化的两种常见方法
CSS初始化的两种常见方法两种CSS初始化的常见方案,都是通用类的 CSS reset Eric Meyer写的 CSS reset,源码不是很长: /* http://meyerweb.com/e ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
JSP页面中的pageEncoding和contentType两种属性
关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容 ...
html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言比较基础的图标加载:和块元素的背景background ...
服务器产品的特质和优势,亿速云裸金属服务器兼具“弹性”和“裸金属”两种属性，既有虚拟机的弹性，同时又保留了裸金属的一切性能、特性和优势！...
(原标题:亿速云裸金属服务器兼具"弹性"和"裸金属"两种属性,既有虚拟机的弹性,同时又保留了裸金属的一切性能.特性和优势!) 今天,我们来讲一讲亿速云弹性计算服 ...
java定义一个长方形类，该类中具有长方形长宽两种属性，并具有相应的构造方法属性访问方法，计算长方形的周长和面积的方法，要求输出长是5，宽是4的长方形
定义一个长方形类,该类中具有长方形长宽两种属性,并具有相应的构造方法属性访问方法,计算长方形的周长和面积的方法,要求输出长是5,宽是4的长方形 public class test3 {public ...
CSS overflow的几种属性值
CSS overflow的几种属性值 visible: 默认值.内容不会被修剪,会呈现在元素框之外 hidden: 内容会被修剪,并且其余内容是不可见的 scroll: 内容会被修剪,但是浏览器会显示 ...
按要求编写一个Java应用程序：（1）定义一个类，描述一个矩形，包含有长、宽两种属性，和计算面积方法。（2）编写一个类，继承自矩形类，同时该类描述长方体，具有长、宽、高属性
(1)定义一个类,描述一个矩形,包含有长.宽两种属性,和计算面积方法. public class Jvcs {private int Long; //长private int wide; //宽pub ...
定义一个类，描述一个矩形，包含有长、宽两种属性，和计算面积方法。
题目: 按要求编写一个Java应用程序: (1)定义一个类,描述一个矩形,包含有长.宽两种属性,和计算面积方法. (2)编写一个类,继承自矩形类,同时该类描述长方体,具有长.宽.高属性, 和计算体积的 ...
HTML中写CSS代码的两种方法
在HTML中写CSS代码也两种方法. 写在HTML标签里使用CSS前 <h1>这是一个标题 </h1> 使用CSS后 <h1 style="color:red ...

CSS box-sizing 两种属性 border-box,content-box

box-sizing 是什么？

如何应用box-sizing

可以这样设置

注：

CSS box-sizing 两种属性 border-box,content-box相关推荐

最新文章

热门文章