zoukankan      html  css  js  c++  java
  • 常见前端面试题01

    1.盒子水平垂直居中

    (1) 定位1:需要知道元素的定位元素的宽高

    在这里插入图片描述

    (2)定位2:父亲的宽高需要限定

    在这里插入图片描述

    (3)定位3:不需要父有具体宽高限制(兼容性不如上边Ie9+)

    在这里插入图片描述

    (4)display:flex(ie10+)

    在这里插入图片描述

    (5)js实现就是模拟css写样式

    元素的id可以直接拿来当作dom
    在这里插入图片描述

    (6)固定宽高的父级 display:table-cell 子级inline-block

    在这里插入图片描述

    2.盒模型标准

    content、padding、border、margin

    标准盒模型(content-box)、ie怪异盒模型(border-box)、flex弹性伸缩盒模型column多列盒模型

    怪异盒模型的好处,固定到border控制宽高,不用重新计算padding和border

    flex详见阮一峰的flex布局
    在这里插入图片描述

    3.几大经典布局

    – 左右固定、中间自适应

    实现的效果图如下:
    在这里插入图片描述

    (1).使用calc计算中间盒子的宽度

    在这里插入图片描述

    (2).使用flex

    在这里插入图片描述

    (3).定位实现

    在这里插入图片描述

    –移动端响应式布局

    *媒体查询(一套)

    *rem(应用于两套 中的移动端)

    flex

    vh/vw


        感谢您花时间阅读此篇文章,如果您觉得看了这篇文章之后心情还比较高兴,可以打赏一下,请博主喝上一杯咖啡,让博主继续码字……
        本文版权归作者和博客园共有,来源网址:https://blog.csdn.net/weixin_46498102 欢迎各位转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接
  • 相关阅读:
    openmediavault 5.5.23 安装插件失败的解决方案
    qt下载地址
    qt 5.12 增加 mysql驱动
    选基金标准
    关注几个基金
    调仓的几个问题
    要读的书
    ubuntu 20.04 LTS 安装webmin
    set的常见用法
    斜率优化dp([HNOI2008]玩具装箱)
  • 原文地址:https://www.cnblogs.com/jackson1/p/13776476.html
Copyright © 2011-2022 走看看