关于css:CSS小技巧8

技巧一

在某些状况下,子元素的宽度能够大于父元素的宽度

案例中,ul的宽度大于版心的宽度,且不影响布局

技巧二

如何让固定定位的元素紧贴版心?

答:应用固定定位,left:50% margin-left的值等于版心的一半加本身宽度,留神为负值

技巧三

如何让父元素中子元素居中对齐(针对于行内及行内块元素)

答:保障子元素必须为行内块元素或行内元素及文字 text-align:center即可

技巧四

:focus 伪类选择器 用来获取焦点元素 个别指焦点元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            border: 1px solid red;
            background-color: red;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

</html>

文字省略

单行

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

多行

word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理