关于css盒模型的解析

yp2294188167

于 2019-11-09 15:24:57 发布

阅读量142

点赞数

文章标签： css 盒子模型

本文链接：https://blog.csdn.net/yp2294188167/article/details/102987513

版权

盒模型原理：对所有的盒子，在浏览器中所占据的空间进行计算
盒子：只要在浏览器中占据位置的元素，都是我们计算的盒子
->inline inline-block block
盒子模型使用什么计算盒子在浏览器中占据的位置
width height border margin padding

    盒子分类：边框盒子(IE默认)和 内容盒子(谷歌默认)

    边框盒子在浏览器中占据空间  =   width * height
    内容盒子在浏览器中占据空间  =   (width + border + padding +margin) * (height + border + padding +margin)

    结论：内容盒子：会变大
          边框盒子：不会变
          <!DOCTYPE html>

Document

 <div style="width: 200px;height: 200px;background-color: yellow;box-sizing: border-box;padding: 10px;margin: 0;">

asdasd
</div>
 <span class="asd">你好</span><span>asdasd</span>

yp2294188167

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css盒模型的解析

盒模型原理：对所有的盒子，在浏览器中所占据的空间进行计算盒子：只要在浏览器中占据位置的元素，都是我们计算的盒子->inline inline-block block盒子模型使用什么计算盒子在浏览器中占据的位置width height border margin padding 盒子分类：边框盒子(IE默认)和内容盒子(谷歌默认) 边框盒子在浏览器中占据空间 = ...
复制链接

扫一扫