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

内容概述:
    元素的显示与隐藏、表格、定位、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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值