html、css自测

最新推荐文章于 2023-02-01 20:01:28 发布

zackor_

最新推荐文章于 2023-02-01 20:01:28 发布

阅读量217

点赞数

分类专栏：学习实习文章标签： css html css3

本文链接：https://blog.csdn.net/zackor_/article/details/121992174

版权

学习同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

实习

3 篇文章 0 订阅

订阅专栏

掌握行内元素、块级元素是什么，及其区别

行内不占一块，依附于其他的块级元素，不可设置宽高，只能设置水平方向位置

块级是独占一块，可设置宽高，水平和垂直位置都可以设置

14、掌握margin、padding的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="background-color: red; width: 1000PX;margin-top: 100px;margin-left: 500px;">
        <h1 style="text-align: center; background-color: purple; width: 500px;margin-top: 10px;margin-left: 50px;">bbbbb</h1>
        <span style="text-align: center; background-color: royalblue; width: 500px;">aaaaaaaa</span>
    </div>
</body>
</html>

2、css的盒子模型有哪些，及其区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="a" style="background-color: red; 
    /* margin-top: 100px; margin-left: 400px;margin-right: 100px;margin-bottom: 100px; */
    display: flex;justify-content: center;align-items: center;
    /* padding-left: 100px;padding-top: 100px;padding-bottom: 100px;padding-right: 100px; */
    border: 2px double #000;text-align: center;
    width: 300px; height: 300px;
    position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            ">
        aaaaaaaa
    </div>
</body>
</html>

3、css优先级

内部 id class 标签其他

4、css3新特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .button{
        background-color: purple;
        border: none;
        color: white;
        padding: 15px 32px;
        margin: 4px 2px;
       

    }

    .button1{
        box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0,0,0,0.19) ;
    }
    .button2:hover{
        box-shadow:  0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) ;
    }
</style>
<body>
    <div style="background:radial-gradient(closest-side circle,red , blue);;;width: 200px;height: 200px;
    border: black 2px solid;border-bottom-left-radius: 10px;
   position: absolute   ;
   top:0;
   bottom: 0;
   right: 0;
   left: 0;
    margin: auto;
    box-shadow:  0px 8px 10px 0px rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
        <h1>aaaaaaaa</h1>
       
    </div>

    <button class="button button1">阴影</button>
    <button class="button button2">阴影</button>
</body>
</html>

5、说说对BFC的理解

Block formatting context 让块成为独立元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            position: relative   ;
    margin: auto;
            margin: auto ;
            padding: 0;
        }

        body{
            width: 100%;
           
            position: relative;

            
            
        }

        .left{
            
            width: 100px;
            height: 100px;
            float: right;
            background-color: red;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }       

        .right{
            overflow: hidden;
            height:300px;
            background-color: purple;
            text-align: center;
            line-height: 50px;
            font-size: 40px;
        }




        p{
            color: white;
            background:red;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 30px;
        }
/* 
        div{
            overflow: hidden;
        } */

        .parent {
            border: 5px solid red;
            width: 300px;
            overflow: hidden;
        }

        .child1 {
            border: 5px solid purple;
            width: 100px;
            height: 100px;
            float: left;
        }
        .child2 {
            border: 5px solid purple;
            width: 100px;
            height: 100px;
            float: right;
        }


    </style>
</head>
<body>
    <!-- <p>margin1</p>
<div>
    <p>margin2</p>
</div> -->
    <!-- <div class="left">left</div> -->
    <!-- <div hidden; class="right">right</div> -->

    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

</body>
</html>

6、说说margin合并，margin塌陷，及其解决方法

平方向上的margin累加,而兄弟结构垂直方向上的margin是合并的

解决方法:如何触发一个盒子的bfc,在父级盒子上用这些方法任意一个都行,根据实际情况选择使用
1.position:absolute;设置定位后自然就变成了bfc元素了
2.display:inline-block
3.float:left/right
4.overflow:hidden

<div class="a">
  <div class="b">
    </div>
</div>
//塌陷

<div class="c">
</div>
<div class="d">
</div>
//合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrpper{
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-top: 150px;
    }

    .content{
        width: 50px;
        height: 50px;
        background-color: purple;
        margin-top: 50px;
    }
</style>
<body>
    <div class="wrpper">
        <div class="content"></div>
    </div>
</body>
</html>

7、浮动，清除浮动的几种方式，为什么要清除浮动

给子类设置浮动的时候父类就会被顶起来形成一条线浮起来了。

将父类设置height

添加 clear:both;

BFC方法 “内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素”

after伪元素、before和after双伪元素

 .clearfloat{
           *zoom: 1;
       }

       .clearfloat::after{
           content:"";
           display: block;
           height: 0;
           clear: both;
           visibility: hidden;
       }
//、
 .clearfloat{
           zoom: 1;
       }

       .clearfloat::after,.clearfloat::before{
           content: "";
           display: table;
       }

       .clearfloat::after{
           clear: both;
       }

<!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>
       .father{
           width: 200px;
           /* height: 200px; */
           border: red 1px solid;
           /* overflow: hidden; */
       }

       .big{
           width: 100px;
           height: 100px;
           background-color: orange;
           float: left;
       }

       .small{
           width: 50px;
           height: 50px;
           background-color: purple;
           float: left;
       }

       .foot{
           width: 400px;
           height: 50px;
           background-color: blue;
       }

       /* .clearfloat{
           *zoom: 1;
       }

       .clearfloat::after{
           content:"";
           display: block;
           height: 0;
           clear: both;
           visibility: hidden;
       } */
       .clearfloat{
           zoom: 1;
       }

       .clearfloat::after,.clearfloat::before{
           content: "";
           display: table;
       }

       .clearfloat::after{
           clear: both;
       }
       /* .clear{
           clear: both;
       } */
   </style>
</head>
<body>
    <div class="father clearfloat">
        <div class="big">big</div>
        <div class="small">small</div>
        <!-- <div class="clear">clear消除浮动</div> -->
    </div>
    <div class="foot">bottom</div>
</body>
</html>

8、position

static静态定位位置不会发生改变不会脱离文档流

fixed 固定定位相对与浏览器定位脱离文档流

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
</head>
<style>
    .a{
        height: 2000px;
        margin: auto;
        background-color: cornsilk;
        z-index: 1;
    }
    .b{
        width: 200px;
        height: 200px;
        background-color: brown;
        right: 0;
        /* left: 100; */
        top: 50%;
        bottom: 50%;
        /* float: right; */
        position: fixed;
        z-index: 2;
        clear: both;
    }

    
</style>
<body>
    <div class="b"></div>
    <div class="a"></div>
   
</body>
</html>

relative 相对定位相对与自身不会脱离文档流

absolute 绝对定位相对于父级元素的定位，如果没有父级元素时相对于窗口的定位不会脱离文档流

9、flex布局

内容垂直居中：

display: flex;
        justify-content: center;
        align-items: center;

10、三栏布局

11、画一个三角形

*当盒子模型中的内容(Content)+填充(Padding)的大小为0px时，Border边的形状将由梯形变为三角形。*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .triangle2{
    
        height: 0;
        width: 0;
        border-left: 100px solid purple;
        border-right: 50px solid transparent;
        border-bottom:100px solid transparent;
    }
    .triangle3{

height:0px;
width:0px;
border-left:20px solid transparent;
border-right:20px solid transparent ;
border-bottom:20px solid #000 ;

    }
    .triangle4{
        height: 0px;
        width: 0px;
        position: absolute;
        right: 0;
        content: 0;
        padding: 0;
        border-left: transparent 50px solid  ;
        border-right: transparent 100px solid;
        border-top: wheat 0px solid;
        border-bottom: yellow 100px solid;
    }
    .triangle1{
height:0px;
width:0px;
border-left:20px solid transparent;
border-right:20px solid transparent ;
border-bottom:20px solid #FF9800;

    }
</style>
<body>
    <div class="triangle1"></div>
    <div class="triangle3"></div>
    <div class="triangle2"></div>
    <div class="triangle4"></div>
</body>
</html>

12、实现单行文本溢出省略号

13、多行文本溢出省略号

zackor_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html、css自测

掌握行内元素、块级元素是什么，及其区别行内不占一块，依附于其他的块级元素，不可设置宽高，只能设置水平方向位置块级是独占一块，可设置宽高，水平和垂直位置都可以设置14、掌握margin、padding的区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg..
复制链接

扫一扫