西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发其它知识 → css3 box-sizing属性 box-sizing让CSS布局更加直观

css3 box-sizing属性 box-sizing让CSS布局更加直观

相关软件相关文章发表评论 来源:西西整理时间:2015/4/5 22:50:29字体大小:A-A+

作者:西西点击:127次评论:0次标签: CSS布局

搜狗拼音输入法2017v8.2g 官方正式版
  • 类型:文字输入大小:38.1M语言:中文 评分:8.9
  • 标签:
立即下载

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢?第一句话就说了,Box-sizing是CSS3的Box属性之一,那他当然也遵循CSS的Box model原理,为了能更好的学习和理解这个Box-sizing属性,我们有必要先了解一下CSS中Box model的原理。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

如果你写过CSS或者你接触过CSS,相信你一定对盒子模型一点都不陌生。CSS其中一个让人比较困惑的地方就在于它的盒子模型中关于高度和宽度的计算,别说那些初学者了,就是写过很久CSS的人也一样会有如此的感觉。CSS中的高度和宽度总是不那么直观,让你总是很困惑,不能一眼就能分辨出其高度和宽度。有的时候你希望它的宽度是100px,但实际情况却总不是这样。然而,设置正确的box-sizing的属性,盒子的高度和宽度会的确就是你设置的100px。是否有点晕了呢,好了,下面我详细介绍下。

1、盒子模型

关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如:

padding + border + width = 盒子的宽度

padding + border + height = 盒子的高度

这看起来并不是那么直观,那么我们看一个图:

这意味着,如果我们设置一个宽度为200px,而实际呈现的盒子的宽度可能会大于200px(除非没有左右边框和左右补白)。这可能看起来比较怪,CSS设置的宽度仅仅是内容区的宽度,而非盒子的宽度。同样,高度类似。

这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候,我们需要减去它的左右边框和左右补白,然后设置为对应的CSS宽度。例如上图,我们设置希望盒子宽度为200px,则需要先减去左右补白各20px,左右边框各1px,然后设置对应的CSS宽度158px。这让代码看起来有点匪夷所思,尤其是对新手来说(我就在这个问题上困惑了很久)。我明明设置的宽度是158px,它却呈现了200px。这多少有点不那么直观和一目了然。

幸运的是,我们有更好的方法达到我们想要的目的。

2、box-sizing

与上面不同的是,当你设置box-sizing:border-box以后,这就能达到你想要的目的。例如,上面我们想要一个宽度为200px的盒子,那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后,它的内容区会自动调整。这可能更直接和一目了然。CSS代码如下:

div {

  box-sizing: border-box;

  width: 200px;

  padding: 20px;

  border: 1px solid #DDD;

}

如下图:

实际上,这更被设计者和开发者推崇。

3、box-sizing其它的值

box-sizing同样可以设置为content-box,这样设置CSS的宽度的时候仅仅是设置的它的内容区的宽度,浏览器默认都是如此。如我们1中举得例子。

box-sizing也可以设置为inherit,也就是说从父级元素中继承该属性。

4、浏览器兼容性

IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。实际上,很多reset.css或者normal.css里都包含如下CSS语句,也是比较赞成的用法:

*, *:before, *:after {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

结束语

看到这儿,相信你肯定明白了box-sizing的含义。那么同样告诉你的是,这是很多前端面试题常见的知识点之一。面试官通常会问你,CSS设置如下语句后*{box-sizing:border-box;},其作用是什么?相信你看到现在肯定会清楚的回答这个问题了。

    鬼畜输入法
    (38)鬼畜输入法
    鬼畜输入法是当前国内一款人气火爆的趣味输入法应用,与传统的输入法相较更为大胆创新,你可以输入各类内涵搞怪文句,输入法将自动合成视频图片,替你传达要表达的意思。产品特色只要下了鬼畜输入法,从此整蛊恶搞都不在话下鬼畜输入法是一款简单有趣的视频制作,只要你输入台词,系统就会根据台词在影视库里找到对应的字和词语,借明星演员之口说出来,别有一番风味除了基本的词汇外,气质本宝宝你咋不上天呢等当下热门的流行词汇...更多>>
    双拼输入法
    (7)双拼输入法
    西西软件园提供好用的双拼输入法官方下载,双拼键位的记忆量并不大,目前主流的方案一周内都能上手,难点其实是输入思维方式的转变。为了今后输入的畅快,入门的时候吃点儿苦是值得的。双拼输入法畅快高效,享受打字的节奏感尤其是加了鹤形,基本可以消除重码,实现非智能输入,堪比五笔当然,如果懒得记,仅仅用前两位的双拼也足够应付日常输入了,毕竟现在都是词组整句的智能输入了。...更多>>
    拼音输入法
    (86)拼音输入法
    西西软件园提供拼音输入法下载官方下载,使用过多款拼音输入法,还是搜狗拼音输入法最好用,其实还有很多其他的拼音输入法也不错,比如拼音输入法百度拼音输入法等等,看你自己的喜好。国内的这些输入法真的都很贴近用户。支持皮肤更换联想输入等等特色功能。输入法是指为了将各种符号输入计算机或其他设备如手机而采用的编码方法。汉字输入的编码方法,基本上都是采用将音形义与特定的键相联系,再根据不同汉字进行组合来完成汉字...更多>>
    搜狗输入法2015
    (11)搜狗输入法2015
    搜狗输入法新版来袭,搜狗输入法版在新版基础上,大幅度改进了一些基础功能,输入界面更加美观间接。西西体验了一下,确实要比老版本要好用多了,词汇的搜索智能程度大大的提高了,能根据用户的习惯迅速打出对应的语句。最新版改进输入建议更少输入,更多候选,联想展现英文邮箱用户词。建议分情景本地搜索浏览建议各不同,最贴心的建议。搜狗工具箱最新.版升级版,功能集合,一应俱全。官方介绍搜狗拼音输入法是基于搜索引擎技术的...更多>>
    百度输入法
    (31)百度输入法
    百度输入法是著名搜索引擎服务提供商百度公司免费提供的输入软件。它基于百度搜索技术,拥有强大的词库。支持和系统。目前,百度输入法手机版最先发展,并迅速得到了手机用户的青睐,尤其是在塞班第五版全触屏手机系列中,有不俗的表现。百度输入法前身点讯输入法,以点划结合的输入方式而闻名,享受流畅的手机输入体验是百度手机输入法一直以来贯彻的产品理念。...更多>>

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)