web学习笔记--css(3)

最新推荐文章于 2024-05-24 16:17:34 发布

SkyeBCI

最新推荐文章于 2024-05-24 16:17:34 发布

阅读量783

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/void_worker/article/details/80929196

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文是CSS学习笔记的第三部分，主要介绍了行高的设置方法，包括如何实现多行文本垂直居中；详细讲解了伪类的概念及四种基本状态：link、visited、hover、active；探讨了背景属性的应用；并深入阐述了定位，包括静态定位、相对定位、绝对定位、子绝父相和固定定位的概念和特性，并提供了相关代码实例。

摘要由CSDN通过智能技术生成

CCS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)

web学习笔记–css(3)

8.行高

设置当行文本垂直居中的方式：只需要将行高设置和盒模型的高度设置一致即可。
文本在它的行高里面永远都是垂直居中的。

设置多行文本垂直居中显示：
step1：设置行高line-height，数行数n，文字的高度h_font=行数*行高
step2：用总的高度h-文字的高度h_font，再除以2，就是padding_top的值
step3：为了保持总的高度不变，需要将总的高度h自减padding_top求出修改后的总的高度h

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
p{
width: 500px;
/*原高度 600px*/
/*height: 600px;*/
/*为了保持总高度不变，将总高度减去padding_top的值*/
height: 350px;
border:1px solid black;
margin: 100px;
text-align: center;
line-height: 20px;

/*padding_top求法：(原高度height - （行高line_height * 行数n）) / 2 */
/*即：( 600px - (20 * 5) ) / 2 = 250 */
padding-top: 250px;
}
</style>
</head>
<body>
<p>我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦</p>

</body>
</html>

9.伪类

伪类：同一标签根据用户的不同状态显示不同的样式
共四类：link、visited、hover、active

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*link是用户鼠标未点击链接之前所产生的样式*/
/*a{*/
/*color: aquamarine;*/
/*font-size: 30px;*/
/*background-color: mediumpurple;*/
/*}*/
a:link{
color: orangered;
font-size: 10px;
text-decoration: none;
background-color: yellow;
}
/*visited表示用户鼠标单击访问完链接之后产生的样式*/
/*访问之后：字体颜色，背景颜色可以继承，字体大小，下划线不可以继承*/
a:visited{
color: grey;
font-size: 100px;
text-decoration: underline;
background-color: lime;
}
/*hover表示用户鼠标经过产生的样式*/
a:hover{
color: lightskyblue;
font-size: 90px;
text-decoration: underline;
background-color: lime;
}
/*active表示用户鼠标点击该链接不松手时候产生的样式*/
a:active{
color: black;
font-size: 50px;
text-decoration: none;
text-shadow: 3px 3px 3px black;
background-color: lime;
}

</style>
</head>
<body>
<a href="伪类_跳转页面.html" class="">我要去跳转页面</a>

</body>
</html>

10.background属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url(../img/yellow.png);
}
.box{
width: 1000px;
height: 1000px;
border: 1px solid red;
margin: 0 auto;

/*background设置，分开写*/

/*background-color: lightsteelblue;*/

/*url:uniform rescource locator 统一资源定位符*/
/*背景图片默认的会铺满整个屏幕，是重复的*/
background-image: url(../img/hand.jpg);
/*设置背景图片不重复平铺*/
background-repeat:no-repeat;
/*background-repeat:repeat-x;*/

/*修改背景图片的位置：参数分别表示x轴、y轴上的偏移位置*/
/*background-position: 100px 100px;*/
background-position: center center;

/*修改背景图片大小*/
background-size: cover;

/*background设置 总起来写*/
background: url("../img/hand.jpg") no-repeat top center ;

}
</style>
</head>
<body>
<div class="box">
我是一个盒模型
</div>
</body>
</html>

11.定位

11.1 静态定位 static

11.2 相对定位 relitive

相对定位的性质：
01 相对定位的元素仍在文档标准流中
02 移动的参考点是自己原来位置的四个点
03 相对定位常用来微调元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.box1{
width: 300px;
height: 300px;
background-color: red;
}
.box2{
/*设置定位方式：相对定位*/
/*相对定位依然在文档标准流中*/
position: relative;

/*相对参考点是原来位置的点*/
/*设置位移值*/

/*参考点为左上*/
/*top: 30px;*/
/*left: 30px;*/

/*top: -30px;*/
/*left: 30px;*/

/*参考点为右下*/
right: -30px;
bottom: 30px;

width: 300px;
height: 300px;
background-color: green;
}
.box3{
width: 300px;
height: 300px;
background-color: blue;
}

</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

</body>
</html>

11.3 绝对定位 absolute

绝对定位性质：
01 绝对定位的元素脱离文档标准流
02 绝对定位的盒子的参考点是浏览器的第一个窗口/页面的四个点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.box1{
width: 300px;
height: 300px;
background-color: red;
}
.box2{
/*设置定位方式：相对定位*/
/*相对定位依然在文档标准流中*/
position: relative;

/*相对参考点是原来位置的点*/
/*设置位移值*/
/*参考点为左上*/
/*top: 30px;*/
/*left: 30px;*/
/*top: -30px;*/
/*left: 30px;*/
/*参考点为右下*/
/*right: -30px;*/
/*bottom: 30px;*/

width: 300px;
height: 300px;
background-color: green;
}
.box3{
/*定位方式：绝对定位*/
/*绝对定位的参考点是浏览器的第1个窗口/页面 */

position: absolute;
width: 300px;
height: 300px;
background-color: blue;
left: 100px;
top: 30px;;
}
.box4{
width: 350px;
height: 350px;
background-color: yellow;
}

</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

</body>
</html>

11.3 子绝父相

子绝父相：设置子元素为绝对定位父盒子为相对定位，子元素的参考点是父盒子的四个点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            /*父元素*/
            /*父元素用相对定位，参考点是父元素之前的位置*/
            width: 900px;
            height: 900px;
            border:1px solid red;
            margin: 80px auto;
            position: relative;
        }
        p{
            /*子元素*/
            /*子元素为绝对定位，参考点是父元素的四个点*/
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>我是子盒子</p>
    </div>
</body>
</html>

当父元素有很多个时，一个小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        li{
            /*给了父元素一个浮动，消除了文档标准流*/
            width: 400px;
            height: 300px;
            border: 1px solid red;
            border-radius: 10px;
            margin-right: 20px;
            margin-bottom: 20px;
            float: left;
            position: relative;
            list-style: none;
        }
        .box{
            /*子元素的参考点仍为父元素的四个点*/
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: blue;
            width: 100px;
            height: 40px;
            background-color: green;
        }
    </style>
</head>
<body>
<ul>
    <li><div class="box">旅游哈哈</div></li>
    <li><div class="box">旅游哈哈</div></li>
    <li><div class="box">旅游哈哈</div></li>
    <li><div class="box">旅游哈哈</div></li>
    <li><div class="box">旅游哈哈</div></li>
    <li><div class="box">旅游哈哈</div></li>
    <li><div class="box">旅游哈哈</div></li>
</ul>

</body>
</html>

11.4 固定定位

固定定位：fixed：相对浏览器窗口定位。
不管页面如何滚动，这个盒子显示的位置不变。
固定定位脱离文档标准流

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .back_top{
            /*定位属性：固定定位*/
            position: fixed;
            bottom: 10px;
            right: 10px;

            width: 300px;
            height: 200px;
            line-height: 100px;
            background-color: grey;
            text-align: center;
        }
        a{
            display: block;
            text-decoration: none;
            color: #ffffff;
        }
        a:hover{
            background-color: red;
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="back_top" ><a href="#">返回<br>顶部</div>
    <div class="content">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
        <img src="../img/mountain.jpg" alt="" class="">
    </div>



</body>
</html>