本文主要是介绍CSS day_03(6.14) 内外间距、元素隐藏溢出、版心，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、内间距
元素的内间距叫做padding
1.四个方向的内间距
| 上内间距 padding-top 右内间距 padding-rigth 下内间距 padding-bottom 左内间距 padding left |
2.内间距的简写形式
| 简写形式： padding:10px; 上右左下：10 padding:10px 20px; 上下10 左右20 padding:10px 20px 30px; 上10 左右20 下30 padding:10px 20px 30px 40px; 上10右20下30左40 永远是上右下左（按顺时针顺序）4个方向，没有的就找对门 |
3.内联元素的内间距
| 内联元素的左右间距正常生效 上下内间距，会产生“视觉效果”实际没作用，还会出现布局样式的堆叠，所以内联尽量不要使用上下内间距。 img比较特殊，图片的四个方向的padding均生效 |
二、外间距
外间距margin设置的是当前元素在四个方向上与其他元素的距离，这个距离不属于当前元素本身的大小，利用外间距还能够实现元素的移动
1.四个方向的外间距
| 上外间距 margin-top，元素顶部与其他元素的距离，移动的是元素本身 右外间距 margin-rigth，元素右侧与其他元素的距离，移动的是右侧的其他元素 下外间距 margin-bottom，元素底部与其他元素的距离，移动的是底部的其他元素 左外间距 margin-left，元素左侧与其他元素的距离，移动的是元素本身 记忆诀窍：以上为尊，以左为尊，要礼让，所以是元素本身移动 |
2.外间距的简写形式
| 简写形式： margin:10px; 上右左下：10 margin:10px 20px; 上下10 左右20 margin:10px 20px 30px; 上10 左右20 下30 margin:10px 20px 30px 40px; 上10右20下30左40 永远是上右下左（按顺时针顺序）4个方向，没有的就找对门 |
3.外间距的重叠【难点】
| 在文档流的流式布局中： 1.块级元素在竖直方向上相邻的margin会发生合并现象，取最大值显现 解决：既然会重叠，那我们给一个元素设置margin就好了 2.父元素中第一个和最后一个子元素都有和父元素"重叠的边"，实际是margin超出了父元素的范围 3.由于首尾子元素与父元素贴合的原因，无法区分边归属于谁，所以子元素的上下外间距会带着父元素一起动 解决父子重叠问题【要点】 1.给父元素加边框可以把子元素完全包裹进来(包括首尾子元素margin),解决父子元素贴边的问题 2.可以给父元素增加上、下内间距，把第一个和最后一个子元素挤开(推荐) 3.给父级设置块级格式化上下文(BFC)overflow：hidden；(先记着，后面细说) |
4.外间距的视觉效果
| 四周的空间并不在元素内部，而是在元素内部 margin不带任何的背景颜色 对于行内元素（比如span a i b...）左右的margin生效，上下的margin不生效 对于img，行内块元素（button、input...）等四个方向的margin是生效的
|
5.外间距的取值
| 正负值都可以用，正值是增加距离，0是紧挨着，负值是减少距离 auto 自动，只能在流式布局中让块级元素左右方向的外间距自动计算成等值，出现水平居中的效果 注意移动时，上/下 左/右 只能选一个方向，不能既往左移动，又往右移动 |
三、元素的隐藏与显示
| 1.display:none; 脱离文档流的消失，元素隐藏，且不保留布局空间 |
| 2.visibility:hidden; 隐藏元素，但保留布局空间 visibility:visible; 默认，不隐藏 不脱离文件流 |
| 3.opacity:0; 透明元素但保留布局空间 透明值0~1 0完全透明 1完全不透明 注意：这里的元素透明度，包含元素中所有的内容 |
四、页面的版心
| 版心的概念指的是页面布局中主体内容所在的区域 一般在浏览器居中显示的主体部分叫做版心，一般用于PC端(笔记本电脑、台式机等)布局 基于显示器的常见分辨率，一般有960px、1024px 、1200px 注意：PC端页面一定要写版心，版心的宽度由设计提供的。 |
五、元素的溢出
| 当前元素超出了父级元素的范围空间时，会出现子元素溢出的情况 一般默认块级元素没有范围(宽高)，子元素可以可以随意增加，它会撑大父元素 只有父元素限制范围，并且子元素的内容又大于父元素的限制范围才会出现溢出。 |
| overflow:同时控制水平与竖直方向的溢出(一个元素的内容从宽/高中溢出) overflow-x:水平方向溢出(一个元素的内容从宽中溢出) overflow-y:竖直方向溢出(一个元素的内容从高中溢出) 可取的属性值： overflow: visible; /*默认值，溢出可见*/ overflow: hidden; /*溢出隐藏，溢出部分截掉*/ overflow: scroll; /*侧边和下边都有滚动条 */ overflow: auto; /*自动加滚动条，需要的时候加*/ 注意： 计算机中的坐标轴与数学概念不一样，屏幕的左上角才是原点，所以x指的是向右，y指的是向下 |
六、怪异盒子模型(边框盒子)
之前我们学习的是默认的盒子模型计算方案，内容盒子box-sizing:content-box;
| 边框盒子：box-sizing:border-box; |
| 一个元素水平方向上占用的总空间(边框盒子)： margin-left+width(padding+border+content)+margin-right 一个元素竖直方向上占用的总空间(边框盒子)： margin-top+height(padding+border+content)+margin-bottom |
七、拓展
面试题：如果两张图片中间想要留一点空白，可以有哪些实现方案？哪种好?为什么？
|
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片之间留白方案</title> <style> /* 方案1：给图片添加透明边框：不适用于图片本身需要边框的情形 */ /* 给左边图片加右边框 */ /* .left {border-right: 30px solid rgba(255,0,0,0);}*/ /* 给右边图片加左边框 */ /* .right {border-left: 30px solid rgba(0,255,0,0.3);} */
/* 方案2：添加外间距 */ /* 给左边图片加右外间距 */ /* .left {margin-right: 35px;} */ /* 给右边图片加左外间距 */ /* .right {margin-left: 35px;} */
/* 方案3：添加内边距 */ .left {padding-right: 40px;} .right {padding-left: 40px;}
/* 但是！！！无论是边框 外边距 内边距 添加哪个都会导致宽度变大，导致元素溢出 */ </style> </head> <body> <img src="img/2.jpg" class="left"><img src="img/2.jpg" class="right"> </body> </html> |
这篇关于CSS day_03(6.14) 内外间距、元素隐藏溢出、版心的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
