你的位置:首页 > 软件开发 > 网页设计 > 学习盒模型的整理转述

学习盒模型的整理转述

发布时间:2017-02-26 12:00:09
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!1. css盒模型有标准盒模型和IE盒模型,结构是:content、padding、border、margin。css3有个box-sizing属性,设置用哪种盒模型;box-sizing ...

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

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>

原标题:学习盒模型的整理转述

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录