最新CSS3定位元素

第3章定位元素

学习盒模型，页面版式主要由三个属性控制：

position属性，控制元素位置关系。

display属性，控制元素堆叠，并排，还是不在页面上出现。

float属性，提供控制的方式，以便把元素组成多栏布局。

3.1 理解盒模型

HTML实际就是一堆盒子组成的。

每个元素盒子属性：

边框(border),可以设置边框宽窄，样式，颜色。
内边距(padding),可以设置盒子内容区与边框距离。
外边距(margin),可以设置盒子与相邻元素的间距。

简写样式

CSS 为边框、内边距和外边距分别规定了简写属性，让你通过一条声明就可以完成设定。在每

个简写声明中，属性值的顺序都是上、右、下、左。想象一下顺时针旋转就记住了。举个例子

吧，如果要设定盒子的外边距，不用简写属性就得这样写：

{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}

使用简写属性，则可以简写为这样：

{margin:5px 10px 12px 8px;}

注意，4 个值之间有空格，但不能是其他分隔符（比如逗号之类的）。甚至，你都不用把4 值全都写出来------如果哪个值没有写，那就使用对边的值。

{margin:12px 10px 6px;}

对这个例子来说，由于没有写最后一个值（左边的值），所以左边就会使用右边的值，即10px。

而在下面的例子中：

{margin:12px 10px;}

只写了两个值，上和右，因此缺少的下和左就会被设定为12px 和10px。最后，如果你只写一个值：

{margin:12px;}

那么4 个边都取这个值。使用这种简写属性，不能绕开上和右，只给下和左设定值，即使上和右都是零也不行。绕不开怎么办？如果它们真是零的话，那就写0 呗，比如：

{margin:0 0 2px 4px;}

另外，每个盒子的属性也分三种粒度，到底选择哪个粒度的属性，要看你想选择哪条边，以及那条边的哪个属性。这三种粒度从一般到特殊分别是举例如下。
1. 全部3 个属性，全部4 条边
{border:2px dashed red;}
1. 1 个属性，全部4 条边
{border-style:dashed;}
1. 1 个属性，1 条边
{border-left-style:dashed;}

混合使用这三种粒度的简写属性达成设计目标是很常见的。比如说吧，我想为盒子的上边和下边添加4 像素宽的红色边框，为左边添加1 像素宽的红色边框，而右边没有边框。可以这样写：

{border:4px solid red;} /* 先给4 条边设置相同的样式 /

{border-left-width:1px;} / 修改左边框宽度 /

{border-right:none;} / 移除右边框 */

类似地，其他属性也都有这三级粒度，例如padding 和border-radius 等。

3.1.1 盒子边框

宽度(border-width),可以使用thin,medium,thick等，也可以使用百分比和正数。
样式(border-style),有none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset等。
颜色(border-color),可以使用任意颜色值。

简写： p { border: 3px solid red; }

* 推荐下面规则作为样式表的第一天规则：* { margin:0;padding:0; }

* 叠加外边距，两个元素相邻，外边距以最大的为主。

外边距单位，px这些绝对值不会变，如果用em则会随着字体变大而变大。

3.2 盒子有多大

1.没有宽度的盒子，指的是不设置宽度的盒子，默认auto是父元素宽度。

2.有宽度的盒子，设定宽度，增加内外边距，整体宽度与box-sizing有关。

3.3 浮动与清除

影响浮动的因素还有很多，推荐读者看一看Eric Meyer 的那本Cascading Style Sheets2.0 Programmer's Reference（2006，McGraw-Hill Osborne Media）。

3.3.1 浮动

CSS设计float的目的是实现文本绕排图片的效果。

此属性称为创建多栏布局最简单方式。

1.文本绕排图片

代码：图片脱离文档流了，p不认为在图片后面了，直接来到body左上角，但是文本内容会绕开浮动的图片，但浮动非图片元素时要给宽度，否则后果难以预料。

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            width: 200px;
            height: 120px;
            float: left;
            margin: 0 4px 4px 0;
        }

        p {
            margin: 0;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <img src="./img/moon.jpg" alt="" />
    <p>
        8月20日凌晨
        今年首个"超级月亮"现身
        全国多地都能观赏
        从天文学的角度称为
        "近地点满月"
        此时，月亮看起来特别大
        在中国人的观念里
        月亮不只是
        围绕地球旋转的星球
        还寄托了无限幻想与思念
        "明月照高楼，流光正徘徊"
        忙碌的火车站洒满皎洁月光
        如同披上一层轻纱
        静谧又朦胧
        迎接南来北往的旅客
        "露从今夜白，月是故乡明"
        华灯初上，五彩斑斓
        无数次重逢和离别在站台上演
        乡愁是一轮明月
        也是一张车票.
    </p>
</body>

</html>

2.创建分栏

在此基础上多用一次float属性，给p宽度200px，左浮动。

3.3.2 围住浮动元素三种方法

原始效果：

图片浮动后，footer被提上来了，紧挨section.

方法一：为父元素添加overflow:hidden

强制父元素包围浮动元素。

1.overflow真正的用途防止包含元素被超大内容撑大，包含元素还是原宽度，超大内容会被剪切掉。

2.能可靠的迫使父元素包含其浮动子元素。

方法二：同时浮动父元素

也让父元素浮动起来。

浮动section以后，不管子元素是否浮动，他都会仅仅包围住子元素。

宽度还是浏览器同宽，强制footer呆在下发，应用clear:left,被清除元素

无法提升到浮动元素旁边。

方法三：添加非浮动的清除元素。

clearfix规则：

html 复制代码

.clearfix::after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

没有父元素如何清除

清除某些浮动元素，正好没有父元素作为容器包围他们。

最简单方法给浮动元素应用clear:both.

第二张图片右侧文字太少，导致第三张图片不是我们想要的。

解决方法：给段落增加clearfix清除两侧浮动。