zoukankan      html  css  js  c++  java
  • css面试题(一)

    一,盒子水平居中垂直居中的五大方案;https://www.cnblogs.com/fsg6/p/12707898.html

    二,圣杯布局(左右固定,中间自适应)https://www.cnblogs.com/fsg6/p/14530741.html

     三,标准盒模型和怪异盒模型(ie盒子模型)和flex弹性模型

    2-1 content-box
    标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。
    标准盒模型下盒子的大小  = content + border + padding + margin
    
    2-2 border-box(怪异盒模型,ie模型)
    怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);height指的是内容、边框、内边距总的高度
    怪异盒模型下盒子的大小=width(content + border + padding) + margin
    (一般用怪异盒模型,只要给width,自动会计算,不用调padding )
    
    2-3。flex弹性盒布局,一般在移动端用的多,开启flex容器,可以对子项的主轴和侧轴进行排列,兼容性不好
        justify-content属性定义了项目在主轴上的对齐方式。
        align-items属性定义项目在交叉轴上如何对齐。
    
    CSS Grid 网格布局教程:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

    延伸问题

    js如何获取和模型对应的宽和高
    (1)dom.style.width/height 只能取到行内样式的宽和高,style 标签中和 link 外链的样式取不到。
    (2)dom.currentStyle.width/height (只有IE兼容)取到的是最终渲染后的宽和高
    (3window.getComputedStyle(dom).width/height 同(2)但是多浏览器支持,IE9 以上支持。通用性强
    (4)dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高,大多浏览器支持。IE9 以上支持,除此外还可以取到相对于视窗的上下左右的距离。通用性强
    (5dom.offsetWidth/offsetHeight 包括高度(宽度)、内边距和边框,不包括外边距。最常用,兼容性最好。


    高度塌陷以及边距重叠问题;https://www.cnblogs.com/fsg6/p/12715048.html

    4.说说样式权重的优先级;

    !important > 行内样式 > id > class > tag

    样式权重可以叠加, 比如 id>class

  • 相关阅读:
    初探Remoting双向通信(三)
    MySQL主从复制
    MySQL锁机制
    mySql索引
    连接池
    JDBC
    数据库建表、约束、索引
    Oracle和SQL简介
    Stream API 和 注解
    lambda表达式
  • 原文地址:https://www.cnblogs.com/fsg6/p/14537794.html
Copyright © 2011-2022 走看看