企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

css3 box-sizing: border-box属性解决日常开发遇到的小问题

HTML CSS 码云 47℃ 0评论
目录
[隐藏]

input和select宽度不一致

在项目中我们写页面的时候,经常会遇到表单与表单之间的宽度不一致问题,比如下面的input和select,总是input比select长那么一点点,为什么呢?

box-sizing: border-box属性解决日常开发遇到的小问题

还有就是input与自定义div下拉框宽度不一致问题

box-sizing: border-box属性解决日常开发遇到的小问题

遇到这种情况,大家肯定会想到去调整他们之间的宽度width,然而并没有什么卵用

原因就出在了:input、select默认的样式是不同的,你无法通过直接改变width值去覆盖掉原来的默认样式,所以需要我们用到css3添加一个属性box-sizing: border-box;

input,select{
    box-sizing: border-box;
}

这个时候input和select宽度就一致:

input和select宽度就一致

如果是input搭配div就可以直接对div添加属性box-sizing: border-box;效果也是一样:

box-sizing: border-box属性解决日常开发遇到的小问题

box-sizing 属性介绍

box-sizing 属性包含两个值content-box,border-box

content-box  是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。即width为content+padding+border

border-box  width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
这里的维度计算为: width = border + padding + 内容的  width, height = border + padding + 内容的 height。

content-box与 border-box区别

1.content-box:padding和border不被包含在定义的width和height之内。
对象的实际宽度=设置的width+padding+border
2. border-box:padding和border被包含在定义的width和height之内。
对象的实际宽度=设置的width(padding和border不会影响实际宽度)

 

 

 

转载请注明:码云笔记 » css3 box-sizing: border-box属性解决日常开发遇到的小问题

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址