css盒子模型又称为框模型，盒子的最内部是元素的实际内容即元素内容，紧挨着元素框外部的是内边距，其次是边框，然后最外层是外边距，这几部分共同组成了盒子模型
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是总结的关于css盒子模型的知识，希望对大家有所帮助。
一、css盒子模型概念
CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。
那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
二、css 外边距合并（叠加）
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：
比较容易理解，所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义，如下图：
需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
css reset 中也会经常用到
* {
margin : 0;
padding : 0;
}
登录后复制
三、box-sizing属性介绍
box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
登录后复制
(1)content-box,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
(2)border-box, 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
很多CSS框架，都会对盒子模型的计算方法进行简化。
(3)inherit,规定应从父元素继承 box-sizing 属性的值
关于border-box的使用：
1、一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2、全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
四、实际开发中遇到的和框模型相关的应用及小问题。
1、margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）
以第一个子元素的margin-top 为例：
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：
（1）给父元素加边框border （副作用）
（2）给父元素设置padding值 （副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（推荐）
以第四种方法为例：
.parent {
width : 500px;
height : 500px;
background-color : red;
}.parent : before {
content : " ";
display : table;}.child {
width : 200px;
height : 200px;
background-color : green;
margin-top : 50px;}
登录后复制
2、 浏览器间的盒子模型。
（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
（2）标准盒子模型与IE模型之间的差异：
标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。
3、用盒子模型画三角形
nbsp;html>
登录后复制
页面显示结果为：
html布局_HTML响应式布局项目实战【18】
本章主要开始如果将前两个项目再进行重构，设计成既可以在 PC 端正常显示，又可以在 PAD 上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计了。
一．响应式初探
在前面的两个项目中，我们分别设计了 PC 端固定布局和移动端流体布局的案例。其实，通过上面两个案例，已经可以做出兼容 PC、PAD 和移动端的响应式页面了。而本节课，就是将上面两个案例改成三个终端都可以正常显示的响应式布局。
我们这节课并不去过多的探讨响应式的种种方案、技巧、实战等等，那个是另外一门专门的响应式开发课程，我们会在以后专门探讨，而 HTML5 第一季布局课，只是最为最基础的入门来了解一下响应式的设计。
响应式设计最重要的环节就是媒体查询，我们仿造一个最为流行的 Bootstrap 框架中的媒体查询代码，具体如下：
/*当页面大于 1200px 时，大屏幕，主要是 PC 端*/
@media (min-width: 1200px) { }
/*在 992 和 1199 像素之间的屏幕里，中等屏幕，分辨率低的 PC*/
@media (min-width: 992px) and (max-width: 1199px) { }
/*在 768 和 991 像素之间的屏幕里，小屏幕，主要是 PAD*/
@media (min-width: 768px) and (max-width: 991px) { }
/*在 480 和 767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) { }
/*在小于 480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) { }
二．起始部分
项目起始部分，首先构建出 HTML5 的基本格式以及 CSS 的基本样式。
移动或响应式 Web 页面缩放设置
PC 端拷贝过来，增加了一些 class 响应式隐藏
瓢城旅行社h1>
本站内容来自用户投稿，如果侵犯了您的权利，请与我们联系删除。联系邮箱：835971066@qq.com 本文链接：http://news.xiuzhanwang.com/post/1202.html
