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;

猜你喜欢

转载自blog.csdn.net/weixin_45419127/article/details/110386235