CSS3第三天（盒子模型+浮动）

盒子模型

1.内边距padding

指定了高宽，再指定内边距，则会撑开盒子。

盒子未指定高宽（继承算未指定），则不会撑开盒子。

2.外边距margin

用于控制盒子之间的距离。同padding的简写方式。

margin-left左外边距 right top bottom

块级盒子水平居中，需满足两个条件：①盒子必须指定了宽度 ②盒子左右的外边距都设置auto.

EG------------->  width: 298px  margin: 100px auto;

z注：以上是让块级元素水平居中，行内或行内块元素水平居中给其父元素添加text-align:center即可。

外边距合并：对于嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷（增大）较大的外边距值。

解决方案：

①可以为父元素定义上边框。border：1px solid red/transparent

②可以为父元素定义上内边距。padding：1px

③可以为父元素添加overflow：hidden。

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。

 

清除内外边距

*{

padding：0；//清除内边距

margin：0；//清除外边距

}

注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转化为块级和行块元素就可以了。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

PS的使用

 

border-radius:切面圆的半径值；半径越大，圆角越大。

 

盒子阴影（重点）

box-shadow：h-shadow v-shadow blur spread color inset;

h-shadow和v-shadow是必须写的。

默认的是外阴影（outset），但是不可写这个单词，否则导致阴影失效。

盒子阴影不占空间，不影响其他盒子排列。

文字阴影 text-shadow

 

 

浮动最典型的应用：可以放多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素 纵向排列找标准流，多个块级元素 横向排列找浮动。

float：属性值；  创建浮动框  将其移动到一边，直到左/右边缘触及包含块或另一个浮动框的边缘 eg.如果都设置向左浮动，则从左贴着呈现。

none（默认） left（元素向左浮动） right

   

如果行内元素有了浮动，则不需要转块、行内块元素就可以直接给高宽度。

浮动让行内元素、块级元素，都变成了 行内块 元素拥有的特性，宽高可控，且多个浮动特性元素，都会在一行上（不管你原先是什么元素）。未指定宽高的，由文字内容决定。

 

浮动布局注意点：

1.先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置。

2.元素横着排的，一个元素浮动，理论上兄弟也浮动，如果未浮动，说明哪个少加float了。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。---------------自己的理解：如果加了浮动，那么这个元素就相当于漂起来了并且定在这个位置的上面的漂，后面的标准流就随着它的变化而变化了。

1

2

3

设置：1浮动2不浮动3浮动，效果：1在2的上面，3自己一行

1不浮动2浮动3不符动，效果：1自己一行，2在3上面。

总结，浮动盒子，会浮动在后面紧跟的标准流上。（原因：浮动盒子不占有位置。。）

 

清除浮动：父级盒子在很多情况下，不能给写死的高度，但子盒子浮动不占有位置，最后父级盒子高度就为0，影响下面的标准流盒子（他会处于浮动盒子的下面）。

①额外标签法：

语法： 选择器{clear:属性值}   -----left（清除左侧漂动的影响）--right --both  漂动元素最后一个添加块级标签调用选择器    清除浮动的策略是：闭合浮动 缺点：加了代码

②添加overflow:hidden、auto、scroll 缺点 无法显示溢出部分

③after伪元素

④before和after双伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

块级元素，调用一下这个clearfix类选择器
---------------------------------------------------------

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>