CSS属性分类扫描-盒子相关属性

2018-01-30 10:45:37来源:网络收集作者:咖啡不加糖人点击

分享
第七城市th7cn

目的
本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。
本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。
综合参考
MDN–CSS参考手册
W3Cschool–CSS参考手册
属性一览
box 相关属性
盒子模型
谈 CSS 的时候我们总是绕不过盒子滴,因为盒子模型是 HTML 元素的放置的根本,你的页面布局的基础,不能熟练使用盒子模型,那么你就无法进行正常的布局。
首先,盒子模型分为“标准的盒子模型”和“IE(8以下)的盒子模型”,主流浏览器除了 IE(8以下) 外,都采用标准盒子模型,而IE(8以下)要用自己的盒子模型。(IE 8及以上已经采用标准的盒子模型了)
那么什么是盒子模型呢,我们来看看下面的图片吧。

CSS属性分类扫描-盒子相关属性


首先我们看的是标准的盒子模型。
当我们设置元素宽度(高度)的时候,我们说的是 content 的宽度(高度),但是元素实际的宽度(高度)= content + 左右的 padding + 左右的 border + 左右 margin。
.div1{
/*我们通常说的宽度(高度)是 content 的*/
width: 200px;
height: 200px;
padding: 5px;
border: 1px solid red;
margin: 10px;
}
上面的代码是一个例子,我们按照这样的方式设置一个 div 元素,实际的占位如下图所示:

CSS属性分类扫描-盒子相关属性


比如宽度就是:200px+5*2px+1*2px+10*2px = 232px
而对于 IE(8以下) 的盒子模型来说,情况就不一样了。

CSS属性分类扫描-盒子相关属性


不同之处在于 IE(8以下) 浏览器在设置 content 的值的时候包含了 padding 和 border。所以 IE(8以下)的宽度 = content +左右 margin。
上面对盒子模型进行了简单的介绍,下面我们进入正题。
属性
定义
属性值
备注
box-align
box-align 和 box-pack共同作用可以操纵 div 内部元素的位置,其中 box-align 作用于垂直方向
start:沿上边缘开始;end:沿下边缘开始;center:置于中间;baseline:与基线对齐;stretch:拉伸
注意:box-align 和 box-pack 目前没有浏览器支持,但是它们的兼容模式可以使用。
box-pack
作用于水平方向
start:沿左边缘开始;end:沿右边缘开始;center:置于中间;justify:平均分布

示例及代码


CSS属性分类扫描-盒子相关属性




w3cschool(w3cschool.cn)

Center me!

注意: Flexible boxes 在 IE 9和更早版本的浏览器中不兼容


属性
定义
属性值
备注
box-shadow
规定 box 的阴影
h-shadow:水平方向的阴影;v-shadow:垂直方向的阴影;blur:模糊的程度;spread:阴影的尺寸;color:阴影的颜色;inset:阴影是否内嵌

示例及代码


CSS属性分类扫描-盒子相关属性





属性
定义
属性值
备注
box-sizing
在 MDN 上的定义就是使用标准还是IE的盒子模型
content-box:标准的模型;border-box:IE的模型

当使用 content-box 的时候


CSS属性分类扫描-盒子相关属性


虽然我们的 width 设置了100%,但是 border 和 padding 的部分会多出来。所以每次我们修改 width 的时候都要考虑到 border 和 padding 的问题。

当使用 border-box 的时候


CSS属性分类扫描-盒子相关属性


很完美的嵌套在了父元素内,而不用考虑 padding 和 border 的问题。
所以很多人建议 box-sizing 都设置为 border-box。

将所有的元素的box-sizing都设为border-box


后续
其实现在看来 IE 的盒子模型更符合 GUI 时代的布局,当初 W3C 并没有打算把 CSS 做成 GUI 的布局,只是为了排版而已,当然具体 IE 和 W3C 哪个更符合现代的设计思想,哪个是正统的布局理念,全看个人了。

第七城市th7cn

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台