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

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

原文 http://blog.csdn.net/qq_34902437/article/details/79192847

2018-01-30 02:00:08阅读(257)

目的
本博文旨在总结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属性分类扫描-盒子相关属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool(w3cschool.cn)</title>
<style> 
div
{
    width:350px;
    height:100px;
    border:1px solid black;
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Safari, Chrome, and Opera */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}
</style>
</head>
<body>
<div>
<p>Center me!</p>
</div>
<p><b>注意:</b> Flexible boxes 在 IE 9和更早版本的浏览器中不兼容</p>
</body>
</html>
属性 定义 属性值 备注 box-shadow 规定 box 的阴影 h-shadow:水平方向的阴影;v-shadow:垂直方向的阴影;blur:模糊的程度;spread:阴影的尺寸;color:阴影的颜色;inset:阴影是否内嵌

示例及代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .div{
            width: 200px;
            height: 200px;
            background-color: lightgrey;
            box-shadow: 10px 10px 5px 5px black;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>
属性 定义 属性值 备注 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 哪个更符合现代的设计思想,哪个是正统的布局理念,全看个人了。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹