盒子模型

内边距（padding）
  • 如果盒子本身未指定width/height属性，padding不会撑开盒子大小
外边距（margin）

margin属性用于设置外边距

margin -top | bottom | left | right 上下左右

使用方式和padding一样

外边距典型应用

外边距可以让盒子水平居中

  • 盒子必须指定了宽度

  • 盒子的左右外边距设置为auto

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

常见写法：

  • margin-left:auto; margin-right:auto;
  • margin:auto;
  • margin:0 auto;

以上方法是让块级元素居中，行内元素或者行内块元素给父元素添加text-align:center即可

圆角边框

border-radius: length | xxx%

  • 边框 - 半径； 圆与矩形的交集
  • 百分比代表宽度的xxx%
  • 两个数值代表对角线
盒子阴影

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

属性值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影的颜色
inset 可选，将外部阴影（outset）改为内部阴影
  • 默认外阴影（outset）
  • 盒子阴影不占用空间，不会影响其他盒子排列
  • 文字阴影类似

CSS浮动

标准流

块级元素和行内元素按规定好默认方式排列

浮动（float）

浮动可以改变元素标签默认排列方式

  • 多个块级元素纵向排列找标准流，块级元素横向排列找浮动

  • float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含快或另一个浮动框的边缘

    选择器 {float: 属性值;}

    • none 默认不浮动
    • left 元素向左浮动
    • right 元素向右浮动
浮动特性
  • 浮动元素会脱离标准流，脱标不会再保留原先的位置
  • 浮动元素会一行内显示并且元素顶部对齐
  • 浮动元素会具有行内块元素的特性
  1. 浮动和标准流的父盒子搭配
  2. 一个元素浮动，理论上其余兄弟元素也要浮动，浮动的盒子只会影响后面的标准流，不会影响前面的标准流
清除浮动

由于父级盒子过多，不方便给高度，但子盒子浮动不占位置，最后父盒子高度为0，就会影响下面的标准流盒子

选择器 { clear : 属性值;}

left：不允许左侧有浮动元素（清除左侧浮动的影响）

right：不允许右侧有浮动元素（清除右侧浮动的影响）

both：同时清除两侧浮动的影响

  1. 额外标签法也称隔墙法，w3c推荐做法
  2. 父级添加overflow属性
  3. 父级添加after伪属性
  4. 父级添加双伪属性
额外标签法

额外标签法会在浮动元素末尾添加一个空标签，例如<div style="clear:both"></div>，或者其他标签<br/>

这个新增的盒子要求必须是块级元素不能是行内元素

父级添加overflow

可以给父级添加overflow属性，属性值设置为hidden、auto、scroll

无法显示溢出部分

after伪元素法

.clearfix:after方式是额外标签法的升级版，父元素添加

.clearfix:after {
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {/*IE6,7专有*/
 zoom: 1;
}
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器
双伪元素清除浮动

.clearfix:before,.clearfix:after 双向清除

.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
}
.clearfix:after {
 clear:both;
}
.clearfix {/*IE6,7专有*/
 zoom: 1;
}