目录
一、盒模型概念
广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
盒模型组成：margin + border + padding + content
二、盒模型成员介绍
1、content（内容显示区域）
content控制内容的显示区域
通过设置width与height来规定content（content = width * height）
块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
2、border（边框）
border 边框 组成成员（三部分）： border-width(宽度)、border-color(颜色)、border-style(风格)
border 成员：border-left、border-right、border-top、border-bottom
border-width 成员：border-left-width（左边框宽度）、border-right-width（右边框宽度）、border-top-width（上边框宽度）、border-bottom-width（下边框宽度）
p {border-width: 5px;} p {border-width: thick;} p {border-width: 15px 5px 15px 5px;} p {border-width: 15px 5px;} p { border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }注：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; } p { border-style: solid; border-color: blue red; } h1 { border-style: solid; border-color: black; border-right-color: red; }- 透明边框（边框颜色 transparent）
我们刚才讲过，如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：
<a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a>我们为上面的链接定义了如下样式：
a:link, a:visited { border-style: solid; border-width: 5px; border-color: transparent; } /*悬浮显示灰色边框*/ a:hover {border-color: gray;}border-style 成员：border-left-style、border-right-style、border-top-style、border-bottom-style
p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;}注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。
风格 解释 solid 实线 dashed 虚线 dotted 点状线 double 双实线 groove 槽状线 ridge 脊线 inset 内嵌效果线 outset 外凸效果线 none 清除边框线 注意：border满足整体设置语法，eg：border: 1px solid red;
属性 描述 border 简写属性，用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 border-colo 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。 border-bottom-color 设置元素的下边框的颜色。 border-bottom-style 设置元素的下边框的样式。 border-bottom-widt 设置元素的下边框的宽度。 border-left 简写属性，用于把左边框的所有属性设置到一个声明中。 border-left-color 设置元素的左边框的颜色。 border-left-style 设置元素的左边框的样式。 border-left-width 设置元素的左边框的宽度。 border-right 简写属性，用于把右边框的所有属性设置到一个声明中。 border-right-color 设置元素的右边框的颜色。 border-right-style 设置元素的右边框的样式。 border-right-width 设置元素的右边框的宽度。 border-top 简写属性，用于把上边框的所有属性设置到一个声明中。 border-top-color 设置元素的上边框的颜色。 border-top-style 设置元素的上边框的样式。 border-top-width 设置元素的上边框的宽度。
3、padding
padding成员：padding-left、padding-right、padding-top、padding-bottom
padding整体设置
值得个数 方位 1个 -- >> h1 {padding: 10px;} 上下左右 2个 -->> h1 {padding: 10px 2ex;} 上下 | 左右 3个 -->> h1 {padding: 10px 0.25em 2ex;} 上 | 左右 | 下 4个 -->> h1 {padding: 10px 0.25em 2ex 20%;} 上 | 右 | 下 | 左 单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
- padding-top
- padding-right
- padding-bottom:
- padding-left
下面的规则实现的效果与上面的简写规则是完全相同的：
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }内边距的百分比数值
可以为元素的内边距设置百分数值。
百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。下面这条规则把段落的内边距设置为父元素 width 的 10%：
p {padding: 10%;}例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
4、margin（外边距）
margin成员：margin-left、margin-right、margin-top、margin-bottom
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。
在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。 例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
margin整体设置（值复制概念）
赋值个数 方位 1个 -->> h1 {margin : 0.25px;} 上下左右 2个 -->> h1 {margin: 0.5em 1em;} 上下 | 左右 3个 -->>h1 {margin: 0.25em 1em 0.5em;} 上 | 左右 | 下 4个 -->>h1 {margin : 10px 0px 15px 5px;} 上 | 右 | 下 | 左 - 值复制
p {margin: 0.5em 1em 0.5em 1em;} /*等价于*/ p {margin: 0.5em 1em;}CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
下图提供了更直观的方法来了解这一点：
如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。
如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。
如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：
h1 {margin: 0.25em 1em 0.5em;} /*（上，左右，下）等价于 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;} /*（上下，左右）等价于 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* （上下左右）等价于 1px 1px 1px 1px */假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：
p {margin: 20px 30px 30px 20px;}这样才能得到您想要的结果。遗憾的是，在这种情况下，所需值的个数没有办法更少了。
如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：
p {margin: auto auto auto 20px;}同样的，这样才能得到你想要的效果。问题在于，键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距，请使用单边外边距属性。
- 单边外边距属性
单边外边距属性:为元素单边上的外边距设置值。 假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：
p {margin-left: 20px;}您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
常用值： auto--浏览器设置的右外边距，自定义数字值一个规则中可以使用多个这种单边属性，例如：
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }当然，对于这种情况，使用 margin 可能更容易一些：
p {margin: 20px 30px 30px 20px;}一般来说，如果希望为多个边设置外边距，使用 margin 会更容易一些。
注意：
Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。
而 Opera 相反，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。
三、border-radius（边界圆角）
border-radius成员
成员 解释 border-top-left-radius 左上 方位 border-top-right-radius 右上 方位 border-bottom-left-radius 左下 方位 border-bottom-right-radius 右下 方位
单方位(指定单角)设置
赋值个数(值类型：长度 | 百分比) 解释 1 --->> border-top-left-radius: 100px; 单角 横纵 2 --->> border-top-left-radius: 100px 50px; 单角 横 | 纵
按角整体设置
赋值个数(值类型：长度 | 百分比) 解释 1 左上&右上&左下&右下 2 左上&右下，右上&左下 3 左上 ，右上& 左下 ， 右下 4 左上，右上， 右下， 左下
分向整体设置
格式 解释 1 / 1 --- >> border-radius: 10px 100px 50px / 50px; 横向/ 纵向 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界圆角</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*单角设置*/ .box { /*一个固定值: 横纵*/ border-top-left-radius: 100px; /*两个固定值:横 纵*/ border-top-left-radius: 100px 50px; /*百分比赋值*/ border-top-left-radius: 100%; } /*整体赋值*/ .box { /*不分方位(横纵)*/ /*左上为第一个角,顺时针,不足找对角*/ /*border-radius: 10px 100px 50px;*/ /*区分横纵*/ /*1./前控制横向,后控制纵向*/ /*2.横向又可以分为1,2,3,4个值,纵向毅然*/ border-radius: 10px 100px 50px / 50px; /*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/ /*所有最多可以赋值8个值*/ } </style> </head> <body> <div class="box"></div> </body> </html>
四、其他相关属性
1.max、min-width、height
2.display
值 描述 inline 内联 block 块级 inline-block 内联块 块（block）：
独行显示
支持宽高，宽默认适应父级，高默认由子级或内容撑开
设置宽高后，一定采用设置的宽高
内联（inline）：
同行显示
不支持宽高
内联块（inline-block）：
同行显示，之间有间距
支持宽高，宽高由内容撑开
设置宽高后，一定采用设置的宽高
若设置宽高中其一，另一个会根据内容等比缩放
嵌套规则：
块可以嵌套所有类型
内联一般只嵌套内联
内联块一般只作为最内层级
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title> <!-- 默认值 --> <style type="text/css"> div { /*块*/ display: block; /*自适应父级可用content的宽度*/ /*width: auto;*/ /*默认0*/ /*height: 0px;*/ } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; width: auto; height: auto; } </style> <!-- 验证宽高设置 --> <style> .sup { width: 300px; /*height: 100px;*/ background-color: orange } .sub { /*width: 200px;*/ /*height: 200px;*/ background-color: cyan } .s1, .s2 { /*width: 200px; height: 200px;*/ background-color: brown } img { /*width: 350px;*/ /*height: 350px;*/ } </style> </head> <body> <!-- 块 --> <div></div> <!-- 内联 --> <span></span> <!-- 内联块 --> <!-- 同行显示,之间有间距 支持宽高,宽高由内容撑开 --> <img src="./img/icon.jpg" alt=""> <img src="./img/icon.jpg" alt=""> <!-- 橘色块 --> <div class="sup"> <!-- 蓝色块 未设定宽高：默认父宽，内容高--> <div class="sub">111</div> </div> <!-- 内联 不支持设置宽高 --> <span class="s1">123</span> <span class="s2">456</span> </body> </html>
3.overflow
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>voerflow</title> <!-- 显示区域只能由父级大小决定 --> <style type="text/css"> /*子级区域大于父级*/ .sup { width: 100px; height: 100px; /*默认值*/ /*border: 3px none black;*/ /*清除边框*/ /*border: 0;*/ /*border: none;*/ /*最简单的设置*/ border: solid; } .sub { width: 200px; height: 200px; background-color: red } /*对父级进行overflow设置*/ .sup { /*以滚动的方式允许子级所有内容显示*/ overflow: auto; /*overflow: scroll;*/ /*只运行子级在父级所在区域的部分显示,超出的部分影藏*/ /*overflow: hidden;*/ } </style> </head> <body> <!-- display: block大环境下 --> <!-- <div class="sup"> <div class="sub"></div> </div> --> <div class="sup"> 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 </div> </body> </html>
