前端CSS(补充)
一. 盒子模型
margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
border:盒子的包装厚度(边框)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
content:物体大小(文本内容)
补充知识:去除ul中自带的样式
<!DOCTYPE html> <html lang="en"> <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> </ul> </body> </html>
相对浏览器页面margin设置为0 (可简写 margin:0;)
body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; }
margin参数的个数不同分别对应的位置:
width: 20px; height: 20px; border: 3px solid black; margin: 10px 20px 30px 40px; /* !*上右下左*!*/ /*第一个参数是上下,第二个参数是左右, auto水平居中*/ margin: 10px 20px;
margin: 20px auto;
padding参数的个数不同分别对应的位置 (与margin相同):
width: 200px; height: 200px; border: 3px solid green; /*padding-top: 50px;*/ padding: 10px 20px 30px 40px; /*!*上右下左*!*/ /*第一个参数是上下,第二个参数是左右*/
padding: 10px 20px;
二. 浮动
1.float
关于浮动的两个特点:
- 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
.c1 { width: 50px; height: 50px; background-color: red; float: left; } .c2 { width: 50px; height: 50px; background-color: green; float: left; }
可用left,right,none三种取值, 存在父标签塌陷问题(边框内无任何内容):
2.浮动页面布局(2,8开):
body { margin: 0; } .c1 { height: 1000px; width: 20%; float: left; background-color: red; } .c2 { height: 1000px; width: 80%; float: right; background-color: green; }
3.清除浮动的副作用(父标签塌陷问题):
<!DOCTYPE html> <html lang="en"> <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> </html>
三.overflow溢出属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 50px; width: 50px; border: 3px solid red; overflow: scroll; } </style> </head> <body> <div> fasdfhsfhdlhksdfsdklafklsdafkjsdakfjklsjdafklsjdafkljsdaklfj;skldajfksjdaf </div> </body> </html>
圆形头像示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: darkgray; } .c1 { width: 80px; height: 80px; border: 5px solid white; border-radius: 50%; overflow: hidden; } img { width: 100%; } </style> </head> <body> <div class="c1"> <img src="3.png" alt=""> </div> </body> </html>
效果:
四.定位
相对定位(relative): 相对于标签本身原来的位置
width: 100px; height: 100px; background-color: red; top: 100px; left: 100px; position: relative; (static, 默认值,无定位)
绝对定位(absolute): 相对于已经定位过的父标签(小米购物车)
height: 200px; width: 400px; background-color: pink; position: absolute; top: 50px; left: 100px;
固定定位(fix): 相对于浏览器窗口固定在某一个位置 (回到顶部)
border: 3px solid black; width: 80px; height: 80px; position: fixed; right: 20px; bottom: 20px;
是否脱离文档流:
脱离文档流:
1.浮动
2.绝对定位
3.固定定位
不脱离文档流:
1.相对定位
五. 模态框(z-index): 设置对象的层叠顺序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c2 { background-color: rgba(128,128,128,0.4); 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>
六.透明度参数的区别 (rbga第4个参数是文本内容的透明度,opacity是背景的透明度):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 200px; height: 50px; background-color: rgba(128,128,128,0.3); } .c2 { opacity: 0.3; } </style> </head> <body> <div class="c1">fjskdafdsfklskdfl</div> <div class="c2">fjksdjfkjdsfjklsdf;lkdsf</div> </body> </html>
效果:
七 . cnblog页面html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cnblog</title> <link rel="stylesheet" href="blog.css"> </head> <body> <div class="blog-left" > <div class="blog-avatar"> <img src="3.png" alt=""> </div> <div class="blog-title"> <p>Hansome的博客</p> </div> <div class="blog-info"> <p>这个人很懒,什么都没留下</p> </div> <div class="blog-link"> <ul> <li><a href="">about me </a></li> <li><a href=""> 微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="blog-tag"> <ul> <li><a href="">#Python </a></li> <li><a href="">#JAVA </a></li> <li><a href="">#GOlang </a></li> </ul> </div> </div> <div class="blog-right"> <div class="article-list"> <div class="article-title"> <span class="title">寻隐者不遇</span> <span class="date">2019-5-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">2019-5-31</span> </div> <div class="article-body"> <p>锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦</p> </div> <div class="article-bottom"> <span>#Python </span> <span>#Javascript</span> </div> </div> </div> </body> </html>
css代码:
/*这是博客页面的css样式表*/ /*通用样式*/ body { margin: 0; background-color: azure; } a {text-decoration: none;} ul { list-style-type: none; padding-left:0 ; } .clearfix:after { content: ""; clear: both; display: block; } /*博客左侧样式*/ .blog-left { float:left; position:fixed; left:0; width: 20%; height:100%; background-color: cadetblue; } .blog-avatar{ width: 150px; height:150px; border:5px solid white; border-radius: 50%; margin: 20px auto; overflow: hidden; } .blog-avatar img { width: 100%;} .blog-title,.blog-info{ color:darkgray; text-align: center; } .blog-link a,.blog-tag a { color: darkgray; } .blog-link a:hover,.blog-tag a:hover { color: white; } .blog-link ul,.blog-tag ul { text-align: center; margin-top: 60px; } /*博客右侧样式*/ .blog-right { float: right; width: 80%; } .article-list { background-color: white; 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: 1px solid black; } .article-body p { font-size: 18px; text-indent: 18px; } .article-bottom span{ margin-left: 20px; }
效果:
补充:
显示与隐藏的三种方式:
一. display:
值为none时,盒子会被隐藏,且不在页面中占位,底下的盒子会顶上来
值为block时,盒子会显示
因为none与block之间没有一个过渡态,所以不会呈现一个动画效果
二. opacity:
值为0~1,控制盒子的透明度,但是消失后,在页面中占位
.box4 {
/*背景颜色不能操作文本*/
/*background-color: rgba(0,0,0,0);*/
opacity: 0;
/*过度效果*/
transition: 1s;
}
.box3:hover ~ .box4 {
opacity: 1;
}
.box4:hover {
opacity: 1;
}
三. 支持动画渐变过程,也不占位
.box6 {
width: 0;
height: 0;
/*超出content以外的内容如何处理:hidden隐藏*/
overflow: hidden;
transition: 1s 0s ease;
/*过渡得我属性个数可以自定义*/
/*transition-property: width, background-color, height;*/
transition-property: all;
}
.box5:hover ~ .box6 {
width: 200px;
height: 200px;
background-color: pink;
}
.box6:hover {
width: 200px;
height: 200px;
background-color: pink;
盒子阴影
.box {
width: 200px;
height: 200px;
background-color: orange;
margin: 200px auto;
/*opacity: 0;*/
transition: .3s;
}
.box {
/*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
/*box-shadow: -300px 0 10px 0 red, 300px 0 10px 0 blue;*/
}
.box:hover {
margin-top: 195px;
box-shadow: 0 5px 10px 0 #333;
}
三大定位:
一.固定定位:
.box {
width: 260px;
height: 420px;
background-color: orange;
}
/*固定定位
1、定位属性值:fixed
2、在页面中不再占位(浮起来了)
3、一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局
4、固定定位的参考系是页面窗口(不是页面中的哪一点,而是四边参照四边)
5、左右同时存在,取左;同理上下取上
*/
.box {
position: fixed;
/*left: 10px;*/
right: 10px;
/*bottom: 50%;*/
top: calc(50% - 210px);
}
二.绝对定位:
<style>
.sup {
width: 180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
.sub {
width: 50px;
height: 80px;
background-color: red;
}
/*绝对定位:
1、定位属性值:absolute
2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)
3、一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局
4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点,而是四边参照四边)
5、左右同时存在,取左;同理上下取上
6、当父级定位了,子级参照父级定位,又可以重新获取父级宽度(也可以在计算中拿到父级高度)
*/
.sub {
position: absolute;
left: calc(50% - 25px);
right: 0;
bottom: 0;
top: calc(50% - 40px);
}
/*需求:
1)父级需要定位 - 辅助自己绝对定位,作为自己绝对定位的参考系
2)父级定位了,但是不能影响自身原有布局 - 虽然定位,但是不浮起来
结论:相对定位 => 父相子绝
*/
.sup {
/*父级相对定位的目的:1)不影响自身布局 2)辅助自己绝对定位布局*/
position: relative;
}
三.相对定位
.box {
width: 300px;
height: 300px;
background-color: orange;
margin: 0 auto;
}
h1 {
margin: 0;
}
/*相对定位:
1、定位属性值:relative
2、在页面中依旧占位,完全保留之前的所有布局
3、一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局
4、相对定位的参考系是自身原有位置(当前位置)(不是自身中的哪一点,而是四边参照四边)
5、左右同时存在,取左;同理上下取上,布局移动后,也不影响自身原有位置(兄弟布局也不会变化)
作用:辅助于子级的绝对定位布局,一般不用于自身布局
*/
.box {
position: relative;
/*left: -10px;*/
bottom: 20px;
top: 400px;
}