html和css高级

最新推荐文章于 2024-05-03 12:12:21 发布

Zz Apollo

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量1.3w

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/ch_improve/article/details/90138157

版权

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.元素块居中

设置元素块的位置相对父元素居中
margin:0px auto; <!–设置外边框的左右尺寸为‘自动’–>

2.css显示特性

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

2.1 none 元素隐藏且不占位置

2.2 inline 元素以行内元素（内联元素）显示

2.3 block 元素以块元素显示

举例：

<!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>
        /* 设置display属性，将块元素转化成内联元素（行内元素） */
        div{
            display: inline;
        }
        a{
            /* 设置display属性，将内联元素转化成块元素 */
            display:block;
        }
        p{
            /* 设置display属性，将元素隐藏起来 */
            display:none;
            width: 200px;
            height: 200px;
            background:gold;

        }
    </style>
</head>
<body>
    <div>这是第一个div</div>
    <div>这是第二个div</div>
    <a href="#">这是一个链接</a>
    <a href="#">这是另一个链接</a>
    <p> 
        这是第一个p标签
    </p>
</body>
</html>

效果：

在这里插入图片描述

3.css元素溢出

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

overflow设置项：

（1）visible 默认值。内容不会被修改，会呈现在父元素框之外
（2）hidden 内容会被修改，并且其余内容不会显示在父元素框外部
（3）scroll 不会显示在父元素矿外部，但是可以通过父元素的滚动条来查看溢出的内容
（4）auto 如果内容溢出父元素框，则显示滚动条，否则不显示滚动条
举例：

<style>
        .d1{
            width: 150px;
            height: 100px;
            border:2px solid black;
            float:left;
            margin-left:10px;
        }

        /* 父元素设置overflow属性
            visible：默认设置，显示超出部分
            hidden：将超出的部分隐藏
            scroll：不管是否超出，都会显示滚动条，可以通过滚动条显示超出的部分
            auto：根据子元素具体是否超出父元素，智能显示滚动条 */
        .visible{overflow:visible;}
        .hidden{overflow:hidden;}
        .scroll{overflow:scroll;}
        .auto{overflow:auto;}

        .d2{
            width: 100px;
            height: 200px;
            background: gold;
        }
    </style>
<body>
    <div class="d1 visible">
        <div class="d2">这是visible样式</div>
    </div>
    <div class="d1 hidden">
        <div class="d2">这是hidden样式</div>
    </div>
    <div class="d1 scroll">
        <div class="d2">这是scroll样式</div>
    </div>
    <div class="d1 auto">
        <div class="d2">这是auto样式</div>
    </div>
    
</body>

效果图：在这里插入图片描述

4.表格元素及相关样式

（1）<table>标签：声明一个表格
（2）<tr>标签：定义表格中的一行
（3）<td>标签：定义一行中的一个普通单元格
（4）<th>标签：定义一行中的一个表头单元格
表格相关样式属性
border-collapse:collapse; 设置表格的边线合并
举例：

<!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>
        table{
            width: 500px;
            height: 200px;
            border:2px solid black;
            /* 设置表格的边线合并 */
            border-collapse:collapse;
        }
        th{
            border:1px solid black;
            /* 设置每个单元格的宽度为总宽度的20%，
            否则单元格默认宽度会根据填写内容自动调整 */
            width:20%;
            background:hotpink;
        }
        td{
            border:1px solid black;
            text-align:center;
        }

    </style>
</head>
<body>
    <!-- 快捷创建 table>(tr>td*5)*4 -->
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
            <td>python-12</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>24</td>
            <td>python-13</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张红</td>
            <td>女</td>
            <td>22</td>
            <td>python-12</td>
        </tr>
    </table>
</body>
</html>

效果：
在这里插入图片描述

5.定位

5.1.文档流

是指盒子按照html标签编写的的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排后面，每个盒子都占据自己的位置。

5.2.关于定位

5.2.1.使用css和position属性来设置元素的定位类型，position的设置有relative、absolute、fixed，具体如下:

（1）relative 生成相对定位元素，依然占据原有文档流，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对body来定位
举个栗子(代码只写了关键内容)：

......
<style>
        .com{
            width: 300px;
            height: 300px;
            border:1px solid black;
            margin:0px auto;
        }
        .com div{
            width: 200px;
            height: 70px;
            margin:10px;
        }
        .box1{
            background:blueviolet;

            /* 设置相对定位relative */
            position:relative;
            left:30px;
            top:30px;
        }
        .box2{
            background: greenyellow;
        }
        .box3{
            background: violet;
        }
    </style>
........
        <div class="com">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
        </div>
.......

效果：
在这里插入图片描述
（2）absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
举个栗子：

......
<style>
        .con{
            width: 300px;
            height: 300px;
            border:1px solid black;

            /* 父级设置为相对定位，不设置偏移，子级就能相对父级设置绝对定位 */
            position:relative;
        }
        .con div{
            width: 200px;
            height: 70px;
        }
        .box1{
            background:green;

            /* 设置绝对定位 absolute */
            position:absolute;
            left:30px;
            top:30px;
        }
        .box2{
            background: blue;
        }
        .box3{
            background:hotpink;
        }
    </style>
......
<body>
    <div class="con">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
......

效果：
在这里插入图片描述
（3）fixed 固定定位，元素脱离文档流，不占据文档流位置，相对于浏览器窗口进行定位
举个栗子：

......
<style>
        .com{
            width: 300px;
            height: 300px;
            border:1px solid black;
        }
        .com div{
            width: 200px;
            height: 70px;
            margin:10px;

        }
        .box1{
            background:hotpink;
            position:fixed;
            left:150px;
            top:70px;
        }
        .box2{
            background:brown;
        }
        .box3{
            background: wheat;
        }
    </style>
......
<body>
    <div class="com">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
......

效果：
在这里插入图片描述

5.2.2.定位元素的偏移

定位的元素还需要用left、right、top、bottom来设置相对于参照元素的偏移值

5.2.3.定位元素的层级

定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置层级
格式：
z-index: n;
数字n越大，元素越靠上，n值较大的默认遮挡较小的

Zz Apollo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html和css高级

1.元素块居中设置元素块的位置相对父元素居中margin:0px auto;       <!–设置外边框的左右尺寸为‘自动’–>2.css显示特性display属性是用来设置元素的类型及隐藏的，常用属性有：2.1 none 元素隐藏且不占位置2.2 inline 元素以行内元素（内联元素）显示2.3 ...
复制链接

扫一扫