盒模型的学习整理转述

2018-06-24 01:00:28来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

1. css盒模型有标准盒模型和IE盒模型

  结构是:content、padding、border、margin。

  

  css3有个box-sizing属性,设置用哪种盒模型;

  box-sizing:content-box(默认)  标准盒模型;

  box-sizing:border-box IE盒模型;

  用的比较多的就这两种。

  页面中每个元素都被当成一个矩形盒子,占一定空间;

  标准盒模型所占空间宽度=marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + marginRight ;

  IE盒模型所占空间宽度=marginLeft + width +marginRight ;    IE盒模型的css里的width属性值已经包含了border和padding)

  高度是一样的,分为标准盒模型和IE盒模型;

 

2. 上面主要讲的是block块元素的盒子模型,inline行内元素的盒子模型也有所区别(有的叫线模型,不确定是否准确),结构是一样的;

  inline元素的空间是有内容撑开的,在没有转换元素类型的情况下css设置width和height是没有用的(如果没有内容,就不占据空间);

  设置margin-top\margin-bottom,也不占空间;

  设置padding-top\padding-bottom,不占据空间,但是背景色可以覆盖(这又涉及到背景background的知识)

  只有margin-left\margin-right\padding-left\padding-right有用;

  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                height: 300px;
                background: #333;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            .nothing{
                width: 200px;
                height: 100px;
                background: #0f2;
            }
            .test{
                width: 100px;
                background: #f90;
                padding-left: 20px;
                padding-right: 60px;
                padding-top: 30px;
                padding-bottom: 20px;
                
                margin-left: 20px;
                margin-right: 60px;
                margin-top: 30px;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="nothing">被压住了</div>
            <span class="test">span测试</span>
        </div>
    </body>
</html>
View Code

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于左边固定,右边自适应布局的响应式布局写法

下一篇:行内元素和块级元素的区别