CSS的垂直对其方式
场景:解决行内/行内块元素垂直对齐问题
vertical-align属性只对行内或行内块元素有效.
/* 默认值 基线对齐 */
vertical-align: baseline;
/* 底部对齐 */
vertical-align: bottom;
/*中线对齐 */
vertical-align: middle;
/* 顶部对齐 */
vertical-align: top;
元素本身隐藏
visibility: hidden; /* 隐藏元素本身 占位置 */
display: none; /* 隐藏元素本身 不占位置*/
元素整体透明度
opacity:0.5; 属性值:0~1之间的数字 1:表示完全不透明 0:表示完全透明 opacity会让元素整体透明,包括里面的内容,如:文字、子元素等……
结构伪类:
伪元素
::before 在父元素内容的最前面添加一个元素
::after 在父元素内容的最后面添加一个元素
注意事项
伪元素必须要指定 content属性
伪元素插入的元素属于行内元素 设置宽高无效
伪元素的权重和标签一致 0001
css2伪元素是单冒号
C333伪元素是双冒号就是为了区分伪类和伪元素,但是单冒号仍然有效的.
浮动的特点
1.浮动元素会脱标,在标准流中不占位置
2.浮动元素比标准流高出半个级别,可以覆盖标准流中的元素
3.浮动找浮动(同方向浮动),下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果:① 一行可以显示多个 ② 可以设置宽高
清除浮动
为什么要清除浮动
如果子元素浮动了,假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,
原因:子元素浮动后脱标 → 不占位置
目的:需要父元素 有高度,从而不影响其它网页的布局.
清除浮动的方法
01 给父元素设置高度。
02 额外标签法
03 单伪元素清除法(京东)
04 双伪元素清除法(小米)
05 给父元素设置 overflow: hidden;