一、元素分类 在右边的代码编辑器中大家可以看到我们为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。 变为内联块元素即可。 二、盒子模型 外边框叫border。border margin padding都有四个方向。 三、盒子模型解析 3.1 ...
分类：
Web程序 时间：
2016-06-06 18:44:35
阅读次数：
146
如下代码： 会发现，内层div的margin-top显示在了外层div上。 这个“问题”……它是CSS2.1的盒模型中规定的内容——Collapsing margins： In this specification, the expression collapsing margins means t ...
分类：
Web程序 时间：
2016-06-06 13:44:53
阅读次数：
186
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下： 通常有下面三种缩写方法: 1、如果top、right、bottom、left的值相同，如下面代码： ...
分类：
其他好文 时间：
2016-06-04 13:32:04
阅读次数：
157
清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。 如果说布局模型是本，那么 CSS 布局模板就是末了，是外 ...
分类：
Web程序 时间：
2016-06-03 00:59:29
阅读次数：
301
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码： 顺序一定不要搞混。可以分开写上面代码： 如果上、右、下、左的填充都为10px;可以这么写 如果上下填充一样为10px，左右一样为20px，可以这么写： ...
分类：
其他好文 时间：
2016-06-02 21:56:02
阅读次数：
143
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。 比如： css代码： html代码： ...
分类：
其他好文 时间：
2016-06-02 21:53:34
阅读次数：
193
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码： 也可以分开写： 如果上右下左的边界都为10px;可以这么写： 如果上下边界一样为10px，左右一样为20px，可以这么写： 总结一下：padding和margin的区别，padding在边框里，ma ...
分类：
其他好文 时间：
2016-06-02 21:49:48
阅读次数：
171
现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式： 同样可以使用下面代码实现其它三边(上、右、左)边框的设置： ...
分类：
其他好文 时间：
2016-06-02 21:36:33
阅读次数：
178
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框： 上面是 border 代码的缩写形式，可以分开写： 注意： 1、border-style（边框样式）常见样式有： dash ...
分类：
其他好文 时间：
2016-06-02 20:02:06
阅读次数：
183
