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 欢迎各位转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接
  • 相关阅读:
    iOS越狱后必装软件
    构建iOS交叉编译环境
    pycurl库使用详解
    iFiles浏览iphone文件
    Iphone通过ssh进行访问
    YShow性能测试平台搭建
    from my mac
    LR性能分析
    react服务端渲染(七)redux添加
    react服务端渲染(六)路由
  • 原文地址:https://www.cnblogs.com/jackson1/p/13776476.html
Copyright © 2011-2022 走看看