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 欢迎各位转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接
  • 相关阅读:
    Tesseract-OCR
    chrome浏览器插件推荐
    安装配置sublime Text 3 快捷键方式
    远程桌面与远程控制
    一个C#的XML数据库访问类
    WPF小程序:贪吃蛇
    恐惧源于一知半解
    8条佛曰 66句禅语
    自动开机 双网卡网络唤醒
    C#,Java,C++中的finally关键字
  • 原文地址:https://www.cnblogs.com/jackson1/p/13776476.html
Copyright © 2011-2022 走看看