技巧一
在某些情况下 子元素的宽度可以大于父元素的宽度
案例中,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;