div + css (一)盒子模型

最新推荐文章于 2023-05-27 16:51:16 发布

拥抱相柳的小夭

最新推荐文章于 2023-05-27 16:51:16 发布

阅读量147

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_43439782/article/details/87804983

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

W3C盒子模型

声明盒子模型时用到的css属性：
height width margin padding border
padding: 10px 20px 30px; 上10px, 左右20px，下30px

<style>
	.box{
	border：1px solid blue；
	padding：10px 20px 25px 10px；//上 右 下 左
	margin ： 10px；
	height：300px；
	width：300px；
	}
</style>
<body>
<div class="box"></div>
</body>

注意：在盒子模型时，如果有height 和 width时，必须考虑兼容性，尤其是在有border 和padding 和margin，因为ie浏览器是和其它浏览器是不一样的，如height定义值，ie浏览器解析的是用height-border-padding后剩下的为box的内容实际height（IE盒子模型），而非IE如火狐浏览器，height定义值（如在style定义的）既为盒子的内容height，如果需要浏览器做兼容，有两种解决方式

对height 和weight 写两次，计算两次height值，对非IE的加!important标识，因为该标识具有最高优先级，写法如下
文档的头部需要使用 <!DOCTYPE html>声明
<style>
	.box{
	border：1px solid blue；
	padding：10px 20px 25px 10px；//上 右 下 左
	margin ： 10px；
	height：263px !important；//300-1-1-10-25
	height：300px；
	width: 268px !important;//300-1-1-20-10 
	width：300px；
	}
</style>
<body>
<div class="box"></div>
</body>
<!DOCTYPE html>
<style>
	.box{
	border：1px solid blue；
	padding：10px 20px 25px 10px；//上 右 下 左
	margin ： 10px；
	height：300px；
	width：300px；
	}
</style>
<body>
<div class="box"></div>
</body>

拥抱相柳的小夭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div + css (一)盒子模型

W3C盒子模型声明盒子模型时用到的css属性：height width margin padding borderpadding: 10px 20px 30px; 上10px, 左右20px，下30px&amp;lt;style&amp;gt; .box{ border：1px solid blue； padding：10px 20px 25px 10px；//上右下左 margin ： 1...
复制链接

扫一扫