CSS垂直对齐方式,结构伪类,伪元素,浮动及其特点的看法。

227 阅读2分钟

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会让元素整体透明,包括里面的内容,如:文字、子元素等……

结构伪类:

1641868504122.png

伪元素

::before 在父元素内容的最前面添加一个元素

::after 在父元素内容的最后面添加一个元素

注意事项

伪元素必须要指定 content属性

伪元素插入的元素属于行内元素 设置宽高无效

伪元素的权重和标签一致 0001

css2伪元素是单冒号

C333伪元素是双冒号

就是为了区分伪类和伪元素,但是单冒号仍然有效的.

浮动的特点

1.浮动元素会脱标,在标准流中不占位置

2.浮动元素比标准流高出半个级别,可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动),下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果:① 一行可以显示多个 ② 可以设置宽高

清除浮动

为什么要清除浮动

如果子元素浮动了,假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,

原因:子元素浮动后脱标 → 不占位置

目的:需要父元素 有高度,从而不影响其它网页的布局.

清除浮动的方法

01 给父元素设置高度。

02 额外标签法

03 单伪元素清除法(京东)

04 双伪元素清除法(小米)

05 给父元素设置 overflow: hidden;