前端-html、css(二)-盒子模型、浮动

这篇文章接着前端-html、css(一)继续记录css。

盒子模型

css会把html中的元素看成一个矩形的盒子，这个盒子由内容、内边距、边框、外边距组成。

• border 定义边框的宽度，颜色，样式，圆角等
• padding 内边距 例如下面 上下内边距0，左右5px

div {
    padding: 0px 5px;
}

• margin 外边距 顺序是上、右、下、左，如果上下，左右相同，可以简写

div {
    margin: 4px 6px 4px 6px;
}

通过margin可以实现水平居中, 左右边距设置成auto

.header{
    width:960px;
    margin:0 auto;
}

外边距合并问题

• 相邻元素 选择较大者

怎么解决呢？避免就好～

• 嵌套元素 选择较大者

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。

阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

浮动float

在css中浮动主要用于定位，主要分为两种左浮动、右浮动。浮动元素是脱离文档流的，不占位置，会对它后面的元素产生影响。

我怎怎么理解浮动预算对它后面元素的影响呢？可以这样理解，我们把这个浮动的元素想象成一个飘着的元素，它脱离了原有的文档流，这样它原本的位置就空出来了，它下面的元素自然就上去了。

浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

注意：

重点内容：
浮动会把元素默认转化为行内块元素，行内块元素的大小取决于定义的大小或者内容的大小。

理解这点很重要

浮动主要用途就是布局，将元素水平排列起来

清除浮动

浮动有个副作用，如果一个元素的子元素浮动了，子元素脱离的文档流，那么这个元素的高度就是0. 清除浮动就是为了解决父元素高度为0的问题。

那么有什么方法呢

• 给父元素添加overflow属性
• 在浮动元素的后面加个空元素，并给clear属性
• （推荐方式）伪元素法

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