浅谈CSS3 box

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

盒实体模型的构成大伙儿毫无疑问都懂,由里向外content,padding,border,margin.

盒实体模型是有两种规范的,1个是规范实体模型,1个是IE实体模型。

从上面两图可以看出在规范实体模型中,盒实体模型的宽高只是內容(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的特定。內容的宽度和高宽比减去各有彼此该边框和填充的宽度从特定的"宽度"和"高宽比"特性测算

检测参照实例

理想化中的实际效果和编码以下图:

.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;(默认设置的可不写)}

运用在有效 bootstrap架构 的新项目中发现bootstrap.min.css 款式里默认设置box-sizing: border-box; 会影响检索框的宽高

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

这个特性致使网页页面出現的模样:

.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;}

这个情况下要想完成理想化中的实际效果务必把款式调剂成:

.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技能: 当1个器皿宽度界定为 width:100%; 以后,假如再提升 padding 或 border 则会外溢父器皿,是向外扩大的

假如应用该款式,特定为box-sizing: border-box; 则 padding 和 border 就不容易再外溢,而是向内收拢的,这个实际效果觉得十分好用的

总结

以上所述是网编给大伙儿详细介绍的浅谈CSS3 box-sizing 特性 趣味的盒实体模型 ,期待对大伙儿有一定的协助,假如大伙儿有任何iwen欢迎给我留言,网编会立即回应大伙儿的!