zoukankan      html  css  js  c++  java
  • css盒模型

    1.ie模型和标准模型

    ie与标准的模型计算宽度和高度不同

    ie = content+padding+border

    标准 = content

    2.css如何设置这两种 模型呢

    默认的是标准模型

    box-sizing:content-box;

    box-sizing:border-box;

    3.js如何设置获取盒模型的宽高

    dom.style.width/height 内联属性(行内属性)

    dom.currentStyle.width/height    渲染结果  但是之后ie兼容

    window.getComputedStyle(dom).width/height

    dom.getBoundingClientRect().width/height 通过top left 计算

    4.根据盒模型解释边距重叠

     父与子的关系

    BFC是什么

    解决边距重叠 

    基本概念 块级格式化上下文

    原理:

    1.bfc是一个独立的容器,里外都不影响

    如何创建BFC

    overflow:hidden

    1、float的值不是none。
    2、position的值不是static或者relative。
    3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
    4、overflow的值不是visible

    1、display: table 可能引发响应性问题
    2、overflow: scroll 可能产生多余的滚动条
    3、float: left 将把元素移至左侧,并被其他元素环绕
    4、overflow: hidden 将裁切溢出元素

    使用场景

    边距重叠  兄弟元素上下排列   5px auto 15px   会取15px

     解决:给子元素加一个父元素 overflow:hideen

    left:folat:left

    right:无

    如果高度增高,right会流向left的底部

    加上overflow:auto

    自己是自己的 right不会流向left

    float元素

    把父元素变成bfc元素就会参与计算,有了高度

  • 相关阅读:
    9"边界匹配
    8劈分
    7替换
    5逻辑匹配
    4分组匹配
    3贪婪匹配与勉强匹配
    python多线程之线程传参
    多线程(类的形式)---线程同步
    多线程基础
    Linux----黑马程序员Linux教学视频简记(转载)
  • 原文地址:https://www.cnblogs.com/joer717/p/10676040.html
Copyright © 2011-2022 走看看