前端CSS（前端css面试题）

25-02-24 12

想了解前端CSS的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于前端css面试题的相关问题，此外，我们还将为您介绍关于4.前端CSS—定位、5.前端CSS—属性、bootstrap（前端cs

想了解前端CSS的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于前端css面试题的相关问题，此外，我们还将为您介绍关于4.前端CSS—定位、5.前端CSS—属性、bootstrap （前端css框架）、OSChina前端CSS框架的新知识。

本文目录一览：

前端CSS（前端css面试题）
4.前端CSS—定位
5.前端CSS—属性
bootstrap （前端css框架）
OSChina前端CSS框架

前端CSS（前端css面试题）

CSS介绍

　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

CSS实例

　　　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/

CSS的几种引入方式

行内样式

　　　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

内部样式

　　　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式

　　　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>  #现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径

　　文件内容是：

p {color:blue;}
/*注释*/

注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的
/*标题样式*/
xxxxx

/*个人中心设置*/

css的选择器：(这些都是在外部样式中使用的)

? 1.基本选择器

? 2.高级选择器

CSS选择器（如何找到对应的标签）

基本选择器

基本选择器包括：

标签选择器

id选择器

类选择器

元素选择器（标签名）(标签选择器)

p {color: "red";}

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

ID选择器

#i1 {   #号表示id属性，后面的i1表示id属性的值
  background-color: red;  #背景色，color:red是字体颜色，这个简单知道一下就行了，明天我们再学这些具体的css样式
}

# 选中id

同一个页面中id不能重复。任何的标签都可以设置id id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

id不能重复，如果想给多个p标签同时添加一个css样式怎么办？挨个添加id属性吗？并且，如果是不同的标签，但是他们的css样式要一样，怎么办？看下面

类选择器

.c1 {  .表示class属性，c1表示class的值
  font-size: 14px;
}
p.c1 {  找到所有p标签里面含有class属性的值为c1的p标签，注意他俩之间没有空格昂
  color: red;
}

所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

类的使用，能够决定前端工程师的css水平到底有多牛逼？

玩类了，一定要有”公共类“的概念。

.lv{
    color: green;
?
}
.big{
    font-size: 40px;
}
.line{
   text-decoration: underline;
}

 <!-- 公共类    共有的属性 -->
<div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
</div>

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

每个类要尽可能的小，有公共的概念，能够让更多的标签使用

到底使用id还是用class？


答案：尽可能的用class。除非一些特殊情况可以用id
?
原因：id一般是用在js的。也就是说 js是通过id来获取到标签

注意：

　样式类名不要用数字开头（有的浏览器不认）。

　标签中的class属性如果有多个，要用空格分隔。

通用选择器

* {  *表示所有的标签
  color: white;
}

高级选择器

高级选择器包括：

后代选择器
子代选择器
并集选择器
交集选择器

后代选择器

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.container>p{
    color: yellowgreen;
}

并集选择器

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的并集(分组)选择器来统一设置元素样式。

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签都可以使用这个选择器设置的样式。一些共性的元素，可以使用并集选择器.比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/

交集选择器

/*交集选择器*/
p.Box1{  /* p标签和类名为Box1的标签都有的属性 */
    color: green;
}

p#Box{  /* p标签和ID名为Box的标签都有的属性 */
    color: red;
}


 /* 还可以表示选中的两个选择器共有的特性。(即使用这两个选择器的标签共有的属性)*/
h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}

补充选择器

属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

# 语法:
/*根据属性查找*/
/*[for]{
    color: red;
}*/

/*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for=‘username‘]{
    color: yellow;
}*/

/*以....开头  ^*/  
/*[for^=‘user‘]{
    color: #008000;
}*/

/*以....结尾   $*/
/*[for$=‘vvip‘]{
    color: red;
}*/

/*包含某元素的标签*/
/*[for*="vip"]{
    color: #00BFFF;
}*/

/**/

/*指定单词的属性*/
label[for~=‘user1‘]{
    color: red;
}

input[type=‘text‘]{
    background: red;
}

伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" love HAte

/*没有被访问的a标签的样式*/
.Box ul li.item1 a:link{
    
    color: #666;
}
/*访问过后的a标签的样式*/
.Box ul li.item2 a:visited{
    
    color: yellow;
}
/*鼠标悬停时a标签的样式*/
.Box ul li.item3 a:hover{
    
    color: green;
}
/*鼠标摁住的时候a标签的样式,就是鼠标点下去还没有抬起来的那个瞬间*/
.Box ul li.item4 a:active{
    
    color: yellowgreen;
}

另一种伪类选择器:css3的选择器nth-child()

/*选中第一个元素*/
div ul li:first-child{
    font-size: 20px;
    color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
    font-size: 20px;
    color: yellow;
}

/*选中当前指定的元素  数值从1开始*/
div ul li:nth-child(3){
    font-size: 30px;
    color: purple;
}

/*n表示选中所有,这里面必须是n,从0开始的  0的时候表示没有选中*/
div ul li:nth-child(n){
    font-size: 40px;
    color: red;
}

/*偶数*/
div ul li:nth-child(2n){
    font-size: 50px;
    color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
    font-size: 50px;
    color: yellow;
}
/*隔几换色  隔行换色
     隔4换色 就是5n+1,隔3换色就是4n+1
    */

div ul li:nth-child(5n+1){
    font-size: 50px;
    color: red;
}

伪元素选择器（通过css来造标签，不推荐使用）

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在每个<p>元素之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:‘alex‘;
        }
        
        
/*在每个<p>元素之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:‘&‘;
            color: red;
            font-size: 40px;
        }

上面的这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。

　　　　　　before和after多用于清除浮动。后面讲

CSS的继承性和层叠性

css有两大特性：继承性和层叠性

继承性

　　当选择器相同的时候，按照顺序来看css样式，谁最后就按照谁渲染。那如果是不同的选择器的时候呢？就要学习我们下面的优先级了，首先看一下继承：

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来： color 、 font-、 text-、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的，他的权重是0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {  # 无论顺序如何,都会显示绿色(可以理解为自己的比继承的(权重是0)权重高,也可以按照面向对象的思想理解为自己有的属性就不去拿父类的了)
  color: green;
}

层叠性

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图:

注：内联样式的意思是把css样式写在标签里面：

其他的权重：但是有一点说一下，就是上面那个权重计算永不进位的意思是：我们看上面知道class的权重是10，但是即便是11个class相加起来大于id的100权重，也还是id生效，也就是说，不会进位，class组合起来也无法超过id的权重.

层叠性：权重大的标签覆盖掉了权重小的标签，说白了，就是被干掉了
权重：谁的权重大，浏览器就会显示谁的属性,前提是都要选中目标标签,否则都是继承性,权重都是0.
谁的权重大？非常简单就是小学的数数。
数：id的数量 class的数量标签的数量，顺序不能乱

看栗子:

<!--test.HTML文件-->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./01-css高级选择器.css">
</head>


<body>

<div id=‘Box1‘ class="wrap1">
    <div id="Box2" class="wrap2">
        <div id="Box3" class="wrap3">
            <p id="pid" class="pclass">再来猜猜我是什么颜色？</p>
        </div>
    </div>
</div>

</body>
</html>

一:都选中了目标标签 ,比较权重,谁的权重大，浏览器就会显示谁的属性

/*这里是01-css高级选择器.css文件中的内容*/


id的数量 class的数量 标签的数量
/*1  0  0 */显示红色
#pid{  # id选择器
    color: red; 
}
/*0  1  0*/
.pclass{  # 类选择器
    color: yellow;
}
/*0  0  1*/
p{  # 标签选择器
    color: purple;
}

#Box1 #Box2 p{  #显示黄色
    color: yellow;
}

#Box2 .wrap3 p{
    color: red;
}

div div #Box3 p{
    color: purple;
}


div.wrap1 div.wrap2 div.wrap3 p{
    color: blue;
}

更多权重测试

#Box2 .wrap3 p{
    color: yellow;
}

#Box1 .wrap2 p{  # 显示红色
    color: red;
}

权重一样(都不为0,即都选中了目标标签),按照默认顺序渲染,后来者居上(前面的被覆盖)

二:都没选中目标标签 ,比较距离:

继承来的权重都是0,那么就是"就近原则" ：谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层(目标标签)的距离越近。

#Box1 #Box2 .wrap3{ # 显示红色,因为距离目标元素"近"
    color: red;
}
.wrap1 #Box2{
    color: green;
}

三:有选中,有继承,选中的大于继承的:继承来的属性，它的权重为0。

#Box1 #Box2 .wrap3{ # 继承的
    color: red;
}
        
#Box2 .wrap3 p{ # 结果为绿色,因为选中的大于继承的
    color: green;
}

总结：
1.先看标签元素有没有被选中，

如果都选中了，就数权重（id,class,标签的数量）:
- 　　谁的权重大就显示谁的属性;
- 　　权重一样大，后来者居上.
如果有没有选中的标签元素(没有选中标签元素(即通过继承)的权重为0):
- 都是继承下来的,权重都是0 ==>"就近原则" ：谁描述的近，就显示谁的属性
- 一个是继承,一个是选中==>选中的大于继承的权重

!important 的使用

除此之外还可以通过添加 !important方式来强制让样式生效，不讲道理的操作，但并不推荐使用。因为使用它会影响页面的布局,如果过多的使用!important会使样式文件混乱不易维护，使用方法：

#Box1 #Box2 .wrap3{
    color: red !important;
}

#Box2 .wrap3{
    color: blue !important;
}

注意:

!important 设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。

今日内容小结:

# HTML文件引入CSS的方式:
1 行内样式
    在标签中添加一个style属性,属性值写要设置的样式
2 内接样式
    添加一个style标签,在标签中写要设置的样式
3 外接样式
    添加一个link标签,在href中指定要导入的css样式文件的路径
    在css样式文件中写样式

# 基本选择器
1 标签选择器
    直接写标签名
2 id选择器
    #id
3 class类选择器
    .类名


# 高级选择器
1 子类选择器
    用 大于号
    选择的是前一级标签的子标签

2 后代选择器
    用 空格
    选择的是前一级标签的后代标签
3 并集选择器
    用 逗号
    选择所有符合条件的标签
4 交集选择器
    开头是标签名 后边跟id或类选择器(注意,没有空格)

5 通用选择器
    * 选择所有的标签

6 属性选择器
    1 [属性名]  带这个属性名的标签
    2 [属性名=‘要匹配的属性值‘] 带有属性,属性的名符合匹配要求
    3 [属性名^=‘属性值的开头字符串‘]
    4 [属性名$=‘属性值的结尾字符串‘]
    5 [属性名*=‘属性值包含的字符串‘]

7 伪类选择器
    a:    love HAte
        四种状态:   未被访问的链接  link
                    访问过的链接   visited
                    鼠标悬停的样式  hover
                    鼠标按下时的样式 active

    选择第一个孩子:
        :first-child
    选择最后一个孩子:
        :last-child
    选择指定的孩子:
        nth-child(n)

    p:first-letter :选择第一个字符
    p:before在标签前边添加一个标签内容
    p:after在标签后边添加一个标签内容

8 继承性
    字标签可以继承父标签的样式: color,font-,text- line-

9 层叠性
    (选择器权重一样的时候)后边添加的样式会覆盖前边的样式

10 权重
    id 权重100
    类 权重10
    标签  权重 1
    !important 权重无限大

    都有!important 的时候,比较权重

4.前端CSS—定位

一、相对定位
二、绝对定位
三、固定定位
四、z—index

一、相对定位

相对于自身原来的定位进行定位，以左上角为基准。

.c1{
  background-color: blue;
  height: 100px;
  width: 100px;
  /*相对定位*/
  position: relative; 

  
  top:100px;		/*可以为负值*/
  left: 100px;
  /*right*/
  /*bottom*/
}

top: 100px表示距离原来的上边框100px，即自己向下移100px。

相对定位特点：

不脱离标准流
保留自己原来的位置
和浮动类似也会遮住其他标签

二、绝对定位

.c1{
  background-color: blue;
  height: 100px;
  width: 100px;
  /*绝对定位*/
  position: abssolute;

  top:50px;		/*可以为负值*/
  left: 100px;
  /*right*/
  /*bottom*/
}

绝对定位特点：

不保留自己原来的位置
按照父级标签或者祖父级标签，设置position为relative的标签的位置进行移动，如果一直找不到设置了这个属性的标签，那么按照body标签来移动。

三、固定定位

根据浏览器窗口设置的定位,即不会随着页面的滚动而滚动。

设置固定定位用top描述，那么是以浏览器的左上角设为参考点；如果用bottom描述那么是以浏览器的左下角为参考点

.c4{
  position: fixed;
  left: 20px;
  top: 20px;
}

四、z—index

应用：直接在主界面上弹出登录框

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1{
            /*背景或字体颜色单独的透明度*/
            background-color: rgba(255, 0, 0, 0.3);
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: rgb(255, 0, 0,);
            height: 100px;
            width: 100px;
            /*设置整个标签透明度，*/
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div>
        你好
    </div>
    <div>
        你好
    </div>
</body>
</html>

5.前端CSS—属性

一、字体属性
- 1、font-size（字体大小）
- 2、font-weight（字体粗细）
- 3、font-family（字体系列）
- 4、color（字体颜色、背景颜色）
000 黑
fff 白
f00 红
333 灰
222 深灰
ccc 浅灰
二、文字属性
- 1、text-align（文本匹配）
- 2、text-decoration（文字装饰）
- 3、line-height（行高）
- 4、cursor（光标）
- 5、text-indent（首行缩进）
三、背景属性
- 1、background-image（背景图片）和background-repeat（平铺）
- 2、background-position（背景图像位置）
- 3、雪碧图（精灵图）技术
- 4、background-attachment（固定背景图像）
四、位置属性

一、字体属性

1、font-size（字体大小）

p{
	font-size: 14px;
}

font-size 属性可设置字体的尺寸。

px：像素，稳定和精确

%：把 font-size 设置为基于父元素的一个百分比值，布局时用到。

em：移动端字体样式大小，相对于其父元素来设置字体大小

rem：可以换算为各种移动端，相对于根元素来设置字体大小

2、font-weight（字体粗细）

font-weight字重，可用来调整字体粗细。

/*font-weight: normal;*/
/*font-weight: bold;*/
/*font-weight: bolder;*/
font-weight: 500;

取值说明：

值	描述
normal	默认值，标准粗细
bord	粗体
border	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细

3、font-family（字体系列）

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

p{
    width: 300px;
    height: 60px;

    /*综合性写法*/
    font: 15px/30px"宋体";
    /* 等价于
    font-size: 14px;
    line-height: 30px;
    font-family: '宋体';
    */
}

使用font-family注意几点：

网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用：微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。英语：Arial 、 Times New Roman
为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体： font-family: "Times New Roman","微软雅黑","宋体";
所有的中文字体，都有英语别名，要知道：微软雅黑的英语别名：font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "Simsun";font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","Simsun";
行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。 font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来，比如： font:16px/48px “宋体”;等价于 font:16px/300% “宋体”

CSS font-family 各名称一览表:

https://blog.csdn.net/cddcj/article/details/70739481

4、color（字体颜色、背景颜色）

颜色表示方法有三种：颜色名称单词（如:red）、rgb表示（如:rgb(255,0,0) ）、十六进制值（如:#FF0000）。

（1）RGB原理：光学显示器每个像素都是由三原色（红绿蓝）发光原件组成的，靠明亮不同调成不同的颜色。

　　用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值；其中255代表纯色，0代表无色。

常见颜色

div{
    /*黑色：*/
    background-color: rgb(0,0,0);
    /*光学显示器，每个元件都不发光，黑色的。*/

    /*白色：*/
    background-color: rgb(255,255,255);

    /*颜色可以叠加，比如黄色就是红色和绿色的叠加：*/
    background-color: rgb(255,255,0);

    background-color: rgb(111,222,123);
    /*就是红、绿、蓝三种颜色的不同比例叠加。*/
}

后来还演化出了rgba，可以用来实现透明度的调整：

div{
    background-color: rgba(0,0,0,.1);
}

（2）16进制表示法：

所有用#开头的值，都是16进制的。例如：#ff0000：红色
　　16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0)。

　　十六进制可以简化为3位，所有#aabbcc的形式（2位2位一样的），能够简化为#abc;

常见：

000 黑

fff 白

f00 红

333 灰

222 深灰

ccc 浅灰

二、文字属性

1、text-align（文本匹配）

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左对齐，默认值
right	右对齐
center	居中对齐
justify	两端对齐

2、text-decoration（文字装饰）

值	描述
none	默认，定义标准的文本。
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
inherit	继承都元素的text-decoration属性的值

/*设置线的颜色*/
text-decoration: underline blue;

使用最频繁的是消除a标签的默认样式

text-decoration: none;

3、line-height（行高）

p{
    /*行高*/
    line-height: 100px;
}

常用于文本垂直居中

（1）单行文本垂直居中

<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 50px;
            border: 1px solid red;
            /*行高的意思：
            公式：行高=盒子的高度，让文本垂直居中，
            但是只适应于单行文本。
            */
            line-height: 50px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div>
        一行文字
    </div>
</body>

　公式：行高=盒子的高度，让文本垂直居中（只适用于单行）

（2）多行文本垂直居中

注意：line-height一定要大于font-size，否则所有字都会挤在一起，影响美观。

<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            /*height: 200px;*/
            height: 160px;   /* padding加了40px,height一定要减40px */
            border: 1px solid red;
            /*运用padding居中*/
            padding-top: 40px;
            line-height: 30px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!--一个行高30px,一共4列，那就是120px
    总的高度是200px,如果让整个行高垂直居中在当前的盒子中。
    （200-120)/2=40px，设置padding-top,height高度
    -->
    <div>
       第一行文字
       第二行文字
    </div>
</body>

一个行高（line-height）30px,一共4列，那就是120px，总的高度是200px,如果让整个行高垂直居中在当前的盒子中。(200-120)/2=40px，设置padding-top=40px, height高度-40px。

　　总之：利用padding和line-height实现多行垂直居中需要通过精确计算实现。

4、cursor（光标）

p{
    text-decoration: underline blue;
    color: blue;
    cursor: pointer;  /* point在鼠标移上去时，光标呈现为指示链接的指针（一只手） */
}

cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

5、text-indent（首行缩进）

text-indent 属性规定文本块中首行文本的缩进。

注意：允许使用负值。如果使用负值，那么首行会被缩进到左边。

p{
    /*text-indent:50px;*/
    /* 首行缩进以em为准 */
    text-indent: 2em;   /* 不论字体大小， 2格字*/
}

三、背景属性

常用背景相关属性：

属性	描述
background-color	规定要使用的背景颜色。
background-image	规定要使用的背景图像。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-position	规定背景图像的位置。
inherit	规定应该从父元素继承background属性的设置。

1、background-image（背景图片）和background-repeat（平铺）

网页设置背景图方法：

body{
    background-image: url("./images/bojie.jpg");
}

background-repeat取值范围：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承background-repeat属性的设置。

2、background-position（背景图像位置）

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1500px;
        height: 1600px;
        background-image: url(./images/bojie.jpg);
        background-repeat: no-repeat;

        /*第一个是水平位置，第二个是垂直位置
        正值的时候，第一个值往右偏移，第二个值表示往下偏移
        负值则相反
        */
        /*background-position: 100px 100px;*/
        background-position: 100px -100px;
    }
</style>

background-position:200px 100px——第一个是水平位置，第二个是垂直位置
正值的时候，第一个值往右偏移，第二个值表示往下偏移；负值则正好相反。

由于导入背景图片的时候，默认就会平铺。因此需要设置background-repeat: no-repeat;

3、雪碧图（精灵图）技术

　background-position除了移动位置，更重要的是用来定位切图，也叫css精灵图。用处：为了避免网站大量img，请求过多，把很多小图标合并到一张图上，然后通过css的background-position切出来需要的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>雪碧图</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        Box1{
            width: 48px;
            height: 48px;
            background-image: url("./images/1.png");
            background-repeat: no-repeat;
            background-position: 0 -528px;/*在Photoshop上查看宽高*/
        }
        Box2{
            width: 48px;
            height: 48px;
            background-image: url("./images/1.png");
            background-repeat: no-repeat;
            background-position: 0 -440px;
        }
    </style>
</head>
<body>
    <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box1"></div>
    <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box2"></div>
</body>
</html>

设置背景图位置方向：

　　水平方向： left center right

　　垂直方向： top center bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title></title>

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1500px;
        height: 1600px;
        border: 1px solid red;
        background-image: url(./images/bojie.jpg);
        background-repeat: no-repeat;
        /*水平方向 left center right
          垂直方向 top center bottom
        */
        background-position: center top;
    }
</style>
</head>
<body>
    <div>
        一行文字
    </div>

</body>
</html>

常规写法

body{
    background-image: url("./images/banner.jpg");
    background-repeat: no-repeat;
    /*水平居中通天banner图*/
    background-position: center top;
}

综合属性写法：

body{
    /*设置综合属性*/
    background: red url("./images/banner.jpg") no-repeat center top;
}

4、background-attachment（固定背景图像）

div{
    /*综合属性*/
    width: 1200px;
    height: 1600px;
    background: url(./images/bojie.jpg) no-repeat 0 0;
    /*固定背景*/
    background-attachment: fixed;
    color: white;
}

把固定背景属性也加入综合属性：

div{
    width: 1200px;
    height: 1600px;
    /*综合属性*/
    background: url(./images/bojie.jpg) no-repeat 0 0 fixed;
    color: white;
}

设置了background-attachment后，下上滚动页面内容时，背景图片保持不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>background-attach</title>
    <style type="text/css">
    div{
        /*综合属性*/
        width: 1200px;
        height: 1600px;
        background: url(./images/bojie.jpg) no-repeat 0 0 fixed;
        /*固定背景*/
        /*background-attachment: fixed;*/
        color: white;
    }
    </style>
</head>
<body>
    <div>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
    </div>
</body>
</html>