来源博客：u.mr90.top
常见的元素
- 块级元素:(div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等）
- 行内元素:(span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））
- 行内块级元素
常用的行内块级元素：<img> <input>
圆角的使用
- 圆形的使用设置一个正方形radius要为边的一半
- 圆角矩形radius等于height
- 可以设置四个角度的弧度 top-left,top-right,buttom-right,buttom-left
阴影的使用
box-shadow：x,y,模糊距离，大小，颜色,（默认阴影，inset为内阴影）- 万物皆可hover
浮动使用
-
标准流，浮动和定位共同组成网页
-
浮动的特性
-
脱离标准流，浮动的盒子不会在保留原先的位置
-
浮动的盒子一行显示
-
添加浮动效果后盒子具有行内块元素的特性
-
浮动的盒子只会影响后面的盒子
-
浮动的高度问题-清除浮动
-
浮动的盒子不会有外边距塌陷的问题
-
本质：清除脱离标准流
-
策略：闭合浮动
-
方法- 额外标签法：
clear：both块级元素 -
方法-添加父级元素：overflows:hidden
-
方法-after伪元素是额外元素的升级版，给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
- 双伪元素清楚法-前后混合双打
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.cleafix{
*zoom:1;
}
问题总结
-
为什么要清除浮动？
-
父级没高度
-
子盒子不浮动了
-
影响下面的布局了，我们就应该清除浮动了
-
书写顺序
- 建议遵循以下顺序:
-
布局定位属性: display / position/ float / clear / visibility/ overflow (建议display第-个写,毕竟关系到模式)
-
自身属性: width/ height/ margin/ padding / border / background
-
文本属性: color/ font / text-decoration/ text- align/ vertical-align/ white- space / break- word
-
其他属性( CSS3) : content / cursor / border-radius 1 box -shadow / text- shadow/ background;linear-gradient…
-
设置好input,button属性后，点击显示外边框
outline-style:none可以消除