css伪元素和行内元素与行内块元素的margin-top问题

左手的ㄟ右手 2022-12-25 04:59 117阅读 0赞

### 1.css伪元素 ###

在写导航条时，内容与内容之间经常会出现一条竖线，如图：

![在这里插入图片描述][20201130173041206.png_pic_center]

实现方法如下：

1.在li标签中添加伪元素::after,就是相当于在li标签里添加了子元素after

代码如下：

li::after {
        display: inline-block;
        content: "";
        width: 1px;
        height: 12px;
        background-color: #666;
        margin: 0 10px;
    }

2.删除最后一个竖线

在最后一个li元素里添加类并设置css样式content：none

.last-nav::after {
        content: none;
        /*删除最后一个li标签中的 竖线*/
    }

3.使竖线居中，添加 vertical-align: middle;

li::after {
        display: inline-block;
        content: "";
        width: 1px;
        height: 12px;
        background-color: #666;
        vertical-align: middle;
        margin: 0 10px;
    }

### 2.margin-top问题 ###

在页面添加图标，使图标可以单独上下移动，如图：  
![在这里插入图片描述][20201130173101603.png_pic_center]

实现方法如下：

1.给图标添加类，并设置css样式（可以设置图标大小和颜色）

.arrow {
        font-size: 10px;
    }

2.设置行内块样式

.arrow {
        font-size: 10px;
        display: inline-block;
    }

3.设置transform，使图标能移动

.arrow {
        font-size: 10px;
        display: inline-block;
        transform: translate(3px, 1px);
    }

CSStransform属性允许旋转，缩放，倾斜或平移给定元素。

1.旋转rotate：通过指定的角度参数对原元素指定一个效果。

2.移动translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。  
如：transform:translate(100px,20px):

3.缩放scale

scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。  
如：transform:scale(2,1.5);

4.倾斜skew

skew(*x-angle*,*y-angle*) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

度和高度。  
如：transform:scale(2,1.5);

4.倾斜skew

skew(*x-angle*,*y-angle*) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

如：transform:skew(30deg,10deg);

[20201130173041206.png_pic_center]: /images/20221120/407c4ec36c504984a97541d6e6596b01.png
[20201130173101603.png_pic_center]: https://img-blog.csdnimg.cn/20201130173101603.png#pic_center