css基础

学前端的小梨子
257 阅读26分钟

css三种嵌入方法的区别：

1.内联式（行内式）

eg：

小猿圈

使用缺点：1.会反复使用样式，使得文件变大。

2.不利于后期维护

3.不符合结构和样式分离的规范

使用优点：不会额外产生请求

总结：不建议在网页上使用（一般不用这种写css样式）

2.嵌入式

eg：

使用缺点：1.不能解决代码的复用（当有多个HTML页面的时候就不太方便）

使用优点：1.能初步实现标签结构与样式分离

2.也不会产生额外的请求

总结：适合单页面的网站，只有一个HTML的页面可以使用嵌入式的样式

3.外部式：

在heda里面用link标签，链接外部css样式

优点: 1.方便维护

2.可以重复使用（多个页面的HTML，可以共享HTML的样式）

3.完整的实现结构与样式的分离

缺点：会产生额外的请求

3种引入方式的优先级是：内联式>嵌入式>外部式

注意：嵌入式与外部式的执行顺序是与在HTML的顺序有关

css的选择器

一、基础选择器

1.标签（元素）选择器

语法：eg：

选择器{

样式:

}

div{

color:red;

}

标签里面内容的样式设置（他选择的是网页中共有的标签属性）

2.类（class）选择器

1.语法：

.class选择器（就是class冒号里面的内容）

{

样式

}

2.作用：选择不同的标签，来设置共同的属性
3.特点：一个标签里面不仅可以携带一个类，还可以携带多个类。
4.如果玩好类选择器

要识别出样式中相同的属性

3.id（身份证号）选择器

注意：id是不能重复的

语法：#id选择器名称{

样式

}

id选择器是选择网页中特有的选择器

二、高级选择器

1.后代选择器

顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。

语法：div 对应标签{

样式

}

注意：当页面布局中存在多个div之后，只想给其中某一个div写样式的时候，就要给他添加一个类名class，相应的css里面的div也要写成“.+class的值 对应的标签”。

重点：这个对应的标签，可以是div的下一级标签，也可以是下下一级标签。所以称为后代。

eg：

`

打游戏

​ [123](#) `

div p { color: red; }

效果展示：

2.子代选择器

子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。

只会对div下一级起作用。不会对div的下下一级起作用。

语法：div>p{代码样式；}

注意：当页面布局中存在多个div之后，只想给其中某一个div写样式的时候，就要给他添加一个类名class，相应的css里面样式里面的div也要写成类选择器的写法“.+class的值>对应的标签”。

3.组合选择器

css样式写法：

p,span,a{ color: green; }

`

    <p>    我在人民广场吃个炸鸡      </p>

​ 看电视 ​ 你好城市 ​

`

为几个不同的标签，添加相同的样式

4.交集选择器

两个选择器之间共同的属性

样式写法：

选择器1选择器2{

样式

}

在网页当中一般很少用

5.伪类选择器

更有趣的是伪类选择器，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色。

`/

鼠标没有被访问的状态

/ a:link{ color: red; }

/

鼠标访问过后的状态

/ a:visited{ color: green; }

/

鼠标悬浮上去没有点击的状态

/ a:hover{ color: yellow; }

/

鼠标点击长按不放的状态

/ a:active{ color: blue; }`

三、css的选择器总结

语法：

选择符{

属性：值；

}

作用：选中页面上的元素（标签），设置对应的样式

1.基础选择器

1.标签选择器【对页面中的相同元素（标签），设置相同的样式】

2.id选择器

1.任何元素都能设置id

2.id是唯一的，不能重复，表示选中的是有特性的元素

3.class选择器

1.任何元素都可以设置类

2.一个元素中可以设置多个类

3.一定要有“归类的概念，公共的想法”。选中的页面元素。设置相同的属性

2.高级选择器

1.后代选择器（爸爸的儿子，孙子.....)

div p{ }

2.子代选择器（亲儿子）

div>p{ }

3.组合选择器

选择器1，选择器2，选择器3{ }

4.交集选择器

选择器1选择器2选择器3{ }

5.伪类选择器

“a标签 爱恨准则 LoVe HAte

a:link{ }

a:visited{ }

a:hover{ } (悬浮上去没有的点击的状态，可用于任何标签)

a:hover{ } （鼠标长按不放的状态）

css的继承、层叠及特殊性

1、css的继承性

在css中某些样式是具有继承性的，那么什么是继承呢？官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

一般是用于继承颜色、字号、等。（有些属性是不能继承的，怎么确认能不能继承可以打开网页源代码查看

2、css选择器权重

选择器显示先后顺序:

内联选择器>id选择器>类选择器>标签选择器

权重的计算方法：数选择器的数量

顺序为id选择器（百位） 类选择器（十位） 标签选择器（个位）

在网页中可以通过计算权重的方式看页面优先显示哪个属性。

3、！important

我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？比如我们知道内联样式的权值是1000，比较大，那么我们可以使用!important来解决。

代码样式：

`

</div> 
div{        color:red !important;}​.baidu{    color: blue;}​</style>
百度一下
`

！inportant，应该写在；前面

但是使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签，那么拥有最大优先级的将会被采用。

css常用格式化排版

1.字体属性

字体的选择：

font-family：“微软雅黑，方正大黑简体，”浏览器从左向右显示字体，如果用户电脑上没有微软雅黑字体，则显示“逗号后面的字体，也就是我们说的备选字体。

字体大小属性：

font-size：16px，（默认选择下，body属性下的字体大小在浏览器中显示为16px

px是像素单位，同样的像素单位还有 em rem。

px是一个绝对像素单位，像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子

字体颜色 color属性

颜色表示方法在css中有三种方式：

  • 英文单词表示法，比如red、green、blue

  • rgb表示法

  • 十六进制表示法

    color：rgba( 255,255,255,.1 )

    a为透明度属性：取值范围为0-1，默认为1.

字体样式

网站中的字体分为了普通字体和斜体字体，我们可以使用font-style属性来设置对应的字体样式。

字体粗细

网站中我们可以通过font-weight来设置文字的粗体大小。这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细。

2.文本属性

文本修饰

在网页中有些时候我们需要对文本设置下划线，或者删除线。

如果想实现下划线或者删除线，使用text-decoration属性。

文本缩进

text-indent： （单位用em）

比如我们通常写文章的时候，首字母要空两格。那么我们需要使用text-indent属性来实现。它的属性值是像素(px、em、rem)单位。

em：它是一个相对单位，相对于p标签的字体大小来进行设置。如果p标签的字体是16px,那么1em=16px。如果我后期设置了字体大小为20px,那么2em就自动变为40px。

行间距

line-height

行间距，也叫行高，表示行与行之间的距离。为了使文本显示更加美观，我们可以使用line-height属性来进行设置行间距，它的单位为像素。

中文字间距、字母间距

letter-spacing （调整文字与文字之间的距离）

word-spacing（调整英文单词之间的距离）

如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。

文本对齐

水平居中显示：text-align

css元素分类、特征及display

1.元素分类、特征

在讲解css盒模型和布局之前，我们需要提前知道一些知识，为了后续的知识点做储备。在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素。

html标签甚至有好几百个，我们之前学习大约有30个标签，你所看到的很多大型网站我们都能通过这些标签来搭建我们网站结构。那么这么多标签，显然是比较没有规律的，那么这节课我们就来对这些常用的标签进行分类。了解了每类标签的特点之后，我们才能更好的对网站进行布局。

3种元素的特点：

2.display属性

控制元素显示的方式

块级元素 display：block；

行内元素 display：inline；

行内块元素 display：inline-block；

元素隐藏：display：none；ver

盒模型

1、什么是盒模型

所有的HTML可以看做盒子。

它包括：外边距（margin）、边框（border）、内填充-边框到内容的距离（padding）和实际内容（content）。

盒子模型中有四个属性：内容的宽高、内边距、外边距、边框。

内容的宽高

需要注意的是，盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的，css定义的宽(width)和高(height),指的是盒子内部物体所占据的宽高，在css中指的是填充以里的内容范围。

内边距padding：

eg：

padding：20px；（表示内容距离上下左右各20px）

padding：20px 40px；（表示内容距离上下20px，左右40px）

padding：20px 30px 40px；（表示内容距离上20px，左右30px，下40px）

padding：10px，20px 30px 40px；（表示内容距离上10px，右20px，下30px，左40px）

边框border：

三要素：粗细width、样式style、颜色color

  1. border-width:3px;

  2. border-style:solid;

  3. border-color:red;

  4. /*上面三句代码相当于一句代码：border:3px solid red;*/

  5. ``

  6. /*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/

  7. /*上下5px 左右10px*/

  8. border-width:5px 10px;

  9. /*上：实线 右：点状 下：双线 左：虚线*/

  10. border-style: solid（实线） dotted（点线） double（双线） dashed（虚线）;

  11. /*上：红色 左右：绿色 下：黄色*/

  12. border-color: red green yellow;

按照方向：

border:none或者border：0(表示清除input标签默认的边框样式)

outline:none或者outline:0(表示清除外边框)

外边距

在盒子模型中称为外边距，样式表中叫margin。表示盒子到另一个盒子的距离。既然是两者之间的距离，那么就会产生水平之间的距离和垂直之间的距离。同样情况下，外边距也有四个方向，跟padding类似。

margin：垂直方向上会出现外边距合并（可以简单的理解为它的垂直方向上显示数值大的那一个值）

水平方向上的间距值是相加的

HTML样式清除

margin:0(表示清除html的边框样式)

border:none或者border：0(表示清除input标签默认的边框样式)

outline:none或者outline:0(表示清除外边框)

padding:0(清除默认内边距样式)

list-style：none；（表示清除ul、ol标签默认样式）

盒子居中显示

给盒子添加

margin：0 auto；效果显示，0代表上下方向，auto，代表左右方向。

div class="container"

盒子居中显示的类名用container

css的布局

1.浮动

浮动属性：

浮动现象：

1.文字环绕

2.脱离了元素互相贴靠

3.浮动元素互相贴靠

4.浮动元素有收缩现象

浮动的破坏性：

撑不起父盒子的高度栏。

清除浮动方式

1.给父元素设置固定高度。

缺点：使用不灵活，后期不易维护

应用：网页中盒子固定高度的区域，比如固定的导航栏。

2.内墙法

所谓内墙法,有一个规则:在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。

clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。

代码如下：

<!DOCTYPE html><html><head>   <meta charset="utf-8">    <title>浮动元素的破坏性</title><style type="text/css">       .father        {                       border: 1px solid red;               }       .child        {                       width: 200px;                      height: 200px;                        float: left;                      background-color: green;                }        .clearfix            {                       clear: both;                  }      </style>   </head>   <body>           <div class="father">               <div class="child">儿子</div>               <div class="clearfix"></div>            </div>    </body></html>

应用：网页中应用不多，讲解这个，只是为了引导下一个清除浮动的方式，那才是我们重点要掌握的。

缺点：结构冗余

3.伪元素清除法

上节课说到内墙法，在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。那么正好在css3的属性用法中整好有个选择器也完全符合这个用法,伪元素选择器。

伪元素选择器很简单。就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，他们允许您为元素的某些部分设置样式。在这里只介绍一个。

语法：

p::after{    /*p::after{}一定要有content。表示在p元素内部的最后面的添加内容*/    content:'...'}

表示在p标签元素的最后面添加样式。咦….，在….的z后面添加样式，这不正好符合了我们的内墙法的用法么。

代码如下：

分别对编写的伪元素清除法一一解释：

.clearfix:after{                   content:'.';                    display: block;                    clear: both;                    overflow: hidden;                    height: 0;}

  • content:'.';表示给.clearfix元素内部最后添加一个内容，该内容为行内元素。

  • display:block;设置该元素为块级元素，符合内墙法的需求。

  • clear:both；清除浮动的方法。必须要写

  • overflow:hidden;height:0;如果用display:none;,那么就不能满足该元素是块级元素了。overflow:hidden;表示隐藏元素，与display:none;不同的是，前者隐藏元素，该元素占位置，而后者不占位置。

  • .clearfix::after{ content: ''; clear: both; display: block;

4.overflow：

overflow:hidden

CSS属性overflow定义一个元素的内容太大而无法适应盒子的时候该做什么。它是overflow-x和overflow-y的简写属性

除了设置滚动以外，这个属性也可以用于清除浮动。

给父级元素添加一个overflow:hidden属性就可以清除浮动。

它可以清除浮动的原因：是形成的一个BFC (block formtting context) 区域，

形成BFC的条件：除了overflow：visitable的属性值以外的，都可以形成BFC区域。

BFC区域的一条规则：计算BFC（快级盒子）的高度时，浮动元素也参与计算。

2.定位

position属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置。

1.相对定位：

position：relative

不脱离相对文档流，参考点是以原来的位置定位的

参考点

以自身原来的位置进行定位，可以使用top,left,right,bottom对元素进行偏移

现象

  1. 不脱离标准文档流，单独设置盒子相对定位之后，如果不用top,left,right,bottom对元素进行偏移，那么与普通的盒子没什么区别。

  2. 有压盖现象。用top,left,right,bottom对元素进行偏移之后，明显定位的元素的层级高于没有定位的元素

应用

相对定位的盒子，一般用于子绝父相布局模式的参考。下节课知晓

2.绝对定位

相对定位的元素并没有脱离标准文档流，而绝对定位的元素则脱离了文档流。在标准文档流中，如果一个盒子设置了绝对定位，那么该元素不占据空间。并且绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于根元素页面的左上角进行定位。

绝对定位的盒子是以最近的非static定位的父元素进行定位，为了演示此效果。特意将网页结构层次增多，并且区分跟body页面左上角的位置，将紫色边框的父元素进行了位置调整，并且将.father和.grandfather元素同时设置了相对定位。来完成此效果。

总结：

参考点

相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面 (HTML,而不是body）左上角进行定位。

现象

  1. 脱离了标准文档流，不在页面中占位置

  2. 层级提高，做网页压盖效果

应用

网页中常见的布局方案：子绝父相；

子绝父绝，子绝父固，都是以最近的非static父辈元素作为参考点。父绝子绝，子绝父固，没有实战意义，布局网站的时候不会出现父绝子绝。

注意：子绝父绝，子绝父固，都是以最近的非static父辈元素作为参考点。父绝子绝，子绝父固，没有实战意义，布局网站的时候不会出现父绝子绝。

因为绝对定位脱离标准流，影响页面的布局。

相反”子绝父相“也就是给父辈元素设置相对定位，给子代元素设置绝对定位，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

注意：

当鼠标悬浮在span标签上的时候，也想出现“类似于a标签的小手状态”，需要添加一个cursor：pointer；属性

3.固定定位

position：fixed；

它跟绝对定位基本相似，只有一个主要区别：绝对定位固定元素是相对于html根元素或其最近的定位祖先元素，而固定定位固定元素则是相对于浏览器视口本身。这意味着你可以创建固定的有用的网页效果，比如固定导航栏、回到顶部按钮，小广告等。

特点：

1.脱离标准文档流

2.一旦设置固定定位，在页面中滚动网页，固定不变

参考点：以浏览器的左上角为参考点

应用：固定导航栏、回到顶部按钮，小广告等

4.z-index

上述讲解的绝对定位很有趣，会产生压盖的效果，但还有另外一件事我们还没有考虑到———当元素出现压盖时，是什么决定哪些元素出现在其他元素的上面呢？那么使用css属性的z-index能解决我们的疑问。但是使用z-index有以下几个规则：

  1. z-index只应用在定位的元素，默认z-index:auto;

  2. z-index取值为整数，数值越大，它的层级越高

  3. 如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。

  4. 从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

5.背景属性和边框属性

css的背景和边框属性是css中的一个模块，它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充，裁剪和调整大小，以及其他方式的修改。边框可以用线条或图像装饰，并制作成方形和圆形。此外，元素的框框可以用阴影来装饰。

background-image

给一个元素设置一个或多个背景图像，

语法：background-image：url（图片地址）

图像默认水平和垂直都平铺。

background-repeat

如果想让背景图像不平铺，则使用background-repeat

background-repeat的属性值

background-position

此属性表示背景图定位初始位置。background-position是background-position-x和background-position-y的综合属性。如果想使用background-position属性，那么必须先指定background-image属性。

语法

background-position:x  y;background-position: position  position

取值

  • 关键词：比如top、right、bottom、left和center

  • 长度值：比如px、em

  • 百分值：50%

另外，它的默认值为： 0% 0%。此时背景图像将被定位与内容区域的左上角。

最常用的是值也可以说最了解的值是关键词和长度值，当然百分比也会使用，然而百分比使用最多的是0%、50%和100%。

background-position:top left; /*背景图像在起始位置 跟：background-position: 0 0; 一样。*/

那么top left center bottom四个属性值总共出现的情况有：

background-position:top left; /*左上角*/background-position:top center;/*上方居中*/background-position:top right;/*右上角*/background-position:center top;/*中间靠左*/background-position:center center;/*中心显示*/background-position:center right;/*中间靠右*/background-position:bottom left;/*左下角*/background-position:bottom center;/*下方居中*/background-position:bottom right;/*右下角*/

如果设置为负值，表示反方向x和y轴定位背景图像。其实通过这个定位技术，我们在后面的精灵图技术中重点讲解。

好了，前面说过了，background-position的取值除了长度值和关键字之外，还可以取值为百分比值。比如：

background-position:100% 0%; /*right top*/background-position:50% 0%; /*top center*/background-position:50% 50%;/*center center*/background-position:50% 100%;/*center bottom*/

那么问题来了，你真的了解background-position取值为百分比的计算比例吗？如果我的百分比值不是和关键词对等的值呢？那么它是怎么计算的？这一系列的问题，你是否有仔细的思考过。就我个人而言，我以前所理解也存在一个误区：

我一直理解的background-position百分比值，它是相对于背景图片的尺寸。

但事实上，这种理解是一种错误。这也是今天踩的坑发现的。然后立马查了一下相关的规范文档，才彻底的搞清楚。那接下来，咱们就来聊background-position取值为百分比的计算方式。

W3C规范是这样描述的：

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by ‘background-size’.

也就是说，当背景图片尺寸（background-size）不做任何的重置（也就是100% 100%）时，水平百分比的值等于容器宽度百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。

比如前面的示例，如果取值background-position: 75% 50%;，背景图片的起始位置：

  • 水平位置（x轴）：(456 - 100) * 75% = 262.5px

  • 垂直位置（y轴）：(456 - 100) * 50% = 175px

x轴方向：456是容器的宽度，100是图片的宽度

y轴方向：456是容器的高度，100是图片的高度

6.CSS Sprite 雪碧图

CSS雪碧图技术：即CSS Sprite,也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。来举几个例子。如图

左边的导航和右边的立即注册的按钮，都是通过css的背景定位对雪碧图进行定位然后展示上去的。

使用雪碧图的场景：

1.静态图片，不随用户信息变化而变化，

2.小图片，图片比较小（2-3kb）

3.加载量比较大，大图不建议使用雪碧图

优点：

减少了HTTP请求数量，加速显示内容

（HTTP每请求一次，就会和服务器链接一次，建立链接式需要额外的时间开销）

雪碧图显示通过css的background-position属性显示的

使用background-size，能控制背景图片的缩放比例

透明度属性：transparent

雪碧图的实现原理

它通过css的背景属性的backrground-position的来控制雪碧图的显示。

控制一个层，可显示的区域范围大消息，通过一个窗口，进行背景图的移动。

雪碧图的制作

本课程中使用Adobe IIIustrator软件来快速的制作雪碧图。

7.边框属性(制作椭圆、圆)

之前咱们在讲解盒模型的时候，提到了border的相关使用，我们当时对边框使用三要素的形式将它划分，除了设置粗细，颜色，线性样式，想想一下边框还能呈现什么效果呢？

比如我们想让方形四角有圆角效果、制作椭圆、圆、甚至让盒子出现阴影的效果，在css2中是不易实现的，所以在这里为了更加方便的学习后面的第一阶段的项目，我们需要学习两个css3属性：border-radius和border-shadow

border-radius

传统的圆角生成方案，必须使用多张图片作为背景图案。css3的出现，使得我们再也不必浪费时间去制作这些图片，并且还有其他多个有点：

  • 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。

  • 提高网页性能。由于不必再发出多条的HTTP请求，网页的载入速度将变快

  • 增加视觉可靠性。（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。

css属性border-radius允许您设置元素的外边框圆角。含义是“边框半径”。腻味这个属性提供一个值，就能同时设置四个圆角的半径。属性值可以使用：em、px、百分比来表示。

比如，下面有一个div方框：

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以设置1到4个值，应用规则与第二组值相同

border-radius:15px 5px / 3px;

单个圆角的设置

除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：

  • border-top-left-radius

  • border-top-right-radius

  • border-bottom-right-radius

  • border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

border-top-left-radius: 15px;

8.box-shadow 盒子的阴影属性

9.确定错误发生的位置

假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。这样我们可以更精准的找到错误点，进行排错。

是否重设了默认的样式?

制作网页时，我们要清除掉默认的元素的padding和margin，使得我们更易去计算盒模型的大小。

10.元素居中显示

1.行内元素水平居中：text-align：center；

行内元素垂直居中：line-height:设置跟盒子一样的高度;

第二种方法是给当前盒子设置display：table-cell；再设置一个vertical-align：middle；（这是通过让盒子变成单元格的显示方式来控制盒子水平垂直居中的）

2.块及元素水平垂直居中显示：

第一种方法；

水平居中：margin：0 auto；

水平垂直居中：margin：auto；top：0；bottom：0；

right：0；left；给父级盒子设置一个相对定位，子盒子设置绝对定位属性，然后设置子盒子margin属性为auto，然后四个方向上的值都为0，中间的盒子就能水平居中了。

第二种方法；

display：table-cell（给父级盒子设置一个成单元格显示的属性）

第三种：

文本一行显示

1.文本显示一行：剩余部分省略号显示

overflow：hidden；

whitspace：nowrap；

text-overflow: ellipsis;

2.文本显示两行：剩余部分显示省略号

display:-webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp:2;

overflow: hidden;

text-overflow: ellipsis;

avatar
文章
阅读
粉丝