CSS之box-sizing的用处简介

简介:

前几天才发现有 box-sizing 这么个样式属性。研究了一番感觉非常有意思,

通过指定容器的盒子模型类型,达到不同的展示效果

比如:当一个容器宽度定义为 width:100%;  之后。假设再添加 padding 或者 border 则会溢出父容器,是向外扩张的




假设使用该样式。指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉很有用。





特别是 input 和 textarea 等 如今设置 100% 再直接添加内边距和边框也不用再进行复杂的计算和适配了








本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5060504.html,如需转载请自行联系原作者

相关文章
|
前端开发
前端基础 - CSS简介
前端基础 - CSS简介
55 0
|
5月前
|
前端开发 JavaScript 开发者
CSS进阶 - CSS Modules与预处理器简介
【6月更文挑战第17天】前端开发中,CSS Modules和预处理器(如Sass、Less)解决了大规模项目中CSS的管理难题,提升代码复用和维护性。CSS Modules提供局部作用域的类名,避免全局冲突,而预处理器扩展CSS功能,使代码更像编程语言。常见问题包括命名冲突和过度嵌套,可通过自动哈希、少嵌套、合理变量规划来解决。结合两者使用,遵循模块化和适度预处理原则,集成到构建工具中,能优化开发流程。这些技术是现代前端不可或缺的工具。
61 2
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
6月前
|
前端开发 容器
简介CSS
简介CSS
41 4
|
17天前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。
|
3月前
|
前端开发
CSS简介
【8月更文挑战第24天】
29 2
|
4月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
28 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
5月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
5月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
48 1
|
5月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
74 1