CSS 盒模型

wizChen 发布于2019-08-30 14:06 / 1520人阅读

摘要：盒模型盒模型基本概念标准模型模型标准模型和模型的区别标准模型模型二者区别，前者的宽度是内容宽度，后者的宽度是内容内边距如何设置这两种模型标准模型模型如何设置获取盒模型对应的宽和高仅兼容兼容性好用于获得页面中某个元素的左，

CSS 盒模型

CSS

CSS 盒模型

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

标准模型和IE模型的区别

标准模型

IE模型

二者区别，前者的宽度是内容宽度，后者的宽度是内容+内边距+border

CSS 如何设置这两种模型

- 标准模型:box-sizing: content-box;
- IE模型:box-sizing: border-box;

JS 如何设置获取盒模型对应的宽和高

- dom.style.width/height
- dom.currentStyle.width/height 仅IE兼容
- window.getComputedStyle(dom).width/height 兼容性好
- dom.getBoundingClientRect().width/height 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

实例题「根据盒模型解释边距重叠」

 


    
    
    CSS 盒模型

BFC 「边距重叠解决方案」

- BFC的基本概念
   - 块级元素格式化上下文 
- BFC的原理
   - 在 BFC 这个垂直方向的边距发生重叠
   - BFC 的区域不会与浮动元素的box重叠
   - BFC 在页面上是个独立的容器
   - 计算 BFC 高度的时候，浮动元素也会参与计算
- 如何创建 BFC
   - 只要设置了 float，就会创建
   - position 的值不是 static 或者 relative
   - display 属性
   - overflow 相关

License

可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/115771.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