css笔记
-
a{ /*去掉下划线*/ text-decoration: none; /*字体颜色*/ color: black; } /*鼠标悬浮的状态*/ a:hover{ color: rgb(254,0,0); font-size: 30px; }
-
列表
#nav{ width: 250px; } .title{ /*字体大小*/ font-size: 18px; /*字体样式*/ font-family: 宋体; /*字体变粗*/ font-weight: bold; /*字体前面的间距*/ text-indent: 2em; /*字体上下的高度*/ line-height: 35px; background: red; } /*ul{*/ /* background: #c2bebe;*/ /*}*/ ul li{ /* list-style: circle:空心圆 none:去掉圆点 decimal:数字 square:正方形 */ list-style: none; /*行间距*/ height: 30px; /*文字缩进*/ text-indent: 1em; } a{ /*超链接没有下划线*/ text-decoration: none; /*超链接字体大小*/ font-size: 14px; /*超链接字体颜色*/ color: black; } /*超链接伪类*/ a:hover{ /*鼠标放上去变色*/ color: orange; /*鼠标停留加下划线*/ text-decoration: underline; }
-
渐变
https://www.grabient.com/
-
盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xwmA4C0P-1610948574302)(C:\Users\66473\AppData\Roaming\Typora\typora-user-images\image-20210117173620375.png)]
margin:外边距
padding:内边距
border:边框
h1,a,ul,li,body{ margin: 0; text-decoration: none; padding: 0; }
-
头像制作
div{ /*标签宽度*/ width: 100px; /*标签高度*/ height: 100px; /*标签居中*/ margin: 0 auto; /*正方形的四个角设置*/ border-radius: 50px; /*导入图片*/ background-image: url("../css2/images/img.png"); }
-
display
div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline; } li{ display: inline; }
这个也是一种实现行内元素排列的一种方式,但是我们很多情况都是用float
-
float
左右浮动 float
-
父级边框塌陷问题
clear
/* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none; */
-
增加父级元素的高度~
-
增加一个空的div标签,清除浮动
<div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; }
-
overflow
1. 在父级元素中增加一个 overflow:hidden;
-
在父类添加一个伪类:after
#app:after{ content: ''; display: block; clear: both; }
小结:
-
浮动元素后面增加空div
简单,代码中尽量避免空div
-
设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
-
overflow
简单,下拉的一些场景避免使用
-
父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!
-
-
对比
-
display
方向不可控制
-
float
浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题~
-
-
定位
-
相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="father"> <div class="first">第一个盒子</div> <div class="second">第二个盒子</div> <div class="third">第三个盒子</div> </div> </body> </html>
body{ padding: 10px; } div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid red; padding: 0; /*相对定位,上下左右*/ } .first{ background-color: #C850C0; border: 1px dashed red; position: relative; top: -20px; right: -20px; } .second{ background-color: palevioletred; border: 1px dashed palevioletred; } .third{ background-color: orange; border: 1px dashed gold; position: relative; bottom: -20px; right: 20px; }
相对定位:position:relative
相对于原来的位置,进行指定的偏移,相对定位的话,它任然在标准文档流中,原来的位置会被保留
上:top
下:bottom
左:left
右:right
练习:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div id="father"> <a class="a1" href="#">连接1</a> <a class="a2" href="#">连接2</a> <a class="a3" href="#">连接3</a> <a class="a4" href="#">连接4</a> <a class="a5" href="#">连接5</a> </div> </body> </html>
div{ /*margin: 10px;*/ /*padding: 10px;*/ } #father{ border: 1px solid red; width: 300px; height: 300px; padding: 5px; } .a2{ position: relative; left: 200px; top: -100px; } .a3{ position: relative; left: 200px; } .a4{ position: relative; top: -100px; } .a5{ position: relative; top: -300px; left: 100px; } a{ width: 100px; height: 100px; text-decoration: none; line-height: 100px; background-color: #efcaed; display: block; text-align: center; } a:hover{ background-color: #afbcfc; }
-
绝对定位
定位:基于xxx定位,上下左右~
-
没有父级元素定位的前提下,相对于浏览器定位。
-
假设父级元素存在定位,我们通常会相对于父级元素进行偏移
-
在父级范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不 会被保留
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="father"> <div class="first">第一个盒子</div> <div class="second">第二个盒子</div> <div class="third">第三个盒子</div> </div> </body> </html>
body{ padding: 10px; } div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid red; padding: 0; /*相对定位,上下左右*/ position: relative; } .first{ background-color: #C850C0; border: 1px dashed red; } .second{ background-color: palevioletred; border: 1px dashed palevioletred; } .third{ background-color: orange; border: 1px dashed gold; width: 100px; position: absolute; top: -10px; right: 20px; }
-
-
固定定位fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } /*固定定位,相对于浏览器*/ div:nth-of-type(1){ width: 100px; height: 100px; background-color: #afbcfc; position: absolute; bottom: 0; right: 0; } /*固定定位*/ div:nth-of-type(2){ width: 50px; height: 50px; background-color: #efcaed; position: fixed; bottom: 0; right: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>
-
z-index 默认是0,最高无限制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <body id="content"> <ul> <li><img src="../css2/images/img.png" alt="#"></li> <li class="tipText">学习,找老师</li> <li class="tipBg"></li> <li>时间:2021-1-18</li> <li>地点:chain</li> </ul> </body> </body> </html>
#content{ width: 267px; margin: 0px; padding: 0px; /*浮起操作*/ overflow: hidden; /*ul li 前面的点消失操作*/ list-style: none; /*字体设置大小操作*/ font-size: 12px; /*行间距操作*/ line-height: 25px; /*设置边框*/ border: 1px solid red; } ul,li{ margin: 0; padding: 0; list-style: none; } /*父级元素相对定位*/ #content ul{ /*定位操作*/ position: relative; } .tipText,.tipBg{ position: absolute; height: 25px; width: 380px; top: 124px; } .tipText{ color: white; /*置顶操作*/ z-index: 999; } .tipBg{ width: 268px; background-color: black; /*透明操作*/ opacity: 0.5; }
-
-