CSS进阶--盒子模型
盒子模型
1、盒子模型的介绍：
1）盒子的概念：
① 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局；
② 浏览器在渲染（显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。
2）盒子模型：
CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。
3）记忆：可以联想现实中的包装盒。
Document div { width: 200px; height: 200px; background-color: pink; /* 边框 */ border: 1px solid black; /* 内边距 */ padding: 20px; /* 外边距 */ margin: 50px; } 我是一个div1 我是一个div22、内容区域的宽度和高度：
> 作用：利用 width 和 height 属性默认设置是盒子内容区域的大小
> 属性:：width / height
> 常见取值：数字 + px
3、边框（border）：
> 属性名:：border
> 属性值：单个取值的连写，取值之间以空格隔开
· 如：border : 1px solid red;
> 快捷键：bd + tab
/* solid:实线 */border: 1px solid #000;/* dashed:虚线 */border: 1px dashed #000;/* dotted:点线 */border: 1px dotted #000;> 边框(border) -单方向设置：
· 场景：只给盒子的某个方向单独设置边框
· 属性名：border -方位名词
· 属性值：连写的取值
border-left: 1px solid #000;border-right: 1px solid #000;border-top: 1px solid #000;border-bottom: 1px solid #000;
4、内边距（padding）：
/* 添加了四个方向的内边距 */padding: 50px;/* padding 属性可以当作复合属性使用，表示单独设置某个方向的内边距 *//* padding 最多取4个值 *//* 四值： 上 右 下 左 */padding: 10px 20px 30px 40px;/* 三值： 上 左右 下 */padding: 10px 40px 80px;/* 两值： 上下 左右 */padding: 10px 50px;注意：多值写法，永远都是从上开始顺时针转一圈，如果数不够，看对面。
> CSS3盒模型(自动内减)：
> 解决方法①：手动内减
· 操作：自己计算多余大小，手动在内容中减去
· 缺点：项目中计算量太大，很麻烦
> 解决方法②：自动内减
· 操作：给盒子设置属性box-sizing : border-box;即可
· 优点：浏览器会自动计算多余大小，自动在内容中减去
div { width: 100px; height: 100px; background-color: pink; border: 10px solid #000; /* 内减模式 */ /* 变成CSS3的盒子模型，好处: 加了border和padding不需要手动减法 */ box-sizing: border-box; }5、外边距（margin）：同 padding
6、清除默认内外边距：
> 场景：浏览器会默认给部分标签设置默认的 margin 和 padding ，但一般在项目开始前需要先清除这些标签默认的 margin 和 padding，后续自己设置
> 解决方法：
* { margin: 0; padding: 0;}7、版心居中（ margin: 0 auto; ）：
Document div { width: 1000px; height: 300px; background-color: pink; margin: 0 auto; } 版心8、综合案例1 -- 新浪导航：
> 示例图片：
> 代码：
Document .box { height: 40px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; } .box a { text-decoration: none; display: inline-block; text-align: center; line-height: 40px; color: #4c4c4c; font-size: 12px; /* width: 80px; */ padding: 0 16px; } .box a:hover { color: #ff8400; background-color: #edeef0; } 9、综合案例2 -- 网页新闻列表：
> 示例图片：
> 代码：
Document * { margin: 0; padding: 0; } .box { width: 500px; height: 400px; border: 1px solid #ccc; box-sizing: border-box; margin: 50px auto; padding: 42px 30px 0; } .box h2 { border-bottom: 1px solid #ccc; font-size: 30px; /* 行高是一倍，就是字号的大小 */ line-height: 1; padding-bottom: 8px; } /* 去掉列表的符号 */ .box ul { list-style: none; } .box li { height: 50px; border-bottom: 1px dashed #ccc; padding-left: 28px; line-height: 50px; } .box a { text-decoration: none; color: #666; font-size: 17px; } .box a:hover { color: #ff8400; } 最新文章/New Articles
10、外边距折叠现象：
1）合并现象：
> 场景：垂直布局的块级元素，上下的 margin 会合并
> 结果：最终两者距离为 margin 的最大值
> 解决方法：避免就好
· 只给其中一个盒子设置margin即可
2）塌陷现象：
> 场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
> 结果：导致父元素一起往下移动
> 解决方法:
1．给父元素设置 border-top 或者 padding-top (分隔父子元素的 margin-top )
2．给父元素设置 overflow: hidden;
3．转换成行内块元素
4.设置浮动
11、行内元素的垂直内外边距：
> 如果想要通过 margin 或 padding 改变行内标签的垂直位置，无法生效。
> 行内标签的 margin-top 和 margin-bottom 不生效。
> 行内标签的 padding-top 和 padding-bottom 不生效。
