<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content
{
width: 300px;
height: 300px;
background-color: red;
}
.aside
{
width: 100px;
height: 200px;
background-color: blue;
float: left;
}
.article
{
width: 200px;
height: 200px;
background-color: green;
float: right;
border: 20px solid #000;
padding: 20px;
box-sizing: border-box;
/*这个元素的宽高等于原来定义的内容的宽高。*/
box-sizing: content-box;
/*默认的:元素的宽高 = 边框 + 内边距 + 内容宽高*/
}
</style>
</head>
<body>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
</body>
</html>
盒子模型box-sizing属性的用法
原创
©著作权归作者所有:来自51CTO博客作者陈业贵的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:背景图片和插入图片区别
下一篇:css盒子模型大详解
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
前端样式从box-sizing属性入手,了解盒子模型
前端样式从box-sizing属性入手,了解盒子模型
前端 css css3 盒模型 内边距 -
【移动端网页布局】移动端网页布局基础概念 ⑩ ( CSS3 盒子模型 box-sizing | 盒子模型尺寸 = 内容尺寸 = 内边距 + 边框宽度 | box-sizing 样式设置 )
一、CSS3 盒子模型 box-sizing二、CSS3 盒子模型 box-sizing 代码示例
css3 css CSS3盒子模型 移动端网页布局 box-sizing -
box-sizing保证盒子大小不变使用注意
css 保持盒子大小不变
css box-sizing -
盒模型 box-sizing: border-box; / content-box;
标准盒模型content-box它的最大特点是,当已经设定了width和height值的时候,padding和border不被包含在你定义的width和height之内,也就是说,你定义的width只负责content区域的宽度,如果想得到整个盒子宽度,需要再加上padding和border的厚度。这个content-box就是标准模型,诞生最早。content-box顾名思义,就是内容盒子。任何浏览器默认使用的都是标准模型。观察上图,在css区 设置div宽度为100px,高度为
box-sizing css3 html5 content-box border-box