某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！
web前端css之盒子模型，浮动，定位
1、ul去除自带的样式
Title
- 书籍1
- 书籍2
- 书籍3
- 书籍4
- 书籍5
原来的有前面的样式及缩进：
去除后的效果：
2、盒子模型
margin：用于控制元素与元素之间的距离。
padding：内填充，用于控制内容与边框之间的距离
border：边框，是内容外的边框
content：内容，显示文本和图像
关于padding、margin、border的具体用法见如下代码：
Title
div
div
效果：
3、浮动：浮动元素会生成一个块级框
具体的浮动过程及其注意点
body内代码：
正常布局：
body {
margin: 0;
}
#d1 {
border: 5px solid black;
}
.c1 {
width: 50px;
height: 50px;
background-color: red;
}
.c2 {
width: 50px;
height: 50px;
background-color: green;
}效果：
想要这两个div在同一行，我们会想到之前的display，可以把块级标签变成具有行内标签的特点：
body {
margin: 0;
}
#d1 {
border: 5px solid black;
}
.c1 {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.c2 {
width: 50px;
height: 50px;
background-color: green;
display: inline-block;
}效果：
可以看到中间还是有一段空白，其实最方便的还是浮动布局，如下：
body {
margin: 0;
}
.c1 {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.c2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
}效果：
浮动页面布局：
Title
效果：页面铺满，二八分
float的三个浮动取值：
left：向左浮动
right：向右浮动
none：默认值，不浮动
浮动带来的影响：
父标签的塌陷问题（脱离文档流），没有给父标签继承clearfix的时候，外边框会塌陷，也就是无法包满所有的元素。解决的方法就是清除浮动的伪元素清除法：
.clearfix:after {
content: "";
display: block;
clear: both;
}
Title
span
效果：
4、overflow：溢出
文本内容超出框体大小会溢出。
这时就需要用到overflow属性来处理，overflow属性如下;
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
div {
height: 50px;
width: 50px;
border: 3px solid rebeccapurple;
overflow: scroll;
}将overflow设为scroll后，效果如下：
5、圆形头像示例
Title
效果：
6、定位
相对定位:相对于标签本身原来的位置
绝对定位:相对于已经定位过的父标签(小米购物车弹框)
固定定位:相对于浏览器窗口固定在某一个位置(例如回到顶部按钮)
注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
Title
原始效果：
给c1类中加一条相对定位，相对定位，不脱离文档流，即它原来的位置还保留，不会被其他标签填补
position: relative;效果：
绝对定位：脱离文档流
position: absolute;效果：
固定定位：脱离文档流
position: fixed;效果：
绝对定位示例2：
Title
购物车
购物车里什么宝贝都没有！
效果：
固定定位示例2：
右下角固定按钮返回顶部
Title
7、模态框
z-index：设置对象的层叠顺序
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
自定义一个模态框：
自定义模态框
你看那人，好像一条狗啊
c3的z-index值大于c2，所以，c3压在c2上面
效果：
8、透明度参数的区别
opacity：用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。针对的是颜色和文字
rgba()：也可定义透明效果，但是针对的是颜色
9、顶部导航菜单示例
li标签的float示例
效果：
10、搭建博客页面
shj的个人博客
震惊！！！某刘姓青年越狱...
2019-05-30
#Python
#Javascript
中美贸易战插曲
2019-05-30
美国女主播日前恶意造谣抹黑中国，CGTN主持人刘欣女士对其言论加以反驳，双方约定于5月30日辩论孰是孰非！让我们拭目以待！
#Python
#Javascript
震惊！！！某刘姓青年竟然...
2019-05-30
近日有网友爆料，每天都有人在厕所吃东西，舀马桶里的水喝，到底是谁呢？经过了解，原来是一个天生残疾的刘姓青年，我们一定要关爱残障人士！
#Python
#Javascript
刘姓青年厕所吃东西后续
2019-05-30
在上次报到了刘姓青年的生活后，社会各界人士伸出援助之手，脑残无情人有情，大家都尽力帮他，有网友表示想领养他去自家厕所，因为自家厕所的好！
#Python
#Javascript
中国70周年庆典
2019-05-30
中华人民共和国七十周年庆典即将到来，今年也是中国最重要的一年，完成了很多重要的大事，中华复兴，只在眼前！
#Python
#Javascript
震惊！！！某刘姓青年越狱...
2019-05-30
某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！
#Python
#Javascript
震惊！！！某刘姓青年越狱...
2019-05-30
某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！
#Python
#Javascript
震惊！！！某刘姓青年越狱...
2019-05-30
某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！
#Python
#Javascript
震惊！！！某刘姓青年越狱...
2019-05-30
某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！
#Python
#Javascript
震惊！！！某刘姓青年越狱...
2019-05-30
某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！
#Python
#Javascript
外部css代码：
/*通用样式*/
body {
margin: 0;
background-color: #f0f0f0;
background: url("3.gif");
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
.clearfix{
content: "";
display: block;
clear: both;
}
/*博客左侧样式*/
.blog-left{
float: left;
position: fixed;
left: 0;
width: 20%;
height: 100%;
/*background-color: #4d4c4c;*/
}
.blog-avatar {
width: 150px;
height: 150px;
border: 5px solid white;
border-radius: 50%;
margin: 20px auto;
overflow: hidden;
}
img {
width: 100%;
}
.blog-title{
color: black;
font-size: 30px;
font-family: 华文隶书;
font-weight: bolder;
text-align: center;
}
.blog-info {
color: black;
font-family: 华文行楷;
font-size: 16px;
background-color: rgba(240,240,240,0.3);
text-align: center;
}
.blog-link a,.blog-tag a {
color: black;
}
.blog-link a:hover, .blog-tag a:hover{
background-color: rgba(240,240,240,0.3);
color: red;
}
.blog-link ul,.blog-tag ul{
background-color: rgba(240,240,240,0.3);
text-align: center;
margin-top: 60px;
}
/*博客右侧样式*/
.blog-right{
float: right;
width: 80%;
}
.article-list{
background-color: rgba(240,240,240,0.5);
margin: 20px 40px 20px 10px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4); /*框体阴影*/
}
.article-title{
border-left: 5px solid red;
}
.title{
font-size: 36px;
margin-left: 10px;
}
.date{
float: right;
font-size: 18px;
margin-top: 20px;
margin-right: 10px;
}
.article-body{
border-bottom: 2px solid black; /*下划线*/
}
.article-body p{
font-size: 18px;
text-indent: 18px; /*缩进18px*/
}
.article-bottom span{
margin-left: 20px;
}
.c1{
border: 3px solid darkgray;
width: 40px;
height: 40px;
position: fixed;
right: 10px;
bottom: 10px;
padding: 10px;
opacity: 0.3;
}
.c1 a:hover{
color: black;
}
.c1 a:active{
color: blue;
}效果：