盒模型以及相关样式

来源：互联网发布：淘宝客返利在哪里查看编辑：程序博客网时间：2024/06/04 23:26

盒模型以及相关样式

盒模型

介绍

css的盒模型有两种，一种是w3c盒模型，一种是IE盒模型，以下分别介绍：
1. w3c盒模型

在标准的盒模型中:
width = contentWidth
height = contentHeight
totalWidth = width + leftPadding + rightPadding + leftBorder + rightBorder + leftMargin + rightMargin
totalHeight = height + upPadding + downPadding + upBorder + downBorder + upMargin + downMargin
2. IE盒模型

在IE盒模型中:
width = contentWidth + leftPadding + rightPadding + leftBorder + rightBorder
height = contentHeight + upPadding + downPadding + upBorder + downBorder
totalWight = width + leftMargin + rightMargin
totalHeight = height + upMargin + downMargin

标准盒模型被称为content-box,IE盒模型被称为border-box，使用哪种盒模型可以通过box-sizing这个属性进行指定，在没有使用box-sizing这个情况下，默认使用content-box

实例

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>css测试</title>    <style>      div {        width: 300px;        border: 30px solid #ffaa00;        padding: 30px;        background-color: #ffff00;        margin: 20 auto;      }      div#div1 {        box-sizing: content-box      }      div#div2 {        box-sizing: border-box      }    </style>  </head>  <body>    <div id="div1">示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范</div>    <hr>    <div id="div2">示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范</div>  </body></html>

div1的采用标准盒模型，运行结果如下：

从上图可以看出，contentWidth = width = 300px

div2采用的是IE盒模型，结果如下：

内容宽度:contentWidth = width - leftPadding - rightPadding - leftBorder - rightBorder = 300 - 30 - 30 - 30 - 30 = 180px

注意：在火狐浏览器中还可以将border-sizing的属性值设为padding-box，即：
width = contentWidth + leftPadding + rightPadding

为什么要使用`border-sizing`属性

使用该属性可以对元素的总体宽度做一个控制，如果不使用该属性，样式中就会默认使用content-box属性值，它只对内容的宽度做了指定，但是没有指定盒模型的总宽度。在有些情况下使用border-box属性值会更加方便
比如：将两个div元素进行均分且并排显示，将其设为border-box,width: 50%即可

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>css测试</title>    <style>      div {        width: 50%;        border: 30px solid #ffaa00;        padding: 30px;        background-color: #ffff00;        margin: 20 auto;        box-sizing: border-box;        /* 浮动，实现并排显示 */        float: left      }    </style>  </head>  <body>    <div id="div1">示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范</div>    <div id="div2">示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范示范</div>  </body></html>

盒的类型

在css中使用display来定义盒的类型，
1. block
2. inline
3. inline-block
4. inline-table
5. list-item
6. run-in
7. compact
8. 表格相关类型
9. none

阅读全文

0 0

盒模型以及相关样式

盒模型以及相关样式

盒模型

介绍

实例

为什么要使用border-sizing属性

盒的类型

为什么要使用`border-sizing`属性