css自录笔记完整

最新推荐文章于 2022-01-26 16:26:37 发布

^_^NeverStop

最新推荐文章于 2022-01-26 16:26:37 发布

阅读量94

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_45672607/article/details/112776860

版权

java 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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;
}
```
小结：
1. 浮动元素后面增加空div
  
  简单，代码中尽量避免空div
2. 设置父元素的高度
  
  简单，元素假设有了固定的高度，就会被限制
3. overflow
  
  简单，下拉的一些场景避免使用
4. 父类添加一个伪类：after（推荐）
  
  写法稍微复杂一点，但是没有副作用，推荐使用！
对比
1. display
  
  方向不可控制
2. 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;
}

^_^NeverStop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css自录笔记完整

css笔记a{ /*去掉下划线*/ text-decoration: none; /*字体颜色*/ color: black; } /*鼠标悬浮的状态*/ a:hover{ color: rgb(254,0,0); font-size: 30px; }列表#nav{ width: 250px;}
复制链接

扫一扫

专栏目录