css-面试题

乖女子@@@

已于 2022-10-11 11:11:57 修改

阅读量66

点赞数

分类专栏： 2022_html+css 文章标签： flex css

于 2021-03-27 16:49:53 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/115267187

版权

2022_html+css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.盒子模型

[1]css新型盒子模型

 <style>
      * {
        box-sizing: border-box;
      }
    </style>

[2]css旧盒子模型

 <style>
      * {
        box-sizing: content-box;
      }
    </style>

[3]两者的异同点

旧盒子模型
- 宽=width+padding+border;
- 高=height+padding+border;
新型盒子模型
- 宽=width;
- 高=height;
注意点：padding/margin单位若是百分比，相对的是父盒子的大小！

2.实现一个最大的正方形

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100%;
        /* 原因：body默认的高度为0，所以不能使用height:100%; 
                 但是padding/margin若是单位为百分比，相对于的是父元素的带线大小
                 所以，我们可以使用padding-top/padding-bottom:100%实现
        */
        padding-top: 100%;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>

3.一行水平居中，多行居左

display:flex;
justify-content:center;
flex-wrap:wrap;
align-content:flex-start;

4.水平垂直居中

定位+平移
- position:absolute;
- top:50%;
- left:50%;
- transform:translate(-50%,-50%);
- 注：绝对定位百分比相对于父元素，平移百分比相对于自身！
定义+margin
- position:absolute;
- top:50%;
- left:50%;
- margin-left:-自身一半；
- margin-top:-自身一半；

5.两栏布局，左边固定，右边自适应，左右不重叠；

启动右面盒子的BFC;
BFC知识点：css-BFC_乖女子@@@的博客-CSDN博客

6.实现左右等高布局

display:flex;
align-items:stretch;

乖女子@@@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-面试题

1.盒子模型[1]css新型盒子模型 <style> * { box-sizing: border-box; } </style>[2]css旧盒子模型 <style> * { box-sizing: content-box; } </style>[3]两者的异同点旧盒子模型宽=width+padding+border; 高=he
复制链接

扫一扫

专栏目录