CSS的盒模型是CSS的基础，同时也是难点，这个问题经常在面试中会被问到，属于经典问题了。很多博客里讲得也很模糊不清，于是，我在这里重新整理一下。 可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。 盒模型分为IE盒模型和W3C标准盒模型 ...
分类：
Web程序 时间：
2017-12-30 20:00:35
阅读次数：
229
★ 盒子模型 （标准的盒模型） css盒模型的概念及组成 css盒模型是css的基石，每个html标签都可以看作是一个盒模型。 css盒模型是由内容(content)，补白或填充(padding)，边框(border)，外边距(margin)四部分组成（具体如图所示） 1.内容(content) 宽 ...
分类：
Web程序 时间：
2017-12-29 22:37:32
阅读次数：
322
盒子模型： 1，外边距（margin）、边框（border）、内边距（padding） 上下内边框 左右内边框 3，padding：上 右 下 左 4，margin：同上 5.border：大小 样式 颜色； 6.border_radius：大小；圆角Span 行级元素（横排） 7.display： ...
分类：
Web程序 时间：
2017-12-27 20:29:05
阅读次数：
200
盒模型是CSS中一种重要的思维模型，理解了盒模型才能进行更好的页面布局。顾名思义，我们把页面上所有的元素都看做是一个生活中常见的盒子，它具备内容（content），内边距（padding），边框（border），外边距（margin）四个属性，也就是我们所谓的盒模型。 让我们俯视这个盒子，它有上下左 ...
分类：
其他好文 时间：
2017-12-26 21:04:22
阅读次数：
245
老师的笔记: 前情回顾: day49 混乱即阶梯. 1. 前情回顾 HTML HTTP和HTML 文档机构 <!Doctype html> HTML head <meta> <title> <link> icon <style> 直接写CSS样式 <link> CSS文件 <script> JS文件 ...
分类：
Web程序 时间：
2017-12-25 15:38:27
阅读次数：
200
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中，都没有遇到外边距合并的问题（其实是因为大多时候都直接用前端样式库(〃'▽'〃)），这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的... ...
分类：
Web程序 时间：
2017-12-22 22:50:05
阅读次数：
187
第一种情况： 已知两个宽和高均为100px，margin均为20px的div垂直排列，现象如下图所示： 当设置css1的margin-bottom：40px；或者css2的margin-top：40px时，现象如下图所示： 结论： 只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题，此问题 ...
分类：
Web程序 时间：
2017-12-14 19:22:45
阅读次数：
154
第六章 盒子模型 1.盒子模型组成 边框(border) 外边距(margin) 内边距(padding) 盒子的内容(content) 2.边框 border-color:边框颜色 border-top-color 上边框颜色 border-right-color右边框颜色 border-bott ...
分类：
Web程序 时间：
2017-12-11 16:12:23
阅读次数：
167
在css盒模型定义中，外边距指的是元素距离相邻元素的距离，也就是元素的边界。布局中，正的外边距能拉开元素之间的距离，这个很好理解，但是设置负的外边距会产生意想不到的渲染结果，一些理解笔记整理如下： 总的来说，从文档流位置的角度看，设置了负外边距的元素相当于边界往里缩，结果其相邻其他元素会沿着文档流的 ...
分类：
Web程序 时间：
2017-12-06 00:55:44
阅读次数：
397
一、组成：一个盒子包括了content（实际内容）、border（边框）、padding（内边距）和margin（外边距）。二、两种盒子模型：IE盒模型： width=content+padding+border 盒子实际大小：width 盒子所占空间为 width+margin图一：IE盒模型标准... ...
分类：
其他好文 时间：
2017-12-03 14:46:45
阅读次数：
139
