码迷,mamicode.com
首页 > Web开发 > 详细

CSS盒模型

时间:2017-08-13 15:08:26      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:2-2   pad   两种   标准   包含   box   image   tom   margin   

一、CSS盒模型基本概念

        基本概念:margin、border、padding、content

     1. IE盒模型与标准盒模型的区别

技术分享

技术分享

        我们先来看一看对于这两个盒模型,其实本质上是一样的,都包含盒模型的基本属性,但是,这两种盒模型的区别就是对于宽高计算的不同。

        标准盒模型:width = content-width; height = content-height;

        IE盒模型:width = content-width + padding-left + padding-right + border-left + border-right;height = content-height+ padding-top+ padding-bottom+ border-top+ border-bottom;

        那么我们怎么去设置盒模型的标准呢?

        答案就是CSS3中的一个属性box-sizing。这个属性有两个参数:border-box(IE模型)  content-box(标准模型).

CSS盒模型

标签:2-2   pad   两种   标准   包含   box   image   tom   margin   

原文地址:http://www.cnblogs.com/zhangjuke/p/7353323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!