css盒模型

基本概念:标准模型+IE模型

都是由   margin、border、padding、content,并且 content 部分不包含其他部分。

标准模型和IE模型的区别

标准盒模型在计算宽高时只计算content

IE盒模型计算宽高的时候包含了border  padding  

就是说IE盒模型的宽度包含了border  padding  

css如何设置这两种盒模型

设置标准盒模型:

box-sizing:content-box;

设置IE盒模型:

box-sizing:border-box;

js如何获取盒模型对应的宽和高

4中方式

第一钟通过 dom.styte.width/heigth这种方法不可以取到所有的宽和高因为他只能取到内联css样式的宽和高,什么是内联就是此文件内部的css样式而不是link引入的css。

第二种方法window.getComputedStyle(dom).width/heigth这个支持内联外联样式也不用在乎兼容问题

BFC的基本概念以及原理

块级格式化上下文

原理:

1,bfc的区域不会和浮动的区域重叠就是清楚浮动。

2,bfc是一个独立的容器外面的元素不会影响内部元素内部也不会影响外部

3,计算bfc高度的时候浮动元素也会参与计算。

如何创建BFC

1,overflow: hidden  创建BFC

2,只要是浮动  就是创造了一个BFC

BFC使用场景







©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基本慨念 内容区域(content)是包含元素真实内容的区域。它通常包含背景、颜色或者图片等,位于内容边界的内部,...
    晴天的晴q阅读 2,231评论 0 0
  • 盒模型的认识 基本概念:标准模型+IE模型。 包括margin,border,padding,content 标准...
    小境之月阅读 626评论 0 1
  • 题目:谈谈你对css盒模型的认识? 答: 基本概念:padding,margin,border,content 标...
    noyanse阅读 312评论 0 0
  • css盒模型 题目:谈谈你对CSS盒模型的认识 文档中每个元素都会被描述为一个矩形盒子,盒子有一个边界,分别为ma...
    一包阅读 587评论 0 0
  • 亲爱的特雷西·麦克劳德: 这张照片上的你17岁了。我要给你的第一条忠告是,别再那样恶狠狠地拔你的眉毛了。你四处溜达...
    藥清玉竹阅读 682评论 1 4