zoukankan      html  css  js  c++  java
  • 前端页面常见布局问题

    一、选择器权重问题;

    ! important>内联样式(1,0,0,0)>id选择器(0,1,0,0)>类选择器、属性选择器、伪类选择器(0,0,1,0)>元素选择器、伪对象(0,0,0,1)>  通配符选择器(0,0,0,0)>继承的属性>浏览器默认样式。

    二、盒模型的理解

     所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

    margin(外边距) - 清除边框外的区域,外边距是透明的。 

    border(边框) - 围绕在内边距和内容外的边框。 
    padding(内边距) - 清除内容周围的区域,内边距是透明的。 
    content(内容) - 盒子的内容,显示文本和图像。

    在标准的盒子模型中,width指content部分的宽度 

    在IE盒子模型中,width表示content+padding+border这三个部分的宽度 

    三、使用display:none和visibility:hidden隐藏的区别

    1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
    2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

    四、文档流,脱离文档流的方法

      文档流:将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流。

      脱离文档流:元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

    脱离文档流的三个方法:

    1.float

    2.fixed

    3.absolute 

    五、描述一下浮动的原理和如何清除浮动

    六、请求首部

    https://www.cnblogs.com/jycboy/archive/2017/02/17/http_head.html 

    https://blog.csdn.net/holmofy/article/details/68492045 

    七、Repaint与reflow是什么

    Reflow(渲染): 对于每个DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的,开发人员定义的)来计算并根据计算结果将元素放到它出现的位置,这个过程称为 reflow。
    Repaint(重绘):当各种盒子的位置、大小以及其他属性,例如颜色、字体大小都确定下来后,浏览器便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint.


     https://www.cnblogs.com/yunshangwuyou/p/9580712.html

    八、边距重叠解决方案(BFC)

    举一个边距重置的例子:父元素没有设置margin-top,而子元素设置了margin-top:20px;可以看出,父元素也一起有了边距。 

    首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”
    BFC的原理
    1.内部的box会在垂直方向,一个接一个的放置
    2.每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
    3.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
    4.bfc的区域不会与浮动区域的box重叠
    5.bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
    6.计算bfc高度的时候,浮动元素也会参与计算
     怎么取创建bfc
    1.float属性不为none(脱离文档流)
    2.position为absolute或fixed
    3.display为inline-block,table-cell,table-caption,flex,inine-flex
    4.overflow不为visible
    5.根元素
    应用场景
    1.自适应两栏布局
    2.清除内部浮动 
    3.防止垂直margin重叠

     1.BFC的使用场景–可以用来自适应布局。

    <!-- BFC不与float重叠 -->
    <section id="layout">
    <style media="screen">
    #layout{
    background: red;
    }
    #layout .left{
    float: left;
    width: 100px;
    height: 100px;
    background: #664664;
    }
    #layout .right{
    height: 110px;
    background: #ccc;
    overflow: auto;
    }
    </style>
    <div class="left"></div>
    <div class="right"></div>
    <!-- 利用BFC的这一个原理就可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。 -->
    </section>

      2.BFC的使用场景–可以清除浮动:

    <!-- BFC子元素即使是float也会参与计算 -->
    <section id="float">
    <style media="screen">
    #float{
    background: #434343;
    overflow: auto;
    }
    #float .float{
    float: left;
    font-size: 30px;
    }
    </style>
    <div class="float">我是浮动元素</div>
    </section>
     
     1.BFC的使用场景–解决垂直边距重叠:
    <section class="top">
    <h1></h1>
    margin-bottom:30px;
    </section>

    <!-- 给下面这个块添加一个父元素,在父元素上创建bfc -->
    <div style="overflow:hidden">
    <section class="bottom">
    <h1></h1>
    margin-top:50px;
    </section>
    </div>
  • 相关阅读:
    html的一些基本属性介绍
    html的一些基本语法学习与实战
    getline()和get()的使用区别
    浅谈JS执行环境及作用域
    vue的第一个commit分析
    移动端适配-rem(新)
    电商类业务梳理
    不同类型的状态码及含义
    TCP/IP简记
    前端性能优化小结(持续更新)
  • 原文地址:https://www.cnblogs.com/yunshangwuyou/p/9638359.html
Copyright © 2011-2022 走看看