内容目录：
1.css盒子模型
2.浮动 float
3.溢出 overflow
4.定位 position
5. z-index
6.opacity
1.css盒子模型
margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)border:盒子的包装厚度(边框) padding:内部物体与盒子之间距离(文本与边框之间的距离) content:物体大小(文本内容)
(1)margin: margin-left margin-right margin-bottom margin-top margin:2px 3px 4px 5px; 顺序：上右下左 margin:10px 20px; 第一个参数：上下 第二个参数：左右 margin:10px auto; (2)padding: padding-left padding-right padding-bottom padding-top padding:2px 3px 4px 5px; 顺序：上右下左 padding:10px 20px; 与margin一样
2.浮动：float
float:right; float:left;只要页面布局，就都会用到浮动浮动带来的影响： 脱离文档流，造成父标签塌陷
三种解决方式： (a)固定高度 (b)伪元素清除法 (c)overflow:hidden 使用较多的 ---> 伪类清除法 ''' .clearfix:after { content:''; display:block; clear:both; } ''' 3.溢出 overflow
overflow:hidden;文本超出div的长度的时候会将其隐藏overflow:auto; 加上一个滑条（下方） overflow:scroll; 加上两个滑条（右边、下方）
4.定位 position
(1) 相对定位：相对于标签本身原来的位置(2) 绝对定位：相对于已经定位过的父标签(3) 固定定位：相对于浏览器窗口固定在某一个位置
1.static(静态): static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 2.relative(相对定位): 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。需要注意的是即使设置了元素的相对定位以及偏移值， 元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom， left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 注意： position：relative的一个主要用法：方便绝对定位元素找到参照物。 3.absolute(绝对定位): 设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素， 那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭。 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。 这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute; 父元素设置position:relative; 然后Top、Right、Bottom、Left用百分比宽度表示。 4.fixed(固定): 对象脱离正常文档流，使用top,right,bottom,left等属性以窗口为参考点进行定位，当滑动滚动条时， 对象会固定在原先位置，不会动！其层叠通过z-index属性定义。 注意：一个元素如果设置了position:absolute|fixed;那么该元素不能设置float。但relative可以。
脱离文档流： 绝对定位、固定定位不脱离文档流： 相对定位
5. z-index
#i2 { z-index:999;}设置对象的层叠顺序： 1.z-index值表示谁压着谁，数值大的压住数值小的 2.只有定位了的元素，才能有z-index，也就是说，不管相对定位、决定定位、固定定位，都可以使用z-index,而浮动元素不能使用 3.z-index值没有单位，就是一个正整数，默认为0 6.opacity
用来定义透明效果。取值范围是0~1， 0是完全透明，1是完全不透明
****************实现的例子*******************************
cnblog 天王盖地虎，小七一米五 2019-05-30天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五
SING ROCKET GIRL天王盖地虎，小七一米五 2019-05-30天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五
SING ROCKET GIRL天王盖地虎，小七一米五 2019-05-30天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五
SING ROCKET GIRL天王盖地虎，小七一米五 2019-05-30天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五
SING ROCKET GIRL天王盖地虎，小七一米五 2019-05-30天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五
SING ROCKET GIRL天王盖地虎，小七一米五 2019-05-30天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五
SING ROCKET GIRL天王盖地虎，小七一米五 2019-05-30天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五
SING ROCKET GIRL
/*博客页面的css样式表*//*通用样式*/body { margin: 0; background-color: lightgray;}/*清除超链接的下划线*/a { text-decoration: none;}/*清除ul列表前面的点和内边距*/ul { list-style-type: none; padding-left: 0;}/* 清除 浮动塌陷问题*/.clearfix:after { content: ''; clear: both; display: block;}/*左侧边栏的样式*/.blog-left { width: 20%; height: 100%; position: fixed; /*固定定位*/ background-color: rgba(0, 0, 0, 0.47);}/* 设置头像框*/.head-image { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; margin: 30px auto; overflow: hidden;}/* 设置 头像里面的照片 填充 */.head-image img { width: 100%;}/*设置 名字 和 介绍信息*/.blog-user-name,.blog-user-info { color: lightgray; text-align: center;}/* 左下方的联系方式 和 技术 的 ul*/.blog-contact ul,.blog-tech ul{ text-align: left; padding-left: 30%; margin-top: 80px; color: lightgray;}/* 超链接 a */.blog-contact a:link { color: white;}.blog-contact a:hover { color: red;}.blog-contact a:active { color: yellow;}.blog-contact a:visited{ color: #00e5ff;}/*----------右边内容的样式----------*/.blog-right { float: right; width: 80%;}/* 一篇文章整体*/.blog-content { border-radius: 5px; margin: 5px 10px; height: 150px; background-color: white; border: 1px solid darkgrey; box-shadow: 3px 3px rgba(0,0,0,0.3);}/* 一篇文章中， 标题整体 包括标题内容和时间*/.blog-title { border-left: 5px solid red;}/* 一篇文章中，标题内容 */.title { margin-left: 10px; height: 50%; font-size: 36px;}/* 一篇文章中， 最上面的标题后面的 时间*/.time { font-size: 16px; margin-top: 5px; float: right; color: darkgrey;}/* 一篇文章中， 中间的 内容摘要*/.blog-abstract { margin-left: 20px; padding-top: 10px ; height: 30%;}/*一篇文章中，最下方的 #Python # js*/.blog-content-tech { color: darkgrey; margin-left: 20px;}.blog-content-tech span{ display: inline-block; margin-left: 20px;}
插入的图片：
效果图：
