（20）HTML&&CSS笔记

最新推荐文章于 2024-09-29 11:01:57 发布

沭瑾

最新推荐文章于 2024-09-29 11:01:57 发布

阅读量138

点赞数 1

分类专栏： HTML&&CSS 文章标签： HTML CSS

本文链接：https://blog.youkuaiyun.com/xiaoma_666/article/details/98961613

版权

HTML&&CSS 专栏收录该内容

21 篇文章

订阅专栏

1、css继承：从某个元素继承属性
常见的文本样式，字体样式都可以继承；
继承父级属性可以用inherit；

        .wrap{
            width:100%;
            height:300px;
            border-bottom:5px solid #000;
            text-align:center;
            font-weight:bold;
            font-style:italic;
            font-size:40px;
            font-family: 'Times New Roman', Times, serif;
            color:purple;
        }
        p{
            background-color: #09f;
            border-bottom:inherit;
        }
     
  
     <div class='wrap'>
        123456789
        <p>123456789</p>
     </div>

2、阿里图标

font-class
unicode
symbol

3、定位补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{
            margin:0;
            padding:0;
        }
        body{
            /* height:2000px; */
        }
        /* .box{
            position: absolute;
            top:calc(50% - 100px);
            left:calc(50% - 100px);
            width:200px;
            height:200px;
            background-color: #000;
            margin:auto;
        } */
        .box{
            /* 绝对定位居中 */
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;
            width:200px;
            height:200px;
            background-color: #000;
        }
        /*
		.box{
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;
            width:200px;
            height:200px;
            background-color: #000;
        }
		*/
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>