首页 >web前端 >css教程 > 正文

box-sizing属性是什么

原创2019-07-22 09:39:5705378

box-sizing属性定义及用法

box-sizing属性是css3中新增的属性,允许你以某种方式定义某些元素,以适应指定区域(假如您需要并排放置两个带边框的框,可通过将 box-sizing属性设置为"border-box",这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中);

Internet Explorer、Opera和Chrome浏览器支持box-sizing属性,Firefox还不支持该属性,但支持-moz-box-sizing属性替代box-sizing属性;

box-sizing属性语法格式

box-sizing: content-box/border-box/inherit;

相关信息:《CSS_CSS3知识

参数说明

content-box:这是由CSS2.1规定的宽度高度行为,宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框;

border-box:为元素设定的宽度和高度决定了元素的边框盒,就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;

inherit:规定应从父元素继承box-sizing属性的值;

实例:

<!DOCTYPE html><html><head><meta charset="utf-8" />
<title>css3 box-sizing属性笔记</title><style type="text/css">
body{background-color: #aaa;}div.container{width:30em;border:1em solid;}
.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;border:1em solid red;float:left;}
</style></head><body><div class="container">
<div class="box">这个 div占据左半部分。</div><div class="box">这个 div占据右半部分。</div>
</div></body></html>

运行结果:

1563759010(1).png

以上就是box-sizing属性是什么的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:box-sizing 属性
  • 本文原创发布php中文网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 模块的三个基本分别功能、逻辑和状态。功能指该模块能做事,逻辑指该模块内部怎做 ,状态指该模块使用时的环境和条件。
    在CSS中,你设置一个元素的width与height只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding,绘制到屏幕上时的盒子宽度和高度会加上设置的边框(border)和内边距(padding)值。
    NaN时候会返回NaN判断NaN参考NaN在MDN的NaN文章中有描述:全局NaN表示 Not-A-Number的值。
    flex意思?flex布局?
    程序的5大特为:1、有穷,一个算法的操作步骤有限的,不能无限的;2、确定,算法中的每一个步骤都要确定的词,不能含糊不清;3、输入,执行算法需要;4、输出,程序需要得出的结果;5、有效
    java常见面试题有:1、JDK和JRE有区别?2、==和equals的区别?3、final在java中有作用?4、String于基础的数据类型吗?5、如何将字符串反转?
    js单线程的,为可以执行异步操作呢?这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的
    下面由WordPress教程栏目给大家介绍rel=”noopener”?希望对需要的朋友有所帮助!如果您选择在新窗口中打开链接,则WordPress会将此添加到您的链接中。
    我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些。在element-ui中添加tag很简单,最重要的就用到了vue的插槽slot这个特。首先了解插槽。
    几天前一个小伙伴问我Object.getOwnPropertyNames()用的,平时还真没有使用到这个方法,一时不知如何回答,从方法名称来分析,应该返回的对象自身名组成的数组。
    css中的display设置元素显示的方式,block一块状元素的方式显示,inline以内联元素的方式显示,none不显示,块状元素会单独占据一样,其他元素跟他在同一行的会被迫换行,挤到下一行
    yii2.0表格排序可以使用Sort类来实现,使用yii\data\Sort,首先要声明能进行排序,接着从attributeOrders或者orders取得当前设置的排序信息,然后使用它们来自定义数据查询
    vb中没有caption“列表框”,也就指列表框控件没有Caption,而vb中caption就指一个控件的标题,就控件上显示的文字。

    2020-06-15

    732

    CSS 预处理器?一般来说,它们基于 CSS 扩展了一套于自己的 DSL(Domain Specific Language),来解决我们书写 CSS 时难以解决的问题。
    窗体的caption作用确定窗体的标题,窗体一种文档,可以用来收集信息,它包括两部分:一部分由窗体设计者输入的,填写窗体的人无法更改的文字或图形;另一部分由窗体填写者输入的,用于从填写窗体者处收集信息并进行整理的空白区域
    圆角边框的cssborder-radius,该对元素的四个角进行设置,并且不具有继承
    pr粘贴快捷键“Ctrl + Alt + V”。
    行内指的行内style,而style规定元素的行内样式,并且因为行内元素同样具有盒子模型,所以可以给行内元素设置不同的css,比如宽度、高度、内边距和外边距等。
    HTML <input> value表示规定<input>元素的值,value对于不同input类型,用法也不同,比如对于 “button”、“reset”、“submit
    img标签中alt的作用指定替代文本,用于在图像无法显示或用户禁用图像显示时,代替图像显示在浏览器中的内容。alt一个必需的

    专题推荐

    推荐视频教程
  • CSS高级实例视频教程CSS高级实例视频教程
  • CSS 4.2.4参考手册CSS 4.2.4参考手册
  • CSS视频教程-玉女心经版CSS视频教程-玉女心经版
  • CSS 代码实例CSS 代码实例
  • 视频教程分类