盒⼦模型（CSS重点）
⼀、盒⼦模型（Box Model）
1、概念：所谓盒⼦模型，就是把HTML页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
2、总结：
①盒⼦模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成；
②盒⼦⾥⾯的⽂字和图⽚等元素是内容区域；
③盒⼦的厚度，我们称为盒⼦的边框；
④盒⼦内容与边框的距离是内边距（类似单元格的cellpadding）；
⑤盒⼦与盒⼦之间的距离是外边距（类似单元格的cellspacing）。
⼆、盒⼦边框（border）
1、语法：
borer ： border-width || border-style || border-color
属性作⽤
border-width定义边框粗细，单位是px
border-style边框的样式
border-color边框颜⾊
2、边框的样式
①none：没有边框即忽略所有边框的宽度（默认值）；
②solid：边框为单实线（最为常⽤的）；
③dashed：边框为虚线；
④dotted：边框为点线。
3、边框的综合设置
语法：borer ： border-width || border-style || border-color
如 border:1px solid red;（没有顺序）
4、盒⼦边框写法总结表
上边框下边框左边框右边框
border-top-style：样式;border-bottom-style：样式;border-left-style：样式;border-right-style：样式; border-top-width：宽度;border-bottom-width：宽度;border-left-width：宽度;border-right-width：宽度; border-top-color：颜⾊;border-bottom-color：颜⾊;border-left-color：颜⾊;border-right-color：颜⾊; border-top：宽度样式颜⾊;border-bottom：宽度样式颜⾊;border-left：宽度样式颜⾊;border-right：宽度样式颜⾊;
5、表格的细线边框
①通过表格的 cellspacing="0" ，将单元格与单元格之间得距离设置为0；
②但是两个单元格之间的边框会出现重叠，从⽽使边框变粗；
③通过css属性：
table {border-collapse:collapse;}
collapse单词是合并的意思；
border-collapse:collapse；表⽰相邻边框合并在⼀起。
⼆、内边距（padding）
1、概念：padding属性⽤于设置内边距，是指边框与内容之间的距离。
2、设置：padding是外边距还是内边距
属性作⽤
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
3、当我们给盒⼦指定padding值之后，发⽣了2件事：
①内容和边框有了距离，添加了内边距；
②盒⼦会变⼤。
4、简写
值的个数表达意思
1个值padding：上下左右内边距；
2个值padding：上下边距左右边距；
3个值padding：上内边距左右内边距下内边距
4个值padding：上内边距右内边距下内边距左内边距
5、遇到导航栏⾥⾯字不⼀样多的，不⽅便直接给宽度，直接给padding，撑开盒⼦。
6、内盒尺⼨计算（元素实际⼤⼩）
①宽度：Element Height=content height+padding+border（Height为内容⾼度）
②⾼度：Element Width=content width+padding+border（Width为内容宽度）
③盒⼦实际⼤⼩=内容的宽度和⾼度+内边距+边框
7、padding不影响盒⼦⼤⼩的情况：
如果没有给⼀个盒⼦指定宽度，此时，如果给这个盒⼦指定padding，则不会撑开盒⼦。
三、外边距（margin）
1、概念：margin属性⽤于设置外边距，margin就是控制盒⼦和盒⼦之间的距离。
2、设置
属性作⽤
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
margin值的简写（复合写法）代表意思跟padding完全相同。
3、外边距实现盒⼦居中
⑴可以让⼀个盒⼦实现⽔平居中，需要满⾜以下两个条件：
　①必须是块级元素；
　②然后就给左右的外边距都设置为auto。
⑵实际⼯作中常⽤这种⽅式进⾏⽹页布局，如：
.header {width:960px; margin:0 auto;}
常见的写法，以下三种都可以：
①margin-left:auto; margin-right:auto;
②margin:auto;
③margin:0 auto;
4、⽂字居中和盒⼦居中区别
①盒⼦内的⽂字⽔平居中是 text-align:center，⽽且还可以让⾏内元素和⾏内块元素居中对齐；
②块级盒⼦⽔平居中，左右margin改为auto。
5、插⼊图⽚和背景图⽚的区别
①插⼊图⽚，我们⽤的最多，⽐如产品展⽰类，移动位置只能靠盒模型padding、margin；
②背景图⽚，我们⼀般⽤于⼩图标背景或者超⼤背景图⽚，背景图⽚只能通过background-position。
6、清除元素的默认内外边距（重要）
⑴、为了更灵活⽅便地控制⽹页中的元素，制作⽹页时，我们需要将元素的默认内外边距清除。
⑵、代码：
* {
padding: 0;  /* 清除内边距 */
margin: 0;    /* 清除外边距 */
}
⑶、注意：⾏内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
7、外边距合并
使⽤margin定义块元素的垂直外边距时，可能会出现外边距的合并。
⑴相邻块元素垂直外边距的合并:
当上下相邻的两个块元素相遇时，如果上⾯的元素有下外边距margin-bottom，下⾯的元素有上外边距margin-top时，则它们之间的垂直间距不是margin-bottom与margin-top之和，
⽽是取两个值中的较⼤者，这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决⽅案：尽量只给⼀个盒⼦添加margin值。
⑵嵌套块元素垂直外边距的合并（塌陷）：
对于两个嵌套关系的块元素，如果⽗元素没有上内边距及边框，⽗元素的上外边距会与⼦元素的上外边距发⽣合并，合并后的外边距为两者中的较⼤者。
解决⽅案：
①可以为⽗元素定义上边框；
②可以为⽗元素定义上内边距；
③可以为⽗元素添加overflow:hidden。
还有其他⽅法，⽐如浮动、固定、绝对定位的盒⼦不会有问题.....
四、盒⼦模型布局稳定
1、什么情况下⽤内边距，什么情况下⽤外边距：⼤部分情况下是可以混⽤的，觉得哪个⽅便，就⽤哪个。
根据稳定性来分，建议如下：
按照优先使⽤宽度（width），其次使⽤内边距（padding），再次外边距（margin）。
width > padding > margin
2、原因：
①margin 会有外边距合并，还有ie6下⾯的margin加倍的bug（讨厌），所以最后使⽤；
②padding 会影响盒⼦⼤⼩，需要进⾏加减计算（⿇烦），其次使⽤；
③width 没有问题（嗨⽪），我们经常使⽤宽度剩余法，⾼度剩余法来做。
五、去掉盒⼦默认的样式
1、原因：因为⽆序和有序列表前⾯默认的列表样式，在不同浏览器显⽰效果不⼀样，⽽且也⽐较难看，所以，我们⼀般上来就直接去掉这些列表样式就⾏了。
2、代码
li { list-style: none; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。