浅谈CSS3 box-sizing 属性 有趣的盒模型


Posted in HTML / CSS onApril 02, 2019

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.

盒模型是有两种标准的,一个是标准模型,一个是IE模型。

浅谈CSS3 box-sizing 属性 有趣的盒模型

浅谈CSS3 box-sizing 属性 有趣的盒模型

从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高,

而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

css如何设置两种模型

这里用到了CSS3 的属性 box-sizing(默认值:content-box)

/* 标准模型 */ 
 box-sizing:content-box;
  /*IE模型*/
 box-sizing:border-box;

content-box: 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box: 指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算

测试参考案例

理想中的效果和代码如下图:

浅谈CSS3 box-sizing 属性 有趣的盒模型

.input { width: 146px; height: 36px; line-height: 36px; background: transparent; border: 2px solid #0D349A; color: #bdbdbd; padding-left: 10px; padding-right: 30px; font-size: 14px;
box-sizing:content-box;(默认的可不写)}

浅谈CSS3 box-sizing 属性 有趣的盒模型

应用在有用 bootstrap框架 的项目中发现bootstrap.min.css 样式里默认box-sizing: border-box; 会干扰搜索框的宽高

* { -webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
 box-sizing: border-box;}

这个属性导致页面出现的样子:

浅谈CSS3 box-sizing 属性 有趣的盒模型

.input { width: 146px; height:
 36px;
 line-height: 36px; 
background: transparent; 
border: 2px solid #0D349A;
 color: #bdbdbd; padding-left: 10px;
 padding-right: 30px; 
font-size: 14px; box-sizing:border-box;}

浅谈CSS3 box-sizing 属性 有趣的盒模型

这个时候想要实现理想中的效果必须把样式调整成:

.input { width: 190px;
 height: 40px; line-height: 
40px; background: transparent; 
border: 2px solid #0D349A;
 color: #bdbdbd; padding-left: 10px; 
padding-right: 30px;
 font-size: 14px; 
box-sizing:border-box;}

PS技巧: 当一个容器宽度定义为 width:100%; 之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的

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

总结

以上所述是小编给大家介绍的浅谈CSS3 box-sizing 属性 有趣的盒模型 ,希望对大家有所帮助,如果大家有任何iwen欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 #HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 #HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 #HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 #HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 #HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 #HTML / CSS
You might like
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
python 实现图片裁剪小工具
2021/02/02 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
银行实习生的自我评价
2013/12/09 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
出差报告范文
2014/11/06 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python使用Web框架Flask开发项目
2022/06/01 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL