首页 > 云开发 > Css > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

CCS 盒模型分析

Css

基本概念

页面中的每个元素都可以看成一个盒子,盒子里面可以装其他盒子,层层嵌套。html 标签就是最外面的大盒子。每个盒子由内向外分别是 content, padding, border, margin 。

分类

盒模型有两种,标准盒模型IE盒模型 。主要区别是它们的 widthheight 不同

标准盒模型

盒子宽高是 content(内容) 的宽高

IE盒模型

盒子宽高是 border + padding + content 的宽高

浏览器默认使用标准盒模型,在 ie8+ 中 可以通过设置 box-sizing 样式属性改变盒模型
<br/>
box-sizing:

content-box ---> 标准盒模型(默认)

border-box ---> IE 盒模型

通过js获取盒子宽高
以下 domElement 是表示 HTML 元素的伪代码

domElement.style.width/height

只能获取内联样式中的宽高

domElement.currentStyle.width/height

获取的是浏览中渲染完成后元素的宽高,只有 IE 浏览器支持

window.getComputedStyle(domElement).width/height

和方式2一样,但可以兼容更多浏览器

domElement.offsetWidth/offsetHeight

不管使用的什么盒模型,获取的都是 IE盒模型 的宽高
外边距折叠问题
相邻元素在竖直方向上的外边距在相遇时会发生合并,合并后的外边距的高度等于两个外边距中较大的那个值。
兄弟元素间

父子元素间

外边距折叠解决方案(BFC)
Block Formatting Context (块级格式化上下文)

BFC 可以简单地理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC。

怎样让元素创建 BFC

float 的值不为 none (浮动元素)

overflow 的值不为 visible

display 的值为 inline-blocktable-captiontable-cellflexinline-flex

positon 的值为 absolutefixed

<html>(根元素)

BFC 的布局规则

内部的 box 会在垂直方向上一个接一个地放置 (平时说的块级元素一行行放)

box 间垂直方向的距离由 margin 决定 。同一个BFC中的两个相邻的 box 还是会产生外边距重叠问题

BFC 的区域不会与 浮动的 box 重叠

BFC 是一个独立的容器,里面的元素不会影响外面的元素,反之亦然。

包含浮动元素,计算 BFC 的高度时,浮动的元素也会参与计算

BFC 的应用场景

分属于不同 BFC 的元素可以防止垂直外边距折叠

清除内部浮动(使浮动元素可以撑起父盒子)

自适应两栏布局(BFC 区域不会与浮动元素重叠)

防止元素被浮动元素覆盖

float + BFC 两栏布局:

<div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<style>
    .left {
        float: left;
        width: 100px;
        background-color: blue;
    }
    .right {
        overflow: hidden; // 触发 BFC
        background-color: green;
    }
</style>

阅读原文
<br/>
参考文章:
关于CSS-BFC深入理解
css 盒子模型理解

文章来源:segmentfault,作者:墨夜。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

CCS 前端 html

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索