欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

CSS中的box-sizing属性怎么使用

发布时间:2019-05-13  编辑:杨雨个人博客网站   点击:   

box-sizing属性可用于设置更改区域大小,比如,如果你需要并排放置两个带边框的框,可通过将 box-sizing 设置为 border-box实现,下面我们就来看具体的内容。

box-sizing属性是用于更改区域大小计算的设置,使用padding和border属性设定边距和边界线的粗细时,在区域的width和height中加入padding和border的部分,因此,根据padding和border的值,整个区域的大小就会改变。

box-sizing

这是因为区域的大小不包含padding,border的值。

根据box-sizing属性改变设定,可以在区域大小中设置padding和border。这使得可以确定盒子的大小而不受padding和border的影响。

我们接着来看box-sizing的使用方法

box-sizing属性写法如下

box-sizing:value ;

value的值你可以写入content-box和border-box。

content-box:宽度和高度分别应用到元素的内容框;在宽度和高度之外绘制元素的内边距和边框。

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

此外,如果输入inherit,则继承父元素的值。

下面我们来看一个具体的例子

代码如下

HTML代码

<!DOCTYPE Html>
<Html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.Css" type="text/Css">
</head>
<body>
  <p class="content1">content-box(初始值)
  的情况下、padding和border不包括在width和height之中</p>
<p class="content2">border-box的情况下、padding和border包括在width和height之中</p>
</body>
</Html>

设置宽度和高度完全相同的两个盒子(宽度400px,高度150px),第一个盒子设置的初始值content-box,第二个盒子设置的值是border-box。

CSS代码

p.content1 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: content-box;
}
p.content2 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: border-box;
}

运行结果

在浏览器上将显示如下效果

box-sizing 本文地址:http://itbyc.com/web/css3/19738.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1