前端修炼——html、css高级！

最新推荐文章于 2021-06-17 17:54:30 发布

python_QYF

最新推荐文章于 2021-06-17 17:54:30 发布

阅读量203

点赞数 1

分类专栏：前端学习每日笔记文章标签：前端学习每日笔记

本文链接：https://blog.csdn.net/qyf__123/article/details/82728893

版权

每日笔记同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端学习

10 篇文章 0 订阅

订阅专栏

内容概述：
元素的显示与隐藏、表格、定位、css 三大特性。

元素的显示与隐藏

css 显示特性

display属性是用来设置元素的类型及隐藏的，常用的属性有：

1、none 元素隐藏且不占位置

2、inline 元素以行内元素显示；把块级元素转换为行内元素

3、block 元素以块元素显示；把行内元素转换为块级元素

css 元素溢出（设置在父级上）

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：

1、visible 默认值。内容不会被修剪，会呈现在元素框之外。默认超出部分显示

2、hidden 内容会被修剪，并且其余内容是不可见的。 将超出部分隐藏

3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。不管是否超出，都会显示滚动条，

4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。动态显示滚动条

<!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>元素显示属性</title>
    <style>
        /* 设置 display 属性，将块元素转化成内联元素 */
        div{
            display: inline;
        }

        /* 设置 display 属性，将内联元素转化为块元素 */
        a{
            display: block;
        }

        .p01{
            width: 200px;
            height: 200px;
            background: gold;

            /* 设置 display 属性，将元素隐藏 */
            display: none;

        }

    </style>

</head>
<body>
    <div>这是第一个div</div>
    <div>这是第二个div</div>
    <a href="#">这是第一个链接</a>
    <a href="#">这是第二个链接</a>

    <p class="p01" style="display:block"></p>

    <div>这是下面的div</div>

</body>
</html>

<!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>元素溢出样式</title>
    <style>
        .con {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;
            /* 父元素设置 overflow 属性 */
            /* 
                visible: 默认设置，超出部分显示
                hidden: 超出部分不显示
                scroll: 不管是否超出，都会显示滚动条，来滚动显示超出的部分
                auto：动态显示滚动条
            */
            overflow: auto;

        }

        .box {
            width: 200px;
            height: 500px;
            background: red;

        }   
    </style>
</head>
<body>
    <div class="con">
        <div class="box"></div>
    </div>
</body>
</html>

表格

border-collapse:collapse 设置表格边线合并

<caption></caption> 表格标题

table 外边框

th 头

tr 内容

<!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>创建表格</title>
    <style>
        .table01 {
            width: 500px;
            height: 200px;
            border: 1px solid black;

            /* 设置表格的边线合并 */
            border-collapse: collapse;

            margin: 0px auto;

        }

        .table01 th{
            border: 1px solid black;
            background: lightskyblue;
            color: white;

        }

        .table01 td{
            border: 1px solid black;

            /* 设置文字水平居中 */
            text-align: center
        }


    </style>

</head>
<body>
    <!-- table>(tr>td*5)*4 -->
    <table class="table01">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>22</td>
            <td>python04</td>
        </tr>
        <tr>
            <td>2</td>
            <td>老王</td>
            <td>男</td>
            <td>28</td>
            <td>python04</td>
        </tr>
        <tr>
            <td>3</td>
            <td>狗蛋</td>
            <td>男</td>
            <td>21</td>
            <td>python04</td>
        </tr>
    </table>
</body>
</html>

定位

概念

文档流/ 标准流：元素在页面中要么水平排列，要么垂直排列

定位打破了文档流的排列规则

作用

随心所欲地的把元素定在页面的任何位置

分类

相对定位

position: relative; 表示相对定位

特点:

相对于元素自己左上角的位置

没有脱离标准流人走了位置还在

<!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>相对定位</title>
    <style>
        .con {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;

        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;

        }

        .box01 {
            background: lightgreen;

            /* 设置相对定位 */
            position: relative;
            left: 50px;
            top: 50px;

        }

        .box02 {
            background: lightskyblue;
        }

        .box03 {
            background: lightpink;

        }



    </style>

</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>
</html>

绝对定位

position: absolute; 表示绝对定位

特点：

相对于浏览器的左上角

脱离标准流人走茶凉

会跟着浏览器滚动

<!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>绝对定位</title>
    <style>
        .con {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;

            /* 父级设置为相对定位，不设置偏移，子级就可以以它为参照做绝对定位 */
            position: relative;

            /* 设置父级的溢出隐藏 */
            overflow: hidden;
        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;
        }

        .box01 {
            background: lightgreen;

            /* 设置相对定位 */
            position: absolute;
            left: 131px;
            top: 50px;
        }

        .box02 {
            background: lightskyblue;
        }

        .box03 {
            background: lightpink;

        }    
    </style>
</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>
</html>

固定定位

position:fixed; 表示固定定位

特点：

相对于浏览器的左上角

脱离标准流

不会随着浏览器的滚动而滚动

<!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>固定定位</title>
    <style>
        .con {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;

            /* 父级设置为相对定位，不设置偏移，子级就可以以它为参照做绝对定位 */
            position: relative;

            /* 设置父级的溢出隐藏 */
            overflow: hidden;
        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;
        }

        .box01 {
            background: lightgreen;

            /* 设置相对定位 */
            position: fixed;
            left: 131px;
            top: 50px;
        }

        .box02 {
            background: lightskyblue;
        }

        .box03 {
            background: lightpink;

        }    
    </style>
</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>
</html>

用法

子绝父相

子元素用绝对定位，父元素用相对定位

相对定位：

position: relative

相对定位：

position: absolute

固定定位:

position: fixed

CSS的三大特性（重点）

层叠

同类型的选择器，下面的样式覆盖掉上面的样式

就是长江后浪推前浪，前浪死在沙滩上。

继承

子元素会继承父元素的样式

子类只能够继承父类和文字相关的样式

就是龙生龙，凤生凤。

优先级：权重

style 行内样式 > id 选择器 > 类选择器 > 标签选择器

继承的权重为 0

权重公式：

0, 0， 0， 0

行内 id 类标签

左边大就用左边

只要有 !important 就使用这个，不过注意继承的权重为 0。

<!DOCTYPE html>
<html>
<head>
    <title>权重</title>

    <style type="text/css">
        /*  0,1,0,0 */
        #sm {
            color: black;
        }

         /*  0,0,3,0 */
        .damao .ermao .sanmao {
            color: pink;
        }
        /*  0,0,1,2 */
        div div .sanmao {
            color: skyblue;
        }
        /*  0,0,1,0 */
        .sanmao {
            color: blue;
        }

        /*  0,0,0,3 */
       div div div {
            color: green;
        }

       /*  0,0,0,1 */
        div {
            color: red !important;
        }


    </style>

</head>
<body>

      <!--   0,    0,   0,   0
            行内  id   类   标签 -->
    <div class="damao">
        <div class="ermao">
            <div class="sanmao" id="sm"> 我在最里层  三毛</div>
        </div>
    </div>

</body>
</html>