一些常见的问题，浮动，塌陷等等

常见的元素

查看元素

  1. 块级元素:(div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等）
  2. 行内元素:(span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））
  3. 行内块级元素
    常用的行内块级元素：<img> <input>

圆角的使用

  1. 圆形的使用设置一个正方形radius要为边的一半
  2. 圆角矩形radius等于height
  3. 可以设置四个角度的弧度 top-left,top-right,buttom-right,buttom-left

阴影的使用

  1. box-shadow：x,y,模糊距离，大小，颜色,（默认阴影，inset为内阴影）
  2. 万物皆可hover

浮动使用

  1. 标准流，浮动和定位共同组成网页
  2. 浮动的特性

查看特性

  1. 脱离标准流，浮动的盒子不会在保留原先的位置
  2. 浮动的盒子一行显示
  3. 添加浮动效果后盒子具有行内块元素的特性
  4. 浮动的盒子只会影响后面的盒子
  5. 浮动的高度问题-清除浮动
  6. 浮动的盒子不会有外边距塌陷的问题

清除浮动

  1. 本质：清除脱离标准流
  2. 策略：闭合浮动
  3. 方法- 额外标签法：clear：both 块级元素
  4. 方法-添加父级元素：overflows:hidden
  5. 方法-after伪元素是额外元素的升级版，给父元素添加
1
2
3
4
5
6
7
8
9
10
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
  1. 双伪元素清楚法-前后混合双打
1
2
3
4
5
6
7
8
9
10
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.cleafix{
*zoom:1;
}

问题总结

  1. 为什么要清除浮动？

查看答案

  1. 父级没高度
  2. 子盒子不浮动了
  3. 影响下面的布局了，我们就应该清除浮动了
  1. 书写顺序

查看答案

  • 建议遵循以下顺序:
  1. 布局定位属性: display / position/ float / clear / visibility/ overflow (建议display第-个写,毕竟关系到模式)
  2. 自身属性: width/ height/ margin/ padding / border / background
  3. 文本属性: color/ font / text-decoration/ text- align/ vertical-align/ white- space / break- word
  4. 其他属性( CSS3) : content / cursor / border-radius 1 box -shadow / text- shadow/ background;linear-gradient…
  1. 设置好input,button属性后，点击显示外边框outline-style:none可以消除