1、ul去除自带的样式
<head><meta charset="UTF-8"><title>Title</title><style>ul {list-style-type: none; /*去除前面的点之类的*/padding-left: 0; /*到边框左侧的边距*/}</style></head><body><ul><li>书籍1</li><li>书籍2</li><li>书籍3</li><li>书籍4</li><li>书籍5</li></ul></body>
原来的有前面的样式及缩进：
去除后的效果：
2、盒子模型
margin：用于控制元素与元素之间的距离。
padding：内填充，用于控制内容与边框之间的距离
border：边框，是内容外的边框
content：内容，显示文本和图像
关于padding、margin、border的具体用法见如下代码：
<head><meta charset="UTF-8"><title>Title</title><style>/*去除body体内容到页面的边距*/body {margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 0;}.c1 {width: 100px;height: 100px;border: 3px solid red;/*下面内容距离20像素*//*margin-bottom: 20px;*/margin: 10px 20px; /*第一个参数是上下边距，第二个参数是左右*/}.c2 {width: 100px;height: 100px;/*加实线边框*/border: 3px solid green;margin-top: 30px;margin-left: 20px;}.c3 {width: 20px;height: 20px;border: 3px solid black;/*margin: 10px 20px 30px 40px; !*上右下左*!*/margin: 0 auto; /*第一个参数是上下，第二个是左右，auto是自动调节*/}.c4 {width: 200px;height: 200px;border: 3px solid green;/*padding-left: 20px; 内容距离左边*//*padding-top: 50px; 内容距离顶部*//*padding: 10px 20px 30px 40px; !*上右下左*!*//*padding: 10px 20px; 第一个参数是上下，第二个是左右*//*padding: 10px 20px 30px; 第一个用于上，第二个是左右，第三个是下*/padding: 60px; /*只提供一个用于四边*/}</style></head><body><div class="c1"><div class="c3"></div></div><div class="c2">div</div><div class="c4">div</div></body>
效果：
3、浮动：浮动元素会生成一个块级框
具体的浮动过程及其注意点
body内代码：
<body><div id="d1"><div class="c1"></div><div class="c2"></div></div></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;}
效果：
浮动页面布局：
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.c1 {height: 1000px;width: 20%;float: left;background-color: red;}.c2 {height: 1000px;width: 80%;float: right;background-color: green;}</style></head><body><div class="c1"></div><div class="c2"></div></body>
效果：页面铺满，二八分
float的三个浮动取值：
left：向左浮动
right：向右浮动
none：默认值，不浮动
浮动带来的影响：
父标签的塌陷问题（脱离文档流），没有给父标签继承clearfix的时候，外边框会塌陷，也就是无法包满所有的元素。解决的方法就是清除浮动的伪元素清除法：
.clearfix:after {content: "";display: block;clear: both;}
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.c1 {border: 3px solid black;}.c2 {width: 80px;height: 80px;background-color: red;float: left;}.c3 {width: 80px;height: 80px;background-color: green;float: left;}/*.c4 {*//*clear: left; !*规定标签的左边不能有浮动的元素*!*//*}*/.clearfix:after {content: '';clear: both;display: block;}.c4 {width: 40px;height: 40px;background-color: tomato;}</style></head><body><div class="c1 clearfix"><span class="c4">span</span><div class="c2"></div><div class="c3"></div></div></body>
效果：
4、overflow：溢出
文本内容超出框体大小会溢出。
这时就需要用到overflow属性来处理，overflow属性如下;
overflow（水平和垂直均设置）overflow-x（设置水平方向）overflow-y（设置垂直方向）
div {height: 50px;width: 50px;border: 3px solid rebeccapurple;overflow: scroll;}
将overflow设为scroll后，效果如下：
5、圆形头像示例
<head><meta charset="UTF-8"><title>Title</title><style>body {background-color: darkgray;}.c1 {width: 100px;height: 100px;border: 5px solid white;border-radius: 50%;overflow: hidden;}img {width: 100%;}</style></head><body><div class="c1"><img src="1.png" alt=""></div></body>
效果：
6、定位
相对定位:相对于标签本身原来的位置
绝对定位:相对于已经定位过的父标签(小米购物车弹框)
固定定位:相对于浏览器窗口固定在某一个位置(例如回到顶部按钮)
注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.c1 {width: 100px;height: 100px;background-color: red;top: 100px;left: 100px;}.c2 {width: 100px;height: 100px;background-color: green;}</style></head><body><div class="c1"></div><div class="c2"></div></body>
原始效果：
给c1类中加一条相对定位，相对定位，不脱离文档流，即它原来的位置还保留，不会被其他标签填补
position: relative;
效果：
绝对定位：脱离文档流
position: absolute;
效果：
固定定位：脱离文档流
position: fixed;
效果：
绝对定位示例2：
<head><meta charset="UTF-8"><title>Title</title><style>.c1 {width: 200px;height: 100px;background-color: #FF6800;position: relative;}.c2 {height: 200px;width: 400px;background-color: pink;position: absolute;top: 50px;left: 100px;}.c3 {height: 50px;width: 50px;background-color: black;}</style></head><body><div class="c1">购物车<div class="c2">购物车里什么宝贝都没有！</div><div class="c3"></div></div></body>
效果：
固定定位示例2：
右下角固定按钮返回顶部
<head><meta charset="UTF-8"><title>Title</title><style>.c1 {border: 3px solid black;width: 80px;height: 80px;position: fixed;right: 20px;bottom: 20px;padding: 10px;}.c2 {height: 4000px;}.c3 {width: 80px;height: 80px;background-color: red;}.c4 {width: 80px;height: 80px;background-color: yellow;}</style></head><body><div class="c3"></div><div class="c1"><a href="#">点我返回</a></div><div class="c4"></div><div class="c2"></div></body>
7、模态框
z-index：设置对象的层叠顺序
z-index 值表示谁压着谁，数值大的压盖住数值小的，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-indexz-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
自定义一个模态框：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自定义模态框</title><style>.c2{background-color: rgba(128,128,128,0.3);position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;}.c3 {width: 200px;height: 50px;background-color: white;position: fixed;top: 50%;left: 50%;z-index: 1000;margin-top: -25px;margin-left: -100px;}</style></head><body><div class="c1">你看那人，好像一条狗啊</div><div class="c2"></div><div class="c3"></div></body></html>
c3的z-index值大于c2，所以，c3压在c2上面
效果：
8、透明度参数的区别
opacity：用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。针对的是颜色和文字
rgba()：也可定义透明效果，但是针对的是颜色
9、顶部导航菜单示例
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>li标签的float示例</title><style>/*清除浏览器默认外边距和内填充*/* {margin: 0;padding: 0;}a {text-decoration: none; /*去除a标签默认的下划线*/}.nav {background-color: black;height: 40px;width: 100%;position: fixed;top: 0;}ul {list-style-type: none; /*删除列表默认的圆点样式*/margin: 0; /*删除列表默认的外边距*/padding: 0; /*删除列表默认的内填充*/}/*li元素向左浮动*/li {float: left;}li > a {display: block; /*让链接显示为块级标签*/padding: 0 15px; /*设置左右各15像素的填充*/color: #b0b0b0; /*设置字体颜色*/line-height: 40px; /*设置行高*/}/*鼠标移上去颜色变白*/li > a:hover {color: #fff;}/*清除浮动 解决父级塌陷问题*/.clearfix:after {content: "";display: block;clear: both;}</style></head><body><!-- 顶部导航栏 开始 --><div class="nav"><ul class="clearfix"><li><a href="">玉米商城</a></li><li><a href="">MIUI</a></li><li><a href="">ioT</a></li><li><a href="">云服务</a></li><li><a href="">水滴</a></li><li><a href="">金融</a></li><li><a href="">优品</a></li></ul></div><!-- 顶部导航栏 结束 --></body></html>
效果：
10、搭建博客页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>shj的个人博客</title><link rel="stylesheet" href="my.css"></head><body><!--页面左边--><div class="blog-left"><div class="blog-avatar"><img src="1.png" alt=""></div><div class="blog-title">shj的个人博客</div><div class="blog-info"><p>这个人很帅，帅的什么都没有留下</p></div><div class="blog-link"><ul><li><a href="" target="_blank">关于我</a></li><li><a href="/weixin_40406241" target="_blank">csdn博客</a></li><li><a href="/BigMasterSun" target="_blank">github</a></li></ul></div><div class="blog-tag"><ul><li><a href="">Python</a></li><li><a href="">Java</a></li><li><a href="">JavaScript</a></li></ul></div></div><!--页面右边--><div class="blog-right"><div class="article-list"><div class="article-title"><span class="title">震惊！！！某刘姓青年越狱...</span><span class="date">-05-30</span></div><div class="article-body"><p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">中美贸易战插曲</span><span class="date">-05-30</span></div><div class="article-body"><p>美国女主播日前恶意造谣抹黑中国，CGTN主持人刘欣女士对其言论加以反驳，双方约定于5月30日辩论孰是孰非！让我们拭目以待！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">震惊！！！某刘姓青年竟然...</span><span class="date">-05-30</span></div><div class="article-body"><p>近日有网友爆料，每天都有人在厕所吃东西，舀马桶里的水喝，到底是谁呢？经过了解，原来是一个天生残疾的刘姓青年，我们一定要关爱残障人士！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">刘姓青年厕所吃东西后续</span><span class="date">-05-30</span></div><div class="article-body"><p>在上次报到了刘姓青年的生活后，社会各界人士伸出援助之手，脑残无情人有情，大家都尽力帮他，有网友表示想领养他去自家厕所，因为自家厕所的好！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">中国70周年庆典</span><span class="date">-05-30</span></div><div class="article-body"><p>中华人民共和国七十周年庆典即将到来，今年也是中国最重要的一年，完成了很多重要的大事，中华复兴，只在眼前！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">震惊！！！某刘姓青年越狱...</span><span class="date">-05-30</span></div><div class="article-body"><p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">震惊！！！某刘姓青年越狱...</span><span class="date">-05-30</span></div><div class="article-body"><p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">震惊！！！某刘姓青年越狱...</span><span class="date">-05-30</span></div><div class="article-body"><p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">震惊！！！某刘姓青年越狱...</span><span class="date">-05-30</span></div><div class="article-body"><p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="article-list"><div class="article-title"><span class="title">震惊！！！某刘姓青年越狱...</span><span class="date">-05-30</span></div><div class="article-body"><p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p></div><div class="article-bottom"><span>#Python</span><span>#Javascript</span></div></div><div class="c1"><a href="#">返回顶部</a></div></div></body></html>
外部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;}
效果：
