CSS知识全解

一.CSS3三种关联方式

行内样式表

内部样式表

z-index:auto与z-index:0的异同

z-index相同（处于同一平面的定位元素）的层叠关系

一.CSS3三种关联方式

行内样式表

就是将 CSS 代码放置在 HTML 代码内部

<a href="#" style="color:red;font-size:10px;">日用百货</a>

特点：

将CSS代码与HTML代码糅合一起，不利于后期维护
可以单独定义某个元素的样式，灵活多变
优先级高，单不推荐

内部样式表

内部样式表也称为内嵌样式表，是指 CSS 代码内嵌到 HTML 代码中

二者处于同一个文件中，通常 CSS 代码放置在 HTML 代码的标签内部。

<head>    
<meta charset="UTF-8">      
 <title>内部样式</title>  
  <style>        
div {            
   width: 100px;           
   height: 100px;            
   background-color: red;      
  }   
 </style>
</head>
<body>              
    <div>    
    </div>
</body>

特点：

写在<head>标签中，一定程度把CSS代码于HTML代码进行了分离
无法应用于其他HTML文件，实现样式复用
优先级低于行内样式表

外部样式表

外部样式表是指 CSS 代码完全独立出来，单独放置在扩展名为.css 的文件中，在 HTML文件中，将 CSS 文件引入进来，形成关联

<head>    <title>Document</title>     <link rel="stylesheet" href="./he.css"></head>

rel 属性：声明被链接文档与当前文档的关系，必写
type 属性：被链接文档的类型，可写
href 属性：被链接文档的地址，必写。

特点：

与内部样式表一样，写在<head>标签
实现了CSS代码与HTML代码的彻底分离，方复用，与后期维护
优先级低于内部样式
开发推荐

CSS优先级

CSS优先级是指当CSS声明发生冲突时，即将在两个不同位置，对同一HTML标签进行同样的CSS属性定义，

但取值不同。

优先采用的属性值通常是按就近原则来进行取值，即行级样式表>内部样式表>外部样式表

扩展

导入外部样式表的另一种方式

<head>    
<meta charset="UTF-8">   
 <style>        
@import url(./he.css);   
 </style>
</head>
<body>    
   <div>    
   </div>
</body>

区别：

<link>是HTML标签，import不是
<link>可以链接各种形式的文件，import只能导入CSS
<link>使用的是链接的方式，相当于桥梁，import使用的导入，导入到HTML文档中
<link>边加载网页边链接，import在加载网页完毕后才导入

二.CSS选择器

CSS选择器是指对CSS选择要修饰的元素

通用选择器

写法：

* {      }

作用：

选中页面中的所有标签，一般用于定义最通用的属性，设置默认值

优先级：

最低

标签选择器

写法：

HTML标签名 {    }

作用：

选择页面中所有的对应标签

优先级：

高于通用选择器

类选择器

写法：

.类 {    }

调用：

在需要改变的样式的标签上，使用class="选择器名称"调用对应选择器

作用：

修改所有调用选择器的标签

优先级：

高于标签选择器

注意：

类名称是可以随意取名的，但是不能以数字开头
类名称表示一定意义
当页面需要对多个元素应用相同样式，则采用类选择器
类选择器可以应用不同标签

ID选择器

写法：

#id名称{    }

作用：

在需要改变样式的标签上，使用id="选择器名称"调用对应选择器

优先级：

大于类选择器

注意：

id是唯一的，同一页面不能出现多个相同的id定义
id名称要求与类选择器相同
通常当页面中有唯一样式时，采用id选择器

后代选择器

写法：

选择器1 选择器2 选择器3 .... {    }div .li {       }

class="li"可以是div的子代，也可以是后代

子代选择器

写法：

选择器1>选择器2>选择器3....{    }div>ul {    }

ul必须是div的直接子代，孙代以后不选中

交集选择器

写法：

选择器1选择器2....{    }

选择器之间没有分隔符

元素必须同时具备选择器1&选择器2...才生效

并集选择器

写法：

选择器1,选择器2,....{    }

选择器之间用逗号分隔

元素只要具备选择器1或者选择器2...即可生效

伪类选择器

写法：

选择器名称:伪类状态{    }

伪类状态：

link未访问状态
visited已访问状态
hover鼠标指向时，即悬停在元素上方时
active激活选定状态(鼠标点下去没松开)
focus获得焦点时，(input常用)

超链接多种伪类共存时的顺序如下：

link---->visited---->hover----> active

选择器的优先级

第一原则“近者优先”，最内层选择器永远比外层优先
当作用于同一层时，可以根据选择器优先级权重进行计算
当优先级权重完全相同时，写在后面的选择器覆盖前面的选择器
!important 将当前CSS语句提升至最高权重，不推荐使用

三.CSS常用文本属性

字体

font-family：字体族，设置字体

常用三种属性：

font-style：设置字体样式

常用二种属性：

正常normal 斜体italic

font：缩写形式

缩写形式：

font-style、font-weight、font-size/line-height、font-family

字体样式、字体粗细、字号/行高、字体族

注意：

使用时必须严格按照上述顺序
多个样式之间用空格分隔，且font-size/line-height 必须作为一对，用/分隔
font-size 和font-family 必须指定,其他样式不指定将采用默认样式

font:      italic       bold 75%/1.8      'Microsoft Yahei', sans-serif;

字号

font-weight

设置字体粗细

bold加粗，lighter细体，或者填写100~900 (400为正常，700为加粗)

font-size

设置字体大小

属性值通常为px或%，大多数浏览器默认16px

字体颜色

color

设置字体颜色

直接写颜色的英文名
十六进制写法
rgb写法

opacity

设置透明度

注意：

使用opacity时当前元素以及子元素均会透明；

而使用rgba调整时，只会使当前元素透明，不会改变子元素透明度

文本属性

line-height

属性值表达：

像素单位
纯数值，正常行高的倍数
百分数，正常行高的百分数

经典案例：

height:100px line-height:100px

设置行高等于高度，则当前元素中文字垂直居中

text-align

设置块级元素中文字的水平对齐方式

letter-spacing

设置字符间距，即字与字之间的间距

text-decoration

文本修饰属性

属性：

underline 下画线
line-through 删除线
overline 上画线
none 不做修饰

overflow（overflow-x和overflow-y）

控制超出范围文本的显示方式

属性：

auto 自动显示
scroll 始终显示滚动条
hidden 超出范围文本隐藏，可以通过overflow-x和overflow-y分别设置水平催着方向的隐藏

text-overflow

设置多余文字的显示方式

属性：

clip 裁剪文本
ellipsis 使用省略号代替多余文字

white-space

设置元素内的空白符怎样处理

属性：

normal 默认，空白被忽略
nowrap 设置中文行末不断行显示
pre 空白被保留

案例：

如何让每行多余文字显示省略号？

white-space:nowrap; 如果是中文，需设置行末不断行 overflow:hidden; 设置控件超出范围text-overflow:ellipsis; 设置多余文本省略号显示

text-shadow

水平阴影距离必写数值越大阴影右移
垂直阴影距离必写数值越大阴影下移
阴影模糊距离可写数值越大阴影模糊
阴影颜色可写默认黑色

可对文本同时设置多个阴影，每个阴影效果之间以逗号分隔开

text-indent

首行缩进，可以使用像素值调整段落文字的首行缩进大小

text-indent:32px; // 首行缩进 32px，默认字体大小 16px 的情况下，将首行缩进两个字

text-stroke

设置文字描边

四.其他常用属性

列表常用属性

 html部分 
<ul>       
  <li>1</li>       
  <li>2</li>       
  <li>3</li>       
  <li>4</li>       
  <li>5</li>       
  <li>5</li>       
  <li>6</li>   
</ul>   
  css部分   
  ul li {    
    list-style-image : url(./03男性角色.png);   
 }

超链接样式属性

a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被单击的链接 */

五.CSS过渡与变换

transition:过渡属性

简写顺序：

property、duration、timing-function、delay

属性介绍：

ease：（逐渐变慢）默认值。
linear：（匀速）。
ease-in：（加速）。
ease-out：（减速）。
ease-in-out：（加速然后减速）。

transform:变化属性

transform定义元素向2D或3D变化

transform-origin改变转换元素位置

transform-origin 设置旋转元素的基点位置，2D 转换元素可以改变元素的 X 轴和 Y 轴

对于 3D 转换元素还可以更改元素的 Z 轴。

属性值：

x-axis，可以使用的值有：left、right、center、**px、百分比
y-axis，可以使用的值有：left、right、center、**px、百分比
z-axis，可以使用的值有：**px

六.CSS动画

@keyframes创建关键帧动画

基础语法：

@keyframes 动画名称{ 阶段 1{CSS 样式} 阶段 2{CSS 样式} 阶段 3{CSS 样式}}

二种写法

每一个阶段用百分比表示
使用from和to表示从某阶段到某阶段

使用animation调用关键帧动画

div{    
 /* 让 div 调用这个关键帧动画，5s 完成所有动画效果*/     animation: 动画名称 5s;
}

属性：

animation 简写属性
animation-name 规定动画名称
animation-duration 规定完成动画的时间
animation-timing-function 规定动画的速度曲线
animation-delay 规定动画何时开始
animation-iteration-count 规定动画播放次数
animation-direction 规定动画算法反向播放
animation-play-state 规定动画算法是否运行
animation-fill-mode 规定对象动画时间之外的状态

七.盒子

content 内容

padding 内边距

border 边框

margin 外边距

标准盒模型

一个元素所占据的总宽度= width + padding（左右）+ border（左右）+ margin（左右）

IE盒模型

一个块元素的总宽度= width + margin（左右）（即 width 已经包含了 padding 和 border）

切换盒模型

设置box-sizing

content-box 采用标准模式，默认
border-box 采用怪异模式

八.盒属性

margin外边距

属性

简写形式的 margin 可以有 1～4 个值。

写一个数值：上、下、左、右四个方向数值相等。

写两个数值：第一个数等于上下外边距，第二个数等于左右外边距。

写三个数值：上、右、下边距，左边默认等于右边。

写四个数值：上、右、下、左 4 个方向的边距。

当设置 margin: 0 auto; 时，代表块级盒子在父容器中水平居中。

多个盒子之间的外边距影响

行内盒子水平排放的外边距

结论：水平排放的盒子，水平间距是 margin 的累加

块级盒子垂直排放的外边距

结论：垂直排放的盒子，垂直间距是合并的(去最大值)

父子盒子的垂直外边距合并

未设置子盒子的上外边距时

设置子盒子的上外边距时

解决方法：

父盒子添加 overflow：hidden
父盒子添加 padding
父盒子添加 border

border边框

属性：

border-style 为元素设置边框的样式
border-width 为元素的边框设置宽度
border-color 设置四条边框的颜色
border 简写，无序

padding内边距

略

overflow内容溢出控制

属性：

Visible（默认值）：内容不会被修剪，会呈现在元素框之外
auto：根据内容多少选择显示滚动条，文字多的时候显示滚动条。
scroll：无论文字多少，都会显示垂直和水平两个滚动条。
hidden：超出区域的文字直接隐藏，无法看到

outline外围线

外围线的属性写法与边框相同

外围线不会占用空间，会盖住周围的文字

box-shadow盒子阴影

属性：

X 轴阴影距离：必写，可正可负，正值右移，负值左移。
Y 轴阴影距离：必写，可正可负，正值下移，负值上移。
阴影模糊半径：可写，只能为正，默认值为 0。数值越大，阴影越模糊。
阴影扩展半径：可写，可正可负，默认值为 0。数值增大，阴影扩大；数值减小，阴影缩小。
阴影颜色：可写，默认为黑色。
内外阴影：可写，可选值：inset（内阴影），不选默认为外阴影。

border-radius边框圆角

八属性值

border-radius: 40px 30px 20px 10px/40px 30px 20px 10px

代码含义：

“/”前后各有四个值，依次对应的是左上角、右上角、右下角、左下角。

而“/”前表示四顶点沿 X 轴移动的距离，“/”后表示四顶点沿 Y 轴移动的距离。

border-image图片边框

图片路径（border-image-source）
图片切片宽度（border-image-slice）
边框宽度（border-image-width）
图片重复方式（border-image-repeat）
简写方式（border-image）

九.浮动

float 属性使元素脱离了常规文档流而表现为向右或向左浮动，由于浮动的元素不在文档流中，所以在文档流中浮动的元素就像不存在一样，其周围的元素也会重新排列。

属性：

left
right
none

clear清楚浮动

对不想浮动的元素使用

浮动只能打破文档流，不能打破文字流，所以文字不会动

属性：

left
right
both

子盒子浮动造成父盒子高度塌陷

解决方法：

在父元素中添加一个新的元素，为新元素设置 clear:both
为父元素添加 overflow: hidden 属性
为父元素添加伪类：after，对伪类设置 clear:both

十.定位

属性：

relative 相对定位
absolute 绝对定位
fixed 固定定位
static 没有定位，默认

以上三种定位方式均使用 top、left、bottom、right 调整位置。

当 left 和 right 同时存在，left 生效；当 top 和 bottom 同时存在，top 生效。

relative相对定位

相对于自己原来在文档流中的位置定位，当不指定 top、left 等定位值时，不会改变元素位置。
相对定位元素仍会占据原有文档流中的位置，而不会释放。

absolute绝对定位

相对于第一个非 static 的祖先元素（即使用了 relative、absolute、fixed 定位的祖先元素）进行定位。
如果所有祖先元素均未定位，则相对于浏览器左上角定位。
使用 absolute 的元素会从文档流中完全删除，原有空间释放不再占据。

fixed固定定位

固定定位是一种特殊的绝对定位，它与普通绝对定位的区别是无论父元素是否定位，子元素如果采用固定定位，都将相对于浏览器左上角定位，且固定在指定位置，不随浏览器滚动条的滚动而滚动。

使用定位实现元素的绝对居中

前提：块级元素

设置父子均为定位元素
对子元素设置

十一.z-index

作用

设置定位元素的层叠顺序

使用要求

必须是定位元素
需要考虑父容器的约束

如果父容器没有设置z-index或者设置为 z-index:auto，则子容器不受约束

如果父容器设置了z-index，则子容器层叠顺序以父容器z-index为准

（此时子元素的z-index只能调整自己与其他子元素之间的层叠顺序）

z-index:auto与z-index:0的异同

z-index:auto与z-index:0处于同一平面

z-index:auto不会约束子元素的层次

z-index相同（处于同一平面的定位元素）的层叠关系

后来者居上，即写在后面的元素在上一层

十二.网页布局

网页布局方式

固定布局
流体布局
弹性布局

响应式的实现方式

响应式布局没有固定的要求，只要能实现计算机站与手机站的不同效果显示，都可以称为响应式网站。

媒体查询
流体布局
弹性布局
通过 JavaScript、JQuery 进行判断来显示不同的布局页面
Bootstrap 等第三方框架。

固定布局概念

固定像素

假定使用1024px*768px分辨率

流体布局概念

固定百分比宽度

弹性布局详细

基本概念

容器与项目

容器（box）：需要添加弹性布局的父元素

项目（item）：弹性布局容器中的每一个子元素，成为项目

主轴与交叉轴

主轴：在弹性布局中，通过属性规定水平或垂直方向为主轴

交叉轴：与主轴垂直的另一方向，称为交叉轴

注意：

给父容器添加 display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式
容器添加弹性布局后，仅仅是容器中的项目采用弹性布局，而容器本身在文档流中的定位方式依然遵循常规文档流
display:flex; 容器添加弹性布局后，显示为块级元素。
display:inline-flex; 容器添加弹性布局后，显示为行级元素。
将父容器设为弹性布局后，子项目的 float、clear 和 vertical-align 属性将失效，但position 属性依然生效。

案例

<body>    
    <div id="box">        
        <div class="item1">1</div>
        <div class="item2">2</div>        
        <div class="item3">3</div>        
        <div class="item4">4</div>            
     </div>
</body>
<style>    
#box{      
  width: 200px;      
  height: 200px;      
  background-color: yellow;      
  display: flex;  
} 
#box div{      
   width: 50px;      
   height: 50px;      
   background-color: blue;      
   color: white;      
   font-size: 20px; 
}

未添加弹性布局将采用常规文档流

添加弹性布局将打破常规文档流，不再按照常规文档流的上下排列，默认成了一行显示

作用于容器的属性

flex-direction主轴方向(项目排列方向)

属性：

row（默认值）主轴为水平，方向从左到右
row-reverse 主轴为水平，方向从右到左
column 主轴为垂直，方向从上到下
column-reverse 主轴为垂直，方向从下到上

flex-wrap控制换行

属性：

nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度。
wrap：换行显示，并且第一行在容器最上方。
wrap-reverse：换行显示，并且第一行在容器最下方。

flex-flow缩写形式

该属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

justify-content主轴对齐

规定项目在主轴线上的对齐方式

flex-start（默认值）：项目位于主轴起点。
flex-end：项目位于主轴终点。
center：居中。
space-between：两端对齐，项目之间的间隔都相等（开头和最后的项目，与父容器边缘没有间隔）。
space-around：每个项目两侧的间隔相等。同时项目之间的间隔比项目与边框的间隔大一倍（开头和最后的项目，与父容器边缘有一定的间隔）

align-itmes交叉轴单行对齐

属性：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
baseline：根据项目的第一行文字的基线对齐（文字的行高、字体大小会影响每行的基线）。
stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度。

align-content交叉轴多行对齐

该属性规定每一行或每一列在另一方向上的对齐方式，即主轴在交叉轴的对齐方式。只有一行或一列时，该属性无效

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度（占满整个交叉轴）。

作用于项目的属性

order项目排序

该属性规定项目的排列顺序，使用整数设置，数值越小越靠前，可以为负值。

未设置的项目默认为0

flex-grow项目放大比

该属性规定项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

第一个子项目设置flex-grow：1，其他为0，则第一个子项目占据剩余空间

flex-shrink项目缩小比

属性规定项目的缩小比例，默认为 1，即父容器宽度不足，子项目将缩小

第一个子项目设置flex-shrink：0，其他为2，则第一个子项目不被压缩，其他子项目压缩更严重

flex-basis伸缩基准值

如果主轴为水平，则设置这个属性后，相当于设置了项目的宽度，原宽度将失效。

flex缩写形式

该属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 flex:0 1 auto。

后两个属性可选，除默认值外，还有 none（0 0 auto）和 auto（1 1 auto）两个快捷设置值。

align-self自身对齐

属性定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的 align-items 属性

补选择器大全

.class	.intro	选择 class="intro" 的所有元素。
.class1 , .class2	.name1 , .name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
#id	#firstname	选择 id="firstname" 的元素。
*	*	选择所有元素。
element	p	选择所有元素。
element.class	p.intro	选择 class="intro" 的所有元素。
element,element	div, p	选择所有元素和所有元素。
element element	div p	选择元素内的所有元素。
element>element	div > p	选择父元素是的所有元素。
element+element	div + p	选择紧跟元素的首个元素。
element1~element2	p ~ ul	选择前面有元素的每个元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]	a[href^="https"]	选择其 src 属性值以 "https" 开头的每个元素。
[attribute$=value]	a[href$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。
[attribute*=value]	a[href*="w3schools"]	选择其 href 属性值中包含 "abc" 子串的每个元素。
:active	a:active	选择活动链接。
::after	p::after	在每个的内容之后插入内容。
::before	p::before	在每个的内容之前插入内容。
:checked	input:checked	选择每个被选中的元素。
:default	input:default	选择默认的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 "it"（意大利）的每个元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not(p)	选择非元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:optional	input:optional	选择不带 "required" 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 "placeholder" 属性的 input 元素。
:read-only	input:read-only	选择已规定 "readonly" 属性的 input 元素。
:read-write	input:read-write	选择未规定 "readonly" 属性的 input 元素。
:required	input:required	选择已规定 "required" 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。