css盒模型

cod7ce 发布于2019-08-30 15:55 / 3171人阅读

摘要：一什么是盒模型说到盒模型大家肯定都能想到但是盒模型分为两种标准盒模型模型，他们最主要的区别在于宽高的计算。

一：什么是盒模型

说到盒模型大家肯定都能想到content,padding,border,margin
但是盒模型分为两种：标准盒模型 IE模型，他们最主要的区别在于宽高的计算。
1.标准盒模型的宽高不包含padding和border
2.IE模型的宽高是padding和border的总和

设置这两种模式的方式也很简单

标准盒模型：box-sizing:content-box
IE模型:box-sizing:border-box

二：js获取盒模型的宽高

1.dom.style.width/height 此方法只适用于内联元素
2.dom.currentStyle.width/height此方法解决了1的问题，但是只适用于IE
3.window.getComputedStyle(dom).width/height兼容性好，适用于大多数浏览器
4.dom.getBoundingClientRect().widht/height

要注意的是：dom.getBoundingClientRect()返回TextRectangle对象,这个对象包含元素相对于视窗的位置集合(left,right,top,bottom)

三：BFC的原理及如何创建BFC

BFC全称：Block Formatting Context (块级格式化上下文)
原理：同一个bfc下外边距重叠，bfc外面的元素不会影响里面的元素，bfc计算高度时也包含浮动元素，bfc可以防止浮动元素被覆盖

如图所示，1的下边距和2的上边距重合

创建bfc的方法

1.float不为none
2.overflow不为visiable
3.position不为static和relative
4.display是inline-block,table-cell,table-caption

GPU云服务器云服务器盒模型盒模型html吗简述html盒模型盒遥控

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117223.html

深入css布局 (1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

ky0ncheng 2019-04-23 13:43 评论0 收藏0
深入css布局(1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

blankyao 2019-08-29 15:25 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

Code4App 2019-08-29 15:20 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 评论0 收藏0
css1：盒模型

摘要：最近工作中有机会复习一下的基本知识，那么先从的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题怎么把盒模型变成标准盒模型嗯，有办法，就可以啦。具体参见链接描述常见的盒模型分两类怪异盒模型和标准盒模型，两种盒模型有着很大的不同。最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？嗯，有办法，...

TalkingData 2019-08-30 10:59 评论0 收藏0
十分钟复习CSS盒模型与BFC

摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中，每...

verano 2019-08-02 10:48 评论0 收藏0