CSS权威指南

文章目录

- - 引入CSS样式表（书写位置）
  - - 行内式（内联样式）
    - 内部样式表（内嵌样式表）
    - 外部样式表（外链式）
  - CSS选择器
  - - CSS基础选择器
    - - 标签选择器
      - 类选择器
      - 类选择器特殊用法- 多类名
      - id选择器
      - 通配符选择器
  - CSS字体样式属性
  - - font字体
    - - font-size
      - font-family
      - font-weight
      - font-style
      - font:综合设置字体样式
  - CSS外观属性
  - - color:设置文本颜色
    - text-align:设置文本水平对齐方式
    - line-height:行间距
    - text-indent:首行缩进
    - text-decoration 文本的装饰
  - CSS复合选择器
  - - 后代选择器
    - 子元素选择器
    - 交集选择器
    - 并集选择器
    - 链接伪类选择器
  - 标签显示模式（display）
  - - 块级元素(block-level)
    - 行内元素(inline-level)
    - 行内块元素（inline-block）
    - 标签显示模式转换 display
  - 行高那些事（line-height）
  - - 单行文本垂直居中
  - CSS 背景(background)
  - - 背景颜色(color)
    - 背景图片(image)
    - 背景平铺（repeat）
    - 背景位置(position)
    - 背景附着
    - 背景简写
    - 背景透明(CSS3)
  - CSS 三大特性
  - - CSS层叠性
    - CSS继承性
    - CSS优先级
    - - 权重计算公式
      - 权重叠加
  - 盒子模型
  - - 盒子边框
    - 边框综合设置
    - 表格的细线边框
    - 内边距（padding)
    - 内盒尺寸计算（元素实际大小）
    - 外边距
    - 块级盒子水平居中
    - 文字居中和盒子居中区别
    - 外边距合并
    - - 相邻块元素垂直外边距的合并
      - 嵌套块元素垂直外边距的合并（塌陷）
  - 圆角边框(CSS3)
  - 盒子阴影(CSS3)
  - 浮动(float)
  - - CSS 布局的三种机制
    - - 普通流（标准流）
    - 为什么需要浮动？
    - 什么是浮动(float)
    - 浮动(float)小结
    - 浮动(float)的扩展
    - - 浮动元素与父盒子的关系
      - 浮动元素与兄弟盒子的关系
    - 清除浮动
    - - 为什么要清除浮动
      - 清除浮动的方法
  - 定位(position)
  - - 为什么使用定位
    - 定位详解
    - - 边偏移
      - 定位模式 (position)
      - 静态定位(static)
        
        相对定位(relative)
        
        绝对定位(absolute)
        
        固定定位(fixed)
    - 定位(position)的扩展
    - - 绝对定位的盒子居中
      - 堆叠顺序（z-index）
      - 定位改变display属性
  - CSS高级技巧
  - - 元素的显示与隐藏
    - - display 显示
      - visibility 可见性
      - overflow 溢出
  - CSS用户界面样式
  - - 鼠标样式cursor
    - 轮廓线 outline
    - 防止拖拽文本域resize
    - vertical-align 垂直对齐
    - 去除图片底侧空白缝隙
    - 溢出的文字省略号显示
    - margin负值之美
    - CSS三角形之美

引入CSS样式表（书写位置）

行内式（内联样式）

基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

案例：

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

内部样式表（内嵌样式表）

基本语法格式如下：

<head>
<style type="text/CSS">选择器（选择的标签） { 属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}
</style>
</head>

案例：

<style>div {color: red;font-size: 12px;}
</style>

外部样式表（外链式）

基本语法格式如下：

<head><link rel="stylesheet" type="text/css" href="css文件路径">
</head>

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

CSS选择器

CSS基础选择器

标签选择器

语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

语法：

.类名  {   属性1:属性值1; 属性2:属性值2; 属性3:属性值3;     
}

标签

<p class='类名'></p>

类选择器特殊用法- 多类名

<div class="fontWeight font20">亚瑟</div>

注意：

各个类名中间用空格隔开

id选择器

语法

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签

<p id="id名"></p>

注意：

元素的id值是唯一的，只能对应于文档中某一个具体的元素。

通配符选择器

语法：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

案例

* {margin: 0;                    /* 定义外边距*/padding: 0;                   /* 定义内边距*/
}

注意

会匹配页面所有的元素，降低页面响应速度，不建议随便使用

CSS字体样式属性

font字体

font-size

作用：

font-size用于设置字号大小

p {  font-size:20px; 
}

单位

相对长度单位比较常用，推荐使用像素单位px

font-family

font-family属性用于设置哪一种字体

p{ font-family:"微软雅黑";}

font-weight

作用

font-weight用于设置字体粗细

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗的）400 等同于 normal，而 700 等同于 bold

font-style

作用

font-style用于设置字体风格

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

font:综合设置字体样式

语法格式

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意：

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

CSS外观属性

color:设置文本颜色

其取值方式有如下3种：

表示	属性值
预定义的颜色值	red，green，blue
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

text-align:设置文本水平对齐方式

属性	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐

line-height:行间距

一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;

text-indent:首行缩进

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

p {/*行间距*/line-height: 25px;/*首行缩进2个字  em  1个em 就是1个字的大小*/text-indent: 2em;  }

text-decoration 文本的装饰

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

CSS复合选择器

后代选择器

作用：用来选择元素组的子孙后代

语法：

父级 子级{属性:属性值;属性:属性值;}

案例

.class h3{color:red;font-size:16px;}

子元素选择器

作用：子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素

语法：

.class>h3{color:red;font-size:14px;}

交集选择器

用法：

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

并集选择器

用法：

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。

链接伪类选择器

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

注意：

写法：按照 lvha 的顺序。否则可能引起错误

标签显示模式（display）

块级元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点

自己独占一行
高度，宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div ，p标签里面也不能放p
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素。

注意：

链接里面不能再放链接
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

行高那些事（line-height）

行高测量方法：基线到基线的距离

单行文本垂直居中

行高和高度的三种关系

如果行高等高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上

CSS 背景(background)

背景颜色(color)

语法：

background-color:颜色值;   默认的值是 transparent  透明的

背景图片(image)

语法：

background-image : none | url (url)

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

background-image : url(images/demo.png);

背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景位置(position)

语法：

background-position : length || lengthbackground-position : position || position

参数	值
length	百分数 \|由浮点数字和单位标识符组成的长度值
position	top \|center\|bottom\|left\|center\|right 方位名词

注意：

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

语法：

background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

背景简写

background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写
background: 背景颜色背景图片地址背景平铺背景滚动背景位置;

语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

背景透明(CSS3)

语法：

background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha 透明度取值范围 0~1之间
我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
因为是CSS3 ，所以低于 ie9 的版本是不支持的。

CSS 三大特性

CSS层叠性

原则：样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

CSS继承性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

CSS优先级

权重计算公式

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

权重叠加

div ul li ——> 0,0,0,3
.nav ul li ——> 0,0,1,2
a:hover —–—> 0,0,1,1
.nav a ——> 0,0,1,1

注意：

数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

盒子模型

盒子模型有元素的内容、边框（border）、内边距（padding）、content( 内容 )和外边距（margin）组成。

盒子边框

语法：

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框样式：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

边框综合设置

border : border-width || border-style || border-color

案例

 border: 1px solid red;  没有顺序

表格的细线边框

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过css属性：

table{ border-collapse:collapse; }

案例

<style>table {width: 500px;height: 300px;border: 1px solid red;}td {border: 1px solid red;text-align: center;}table, td {border-collapse: collapse;  /*合并相邻边框*/}
</style>

内边距（padding)

padding属性用于设置内边距。 是指边框与内容之间的距离。

设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

当我们给盒子指定padding值之后，发生了2件事情：

内容和边框有了距离，添加了内边距。
盒子会变大了。

简写：

值的个数	描述
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；

内盒尺寸计算（元素实际大小）

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

外边距

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

设置

属性	描述
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin值的简写（复合写法）代表意思跟 padding 完全相同。

块级盒子水平居中

常见的写法，以下下三种都可以。

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中左右margin 改为 auto

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

解决方案：尽量给只给一个盒子添加margin值。

嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，

圆角边框(CSS3)

语法：

border-radius:length;

盒子阴影(CSS3)

语法：

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

前两个属性是必须写的。其余的可以省略。
外阴影 (outset) 是默认的但是不能写，想要内阴影可以写 inset

浮动(float)

CSS 布局的三种机制

普通流（标准流）

块级元素会独占一行，从上向下顺序排列；
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

定位

将盒子定在浏览器的某一个位置——CSS 离不开定位

为什么需要浮动？

1.如何让多个盒子(div)水平排列成一行？

2.如何实现盒子的左右对齐？

虽然通过过行内块（inline-block）但是他却有自己的缺陷：

它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。
它不能实现以上第二个问题，盒子左右对齐

什么是浮动(float)

作用：

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等

语法：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动(float)小结

float —— 浮漏特

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子
特	特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

浮动(float)的扩展

浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

注意：

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

清除浮动

为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

清除浮动的方法

1.额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

2.父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

3.使用after伪元素清除浮动

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */

4.使用双伪元素清除浮动

.clearfix:before,.clearfix:after { content:"";display:table; 
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}

定位(position)

为什么使用定位

将盒子定在某一个位置自由的漂浮在其他盒子(包括标准流和浮动)的上面

三种布局机制的上下顺序

标准流在最底层 (海底) ——- 浮动的盒子在中间层 (海面) ——- 定位的盒子在最上层（天空）

定位详解

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

边偏移

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

定位模式 (position)

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
`fixed`	固定定位

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思

相对定位(relative)

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位(absolute)

完全脱标 —— 完全不占位置
父元素没有定位，则以浏览器为准定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

固定定位(fixed)

完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动

定位(position)的扩展

绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

在使用绝对定位时要想实现水平居中

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半

堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序

z-index 的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

同时注意：

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

CSS高级技巧

元素的显示与隐藏

display 显示

display 设置或检索是否显示对象。

display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visibility：visible ; 　对象可视visibility：hidden; 　  对象隐藏

特点：隐藏之后，继续保留原有位置

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

CSS用户界面样式

鼠标样式cursor

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

最直接的写法是： outline: 0; 或者 outline: none;

<input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

vertical-align : baseline |top |middle |bottom

注意：

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

去除图片底侧空白缝隙

解决的方法就是：

给img vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字省略号显示

总结三步曲

/*1. 先强制一行内显示文本*/white-space: nowrap;
/*2. 超出的部分隐藏*/overflow: hidden;
/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

margin负值之美

负边距+定位

案例

<style>div{width: 400px;height: 200px;border: 1px solid #cccccc;margin-left: -1px;margin-top: -1px;float: left;position: relative;}div:hover{border: 1px solid orange;z-index: 1;}</style><body><div></div><div></div><div></div><div></div><div></div><div></div>
</body>

CSS三角形之美

     div {width: 0;height: 0;line-height: 0;font-size: 0;border-top: 100px solid red;border-right: 100px solid green;border-bottom: 100px solid blue;border-left: 100px solid #000;}