css高频面试题

最新推荐文章于 2024-07-18 09:03:14 发布

Ma2219908547

最新推荐文章于 2024-07-18 09:03:14 发布

阅读量114

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/Ma2219908547/article/details/120001330

版权

本文详细介绍了CSS中使盒子垂直水平居中的多种方法，包括已知宽高和未知宽高的情况。同时，探讨了标准盒模型、IE盒模型和Flex盒模型的差异与应用场景。此外，还讲解了圣杯布局和双飞燕布局的实现原理，以及它们在网页三栏布局中的应用。最后，提到了Flex布局的简洁性和兼容性问题。

摘要由CSDN通过智能技术生成

如何让一个盒子垂直水平居中

1.需要宽高的方式

.box {
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;
    width:100px;
    height: 100px;
    background-color: red;
}

.box {
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    width:100px;
    height: 100px;
    background-color: green;
}

2.不需要宽高的方式

.box {
     background: orange;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

.box{
    justify-content: center; /*子元素水平居中*/
    align-items: center; /*子元素垂直居中*/
    display: flex;
}

父盒子需要宽高,子盒子要设置行内元素

.parentbox {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 300px;
    height: 300px;
    background-color: pink;
}
.childbox {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
}

总结

已知宽高的话

直接设置定位，top 50% left 50% 然后margin-top margin-left 各-(自己宽高的一般)即可
设置定位，上下左右对应的top bottom left right 全为0 ，然后margin auto 即可

不知道宽高

设置定位，left top 各 50%，然后transform translate(-50%,-50%) 即可
给他的父盒子display flex布局，然后justify-content center(水平居中) align-items center(垂直居中)即可
给他的父盒子设置display table-cell(控制文本的),然后vertical-align middle(垂直居中),再text-align center(水平居中)

简单说说盒模型

1.标准盒模型(box-sizing:content-box)

标准盒模型，width和height都只是决定文字content，他盒子的大小取决于content,padding,border

2.IE盒模型( 怪异盒模型 box-sizing:border-box)

IE盒模型，width和height 直接决定了盒子的大小，再放padding，border，会压缩content

3.flex盒模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUMVZLnz-1630314956323)(…/img/css3.png)]

flex盒模型，主要应用于移动端弹性布局，main axis控制x轴，justify-content可以控制盒子在x轴的位置，同理 cross axis控制y轴，align-items 控制盒子在y轴的位置

总结

首次使用标准盒模型，会因为设置padding，border来修改width和hight的值，因为不设置的话盒子会被撑大。然后了解到IE盒模型，就不用因为设置padding，border来实时修改width和hight的值。因为他的width和hight就是盒子的宽高

其次，移动端多常使用flex盒模型，main axis控制x轴，cross axis控制y轴，可以很方便的来控制盒子在页面中的布局

常见布局方式

1.圣杯布局

圣杯布局主要作用于pc端网页制作
目的
1. 两侧内容固定，中间内容宽度自适应
2. 三栏布局，中间一栏最先加载渲染出来(主要内容)

        body {
            min-width: 500px;
        }
        header,nav,footer {
            text-align: center;
        }
        #header {
            background-color: #f1f1f1;
        }
        #content {
            margin-left: 300px;
            margin-right: 200px;
        }
        #content #center {
            background-color: #ddd;
            width: 100%;
        }
        #content #left {
            background-color: orange;
            width: 300px;
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        #content #right {
            background-color: green;
            width: 200px;
            margin-right: -200px;
        }
        #content .column {
            float: left;
        }
        #footer {
            background-color: #f1f1f1;
            clear: both;
        }

    <h1>实现圣杯布局</h1>
    <header id="header">header</header>
    <nav id="content">
        <div id="center" class="column">center</div>
        <div id="left" class="column">left</div>
        <div id="right" class="column">right</div>
    </nav>
    <footer id="footer">footer</footer>

2.双飞燕布局

双飞燕布局和圣杯布局作用目的都一样。不一样的是

        body {
            min-width: 500px;
            text-align: center;
        }
        #main {
             background-color: #ddd;
             width: 100%;
        }
        #main #main-warpper {
            margin-left: 100px;
            margin-right: 50px;
        }
        #left {
             background-color: orange;
             width: 100px;
             margin-left: -100%;
        }
        #right {
            background-color: green;
            width: 50px;
            margin-left: -50px;
        }
        .column {
            float: left;
        }

    <h1>实现双飞翼布局</h1>        <div id="main"  class="column">            <div id="main-warpper">Main</div>    </div>    <div id="left" class="column">left</div>    <div id="right" class="column">right</div>

3.flex布局

        #content {            display: flex;            /* space-between是让他们均匀分布 */            justify-content: space-between;        }        #left,        #right {            /* 这里意思是即不放大也不缩小，然后占200px */            flex: 0 0 200px;             height: 200px;            background-color: green;        }        #center {            flex: 1;            background-color: blue;        }

    <nav id="content">        <div id="left" class="column">left</div>        <div id="center" class="column">center</div>        <div id="right" class="column">right</div>    </nav>