Css知识回顾(6)
一些常见的问题,浮动,塌陷等等
常见的元素
查看元素
- 块级元素:(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伪元素是额外元素的升级版,给父元素添加
1 | .clearfix:after { |
- 双伪元素清楚法-前后混合双打
1 | .clearfix:before,.clearfix:after { |
问题总结
- 为什么要清除浮动?
查看答案
- 父级没高度
- 子盒子不浮动了
- 影响下面的布局了,我们就应该清除浮动了
- 书写顺序
查看答案
- 建议遵循以下顺序:
- 布局定位属性: 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
可以消除
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论