css小tips

静态页面开发中常用到的一些零碎知识点的整理

1. 设置背景图片 常用格式：

//图像地址
background: url(./static/img3.png) 
//不重复
no-repeat 
//居中
center/ 
//contain 属性的主要目的是隔离指定内容的样式、布局和渲染
contain

2. ul li p标签是具有默认的margin的属性以及style的，因此后面进行页面设计的时候会带来一定的困扰，因此在页面开始编辑的时候进行初始化

ul,
li {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

p {
  margin: 0;
  padding: 0;
}

3.z-index属性
当多个元素处于同一行，且我们希望某个元素能够浮于其他元素的上方时，使用z-index进行设置
Z-index 仅能在定位元素上奏效！

//也就是该元素是需要设置position属性，z-index才可生效
{
position: absolute;
z-index:1;
//z-index的值可为负数，数值越大，元素优先级越高
z-index:-1;
}

4. nth-child(n)选择器
   该选择器可以实现匹配指定元素后面的第n个子元素的选中

<div class = "example">
<li>1</li>
<li>2</li>
<li>3</li>

div:nth-child(1){
//选中的是div第一个元素：<li>1</li>
}

//也可以通过类名来进行选择
<li class = "number">1</li>
<li class = "number">2</li>
<li class = "number">3</li>

number:nth-child(2){
//选中的number类的第二个
}

5.子元素超出父元素的范围的部分设置：overflow

{
//超出的部分直接隐藏
overflow: hidden;
//内容不会被修剪，超出的部分显示在元素框之外
overflow: inherit;
//内容会被修剪，浏览器会显示滚动条来查看内容
overflow: scroll;
//由浏览器自行定夺，如果内容被修剪，则显示滚动条
overflow: auto;
}

拓展：对于溢出文本的处理
常规来讲如果文本直接被隐藏或者滚动，会比较僵硬
一般常见的显示方式应该是 超出的部分用…来进行替代

{//文本溢出省略 text-overflow
两个选择值：clip/ellipsis
clip:默认值，指在文本超出地方截断文本
ellipsis:用...来隐藏被截断的文本
}

6.文字划线效果的实现

text-decoration: 
line-through;//在元素的中间划线
underline//在元素下方显示一条线
overline//在元素上方显示一条线