个人摸底测试总结（第二天）

标签：总结 height width 测试 left div 摸底 margin 200px

01，如何将下面的代码改得更有语义化？

    <div>
        <h1>这是一个标题</h2>
        <p>这是一个文字</p>
        <ul>
            <li>列表一</li>
            <li>列表二</li>
        </ul>
    </div>

语义化：更合理，方便阅读，有利于SEO

02、哪些标签是块标签？有哪些是行内标签？

块级标签：div，p，h，header，footer，nav，main，aside、section、article

行内标签：span，i，b，a

行内块标签：img。input

03、行内标签与块标签有什么区别？

块标签：不设宽高跟随父级，能设宽高，独占一行，可设padding，margin，能嵌套标签（p除外）

行内标签：跟随自己是被撑开得，不能设宽高，共享一行，只能设置padding，margin左右，不能嵌套

行内块：共享一行，能设宽高，padding，margin

如何转换，用display:block， display:inline，display:inline-block

04、阅读下面的代码，div的offsetWidth是多少？

offsetWidth：width/height + border + padding

box-sizing : border-block 盒子模型等于 = width/height

05、阅读下面的代码，“文字”与“标题”的间距是多少？

margin 上下塌陷，左右是叠加

塌陷谁大听谁得

06、margin设置top、left、right、bottom负值后，会发生什么？

top left 会影响自身向相反得方向移动 right bottom 形象别人向相反得方向移动

07、什么是BFC？如何应用？

block format context 块级格式上下文，一个独立渲染的区域，内部元素的渲染不会影响边界外的元素

形成bfc得条件是 float，position，overflow，dispaly：inline-blcok，flex

08、如何实现圣杯布局

方法一：

    <style>
        *{
            margin:0;
            padding: 0;
        }
        .box div{
            height: 200px;
            float: left;
        }
        .box{
            margin-left: 300px;
            margin-right: 300px;
        }
        .content{
            width: 100%;
            min-width: 400px;
            background-color: aqua
        }
        .left{
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: red;
        }
        .right{
            margin-right: -300px;
            width: 300px;
            background-color: blue
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">123</div>
        <div class="left">1</div>
        <div class="right">2</div>
    </div>
</body>

方法二：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height:50px;
            background-color: red;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

09、如何清除浮动？手写clearfix

一，overflow：hidden

二，display：inline-block

三，父级也float，四父级定位（不用）

五，手写clearfix

clearfix：alter{
     content："";
     clear:both;
     display:block
}

10、div垂直水平居中？

方法一，

        div{
            widows: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom:0;
            margin: auto
        }

方法二，

        div{
            width:200px;
            height:200px;
            position:absolute;
            left: 50%;
            top:50%;
            margin-left: -100px;
            margin-top: -100px;
        }

方法三，

        div{
            width:200px;
            height:200px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }

方法四，

        .box{
            height: 500px;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        .box > div{
            width: 200px;
            height: 200px;
        }

方法五，

        div{
            width: 200px;
            height: 200px;
            display: flex;
        }
        div>div{
            width: 100px;
            height: 100px;
            margin: auto;
        }

方法六，

        div {
            width: 200px;
            height: 200px;
            display: flex;
        }
        div>div{
            width: 100px;
            height: 100px;
            margin: auto;
            align-self: center;
        }

11、px/%/em/rem/vw/vh有什么区别？

px 是固定，像素

%根据父级计算

1em等于1fontsize大小

1rem 等于 html fontsize

1vw=整个视窗宽度的1% 1vh=整个可视窗口高度的1%

14、CSS选择器优先级

!important > 行间样式 > id > class > 标签 > *

15、定位

position:absloute
fixed
relative
static

标签：总结,height,width,测试,left,div,摸底,margin,200px
From： https://www.cnblogs.com/LiuSan/p/16820471.html