CSS基础

发表 | 更新 | 分类 ， | 评论： | 热度：
本文字数： 12k | 阅读时长 ≈ 11 分钟

那时的CSS

这是在18年年初的时候记录的，当时完全小白（现在也很菜），通过看书、看视频，做了这些笔记，怎么说呢，这些内容非常非常的基础，前端发展的太快，这些内容可能已经有些陈旧了，而且自己可能以后也不会回顾的很多次，但不管怎样，都是自己入门记的东西，以后看起来可能会更有趣吧。

特殊内容

li去掉前面的点 

1
2
3
ul {
  list-style: none;
}

清除内外边距

1
2
3
4
* {
  padding: 0;
  margin: 0;
}

无边框

1
2
3
input {
  border: 0 none;
}

一般符号字体 ：arial

ctrl+g在sublime中可以快速换行

current 当前选中的

transparent全透明黑色=rgba（0，0，0，0）

HTML

属性 用法 含义
placeholder 占位符，当用户输入的时候，里面的字符消失
autofocus 当页面加载时，该元素自动获得焦点
multiple 多文件上传
autocomplete 表单是否启用自动完成功能，一个on表示开启，一个off表示关闭，必须要有提交按钮，必须要给他名字
require 必须要有值
accesskey 快速获得光标，alt+s

网页视频格式 ogg mp4 webm

CSS

font： 综合设置字体样式

选择器{ font : font-style（italic斜体 normal） font-weight font -size/line-height font-family;}

顺序不能更改，不需要设置的属性可以省略（取默认值）但必须保留font-size和font-family

*{ }表示通配符选择器

伪类选择器

链接伪类选择器

：link 未访问的链接

：visited 已访问的链接

：hover 鼠标移到连接上

：active 选定的链接 ,点击不放鼠标

lvha的顺序

结构伪类选择器

：first-child

：last-child

：nth-child（n) even 偶数，odd 奇数

：nth-last-child(n)

目标选择器

：target 谁被选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*text-indent ：首行缩进*/
p {
	text-indent : 2em;
}
/*字间距*/
div {
  letter-spacing : 2px;
}
/*单词间距， 中文无效*/
p {
  word-spacing : 10px;
}
/*文字阴影 四个参数 水平距离，垂直距离，模糊距离 ，半透明,前两个参数必须写*/
p {
  text-shadow : 1px 2px 3px rgba(0,0,0,0.5);
}
/*常用颜色*/
#3c3c3c

文字阴影

text-shadow: 水平位置，垂直位置，模糊距离，阴影颜色；前两项鼻血，后两项选写。可以多次添加

1px 1px 1px #000, -1px, -1px 1px #fff;

居中

行高等于盒子高，垂直居中

text-align: center; 水平居中

引入CSS样式表

内部样式表

卸载html文档的head头部标签中，并且用style标签定义

行内式（内联样式）

<标签名 style = “属性1: 属性值1”>

外部样式表

通过link标签链接到html文档中



​

标签显示模式

块级元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对其等属性，常用于网页布局和网页结构的搭建

【<h1> - <h6>、<p>、<div>、<ul>、<ol>、<li>、其中<div>时最典型的块元素】

1、总是从新行开始

2、高度、行高、外边距以及内边距都可以控制

3、宽度默认是容器的100%

4、可以容纳内联元素和其他块元素

行内元素

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式

【<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>.<span>最典型】

1、和相邻行内元素在同一行上

2、高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效

3、默认宽度就是本身内容的宽度

4、行内元素只能容纳文本或者其他行内元素

行内块元素（inline-block）
在行内元素中有几个特殊的标签——【<img/> <input /> <td>】可是对他们设置宽高和对齐属性，有些资料称他们为行内块元素

特点：

1、和相邻行内元素（行内块）在同一行上，但是之间会有空白缝隙

2、默认宽度就是它本身内容的宽度

3、宽度，行高、外边距以及内边距都可以控制。

标签显示模式转换

display: inline/block

CSS复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间布恩那个由空格，如h3.special

并集选择器

并集选择器是各个选择器通过逗号连接而成，任何形式的选择器（包括标签选择器、class类选择器id选择器等，都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同，或部分相同，则可以利用并集选择器为他们定义相同的样式

.class,

h3,

id {}

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，写法就是把外层标签写在前面，内层标签卸载后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代

.class h3（包括所有的后代）

子元素选择器

子元素选择器只能选择作为某元素子元素的元素，写法就是把父级标签写在前面，子级标签写在后面，中间用一个 > 进行连接，符号左右各留一空格

.demo > h3（只指向亲儿子)

属性选择器

a[title]

input[type = text] input[type ^= text]开始位置 input[type $= text]结束位置 input[type *=text]任意位置

伪元素选择器

E::first-letter 文本中的第一个单词或字

E::first-line 文本第一行

E::selection 可改变选中文本的样式

E::before 在E元素内部内容开始位置创建一个元素，为行内元素，并且必须结合content属性使用

E::after 在E元素内部内容后面位置创建一个元素。

背景

背景平铺

background-repeat: repeat-x/ repeat-y /no-repeat /

背景位置

background-position:

length: 百分数、有浮点数字和单位标识符组成的长度值

position: top\center\bottom\left\center\right

背景附着

background-attachment:

scroll: 背景图像时随对象内容滚动

fixed: 背景图像固定

背景简写

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景缩放

background-size设置背景图片的尺寸

1、可以设置长度单位或者百分比

2、设置为cover时，会自动调整比例，保证图片始终填充满背景区域，如有一处部分则隐藏

3、设置为contain会自动调整缩放比例，保证图片始终在背景区域中

文本的修饰

text-decoration 通常用于给连接修改装饰效果

none: 默认 ，定义标准的文本

underline: 定义文本下的一条线

overline: 定义文本上的一条线

line-through: 定义穿过文本的一条线

CSS三大特性

CSS层叠性

一个属性通过相同选择器设置同一个元素时，一个属性会将另一个属性覆盖掉，按照书写顺序来

CSS继承性

子标签会继承父标签的某些样式

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

CSS优先级

CSS特殊性（Specificity）

继承或者* 的贡献值 0，0，0，0
每个元素（标签）贡献值为 0，0，0，1
每个类，伪类贡献值为 0，0，1，0
每个ID贡献值为 0，1，0，0
每个行内样式贡献值 1，0，0，0
每个！important贡献值 无穷大

注意：

1、数为之间没有进制

2、继承的权重时0

总结优先级

1、使用了！important声明的规则

2、内嵌在HTML元素的style属性里面的声明

3、使用了ID选择器的个规则

4、使用了类选择器、属性选择器、伪元素选择器和伪类选择器

5、使用了元素选择器

6、只包含一个通用选择器的规则

7、同一类选择器遵循就近原则

权重是优先级的算法，层叠是优先级的表现

盒子

边框

border ：border-width || border-style || border-color

边框样式用于定义一面中边框的风格，常用属性：

none：没有边框（默认）

solid：单实线

dashed：虚线

dotted：点线

double：双实线

border-collapse: collapse 表示边框合并在一起

border-radius: 左上， 右上，右下，左下

padding
值的个数 表达意思
1个值 padding：3px 上下左右都是3px
2个值 padding： 3px 4px 上下3px 左右4px
3个值 padding：3px 4px 5px 上3 左右4px 下5px
4个值 padding： 上右下左
margin

外边距实现盒子居中对齐

可以让一个盒子实现水平居中，需要满足两个条件

1、必须是块级元素

2、盒子必须是定宽度

然后给左右的外边距都设置为auto，就可以使块级元素水平居中

.header { width : 960px; margin: 0 auto;}

清除内外边距

*{

margin: 0;

padding: 0;

}

行内元素，只有左右外边距，没有上下。

外边距合并，垂直方向，取大的值（相邻块元素垂直外边距的合并也称外边距坍塌）

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

解决方案：

1、可以为父元素定义1像素的上边框或者上内边距

2、可以将父元素添加overflow: hidden；

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）

2、计算盒子模型的总高度是，还应考虑上下两个盒子垂直外边距合并的情况

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小

CSS3盒模型

CSS3中可以通过box-sizing来制定盒模型，即可制定为content-box、border-box，这样我们计算盒子大小的方式就发生改变了

1、box-sizing: content-box 盒子大小为width+padding+border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为width 就是说padding 和border是包含到width里面的

盒子阴影

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

1、前两个是必须写的，其余可省略

2、外阴影（outset）不能写，默认，想要内阴影 inset

浮动（float）

CSS的定位机制有3种：普通流（标准流）或者叫文档流、浮动和定位

浮动详细：

浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动

浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父元素对其，但不会超出内边距的范围。

一个父盒子里面的子盒子，如果其中一个子级有浮动，则其他子级都需要浮动，这样才能一行对其显示。

元素添加浮动后，元素会具有行内块元素的特性，元素的大小完全取决于定义的大小或者默认的内容多少。

浮动根据元素书写的位置来显示相应的浮动。

版心和布局流程

版心（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度指为960px、980px、1000px、1200px。

布局流程

1、确定页面的版心（可视区）

2、分析页面中的行模块，以及每个行模块中的列模块

3、制作html结构

4、CSS初始化，然后开始运用盒子模型的原理，动过div+CSS布局来控制网页的各个模块

清除浮动

额外标签法
在浮动元素末尾添加一个空的标签<div style = "clear: both"></div>，或者其他标签br等亦可。

优点：通俗易懂，书写方便；缺点：添加无意义的标签，结构化差

父级添加overflow属性方法

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

优点：代码简洁；缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

after伪元素清除浮动

.clearfix: after {
content: “.”;/内容为小店，尽量加不要空/
display: block;/转换为块级元素/
height: 0;/高度为0/
visibility: hidden;/隐藏盒子/
clear: both; /清除浮动/
}

.clearfix {
*zoom: 1;
} IE6、7专有

双伪元素清除浮动

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

定位（position）

子绝父相

定位模式

边偏移+定位属性

在CSS中，用position属性来定义元素的定位模式

语法： 选择器{position: 属性值；}

position属性的常用值

值 描述
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位
静态定位（static）

静态定位是所有元素的默认定位方式。

静态定位对于边偏移无效，一般用来清除定位。

相对定位（relative）

1、相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占位置，继续占有

2、每次移动的位置，是以子级的左上角为基点移动的（相对于自己来移动位置）

相对定位的盒子仍在标准六种，他后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是让多个块级元素一行显示 ，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

绝对定位（absolute）

绝对定位最重要的一点是，它可以通过便宜移动位置，但是它完全脱标，不占位置

当父元素没有定位时，以浏览器为基准对齐；

就对定位时将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位

绝对定位的盒子水平/垂直居中

普通盒子将左右margin改为auto即可，但是对于绝对定位无效

它要居中，则需要

1、首先left: 50%；

2、自己走外边距负一半的值

固定定位（fixed）

固定定位的盒子一定要写宽和高，除非有内容撑开

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置，不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置

固定定位有两点

1、固定定位的元素跟父亲没有任何关系，只认浏览器

2、固定定位完全脱标，不占有位置，不随着滚动条滚动

叠放次序（z-index）

1、z-index的默认属性值时0，取值越大，定位元素在层叠元素中越居上

2、如果取值相同，则更具书写顺序，后来居上

3、后面数字一定不能加单位

4、只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位，都无此属性，也不可以指定该属性

定位总结
定位模式 是否脱标占有位置 是否可以边偏移 移动位置基准
静态static 不脱标，正常模式 不可以 正常模式
相对定位relative 不脱标，占有位置 可以 相对自身位置偏移
绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动
固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置
定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块元素，因此比如行内元素如果添加了绝对定位或者固定定位，可以不用转换模式，直接给高度宽度就可以了。

元素的显示与隐藏

display显示

display设置或检索对象是否及如何显示

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

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

visibility可见性

设置或检索是否显示对象

visible：对象可视

hidden：对象隐藏

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

overflow溢出

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

visible： 不见且内容也不添加滚动条

auto：超出自动显示滚动条，不超出不显示滚动条

hidden：不现实超过对象的内容，超出的部分隐藏掉。溢出隐藏

scroll：不管内容，总是显示滚动条

CSS高级

CSS用户界面样式

更改用户操作样式，例如更改用户的鼠标样式，表单轮廓等等

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

cursor: default | pointer 手 | move 移动 | text 文本

轮廓outline

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

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

最直接的写法 outline:0;取消轮廓线，一般都这样做

1
<input type = "text"  style= "outline: 0;"/>
防止拖拽文本域resize

resize: none 可以防止火狐 谷歌等浏览器随意的拖动文本域

右下角不可以拖拽

1
<textarea style= "resize: none;"></textarea>
vertical-align垂直对齐
1
vetrical-align: baseline | top |middle | bottom

vertical-align 不影响块级元素中的内容对齐，它执政对于行内元素或者行内块元素，通常用来控制图片和表单与文字的对齐

图片和文字默认基线对齐，通过vertical-align可以控制图片和文字的垂直关系

去除图片底侧空白缝隙

图片或者表单等行内块元素，它的底线和父级盒子的极限对齐，这样会造成一个问题，图片底侧会有一个空白缝隙。

解决方式：

1、display: block；转换为块级元素，就不会有问题了

2、设置vertical-align: middle | top.让图片不要和基线对齐，图片设置为vertical-align: top;最常用。

溢出的文字隐藏

word-break: 自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。允许单词拆开显示

keep-all 只能在半角空格或连字符处换行。不允许拆开单词显示，连字符除（-）外。

主要处理英文单词

white-space

white-space设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容

normal： 默认处理方式

nowrap: 强制在同一行内显示所有文本，知道文本结束或者遭遇
标签对象才换行。

text-overflow

设置或检索是否使用一个省略（…)标示对象内文本的溢出

clip: 不显示省略标记（…)，而是简单的裁切

ellipsis: 当对象内文本溢出时显示省略标记（…)

一定要首先强制一行内显示（white-space: nowrap)，再次和overflow属性 搭配使用

1
2
3
4
5
div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS精灵技术（sprite）

精灵技术本质

CSS精灵时一种处理网页背景图像的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面是，只需向服务器发送一次请求，网页中的背景图像就可以全部显示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

精灵技术的使用

在一张大图中，使用background-position属性进行精准的定位

制作精灵图

精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放

精灵图片的宽度取决于最宽的那个背景

可以横向摆放，也可以纵向摆放，但每个图之间，间隔至少隔开偶数像素合适。

在精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图

字体图标（icon font）

1、UI人员设计字体图标效果图（svg）

2、前端人员上传生成兼容性字体文件包

3、前端人员下载兼容字体文件包到本地

4、把字体文件包引入到html页面中

网站: http://icomoon.io

阿里：http:www.iconfont.cn/

fontello: http://fontello.com/

Font-Awesome：http://fortawesome.github.io/Font-Awesome/

字体引入html

第一、声明字体

1
2
3
4
@font-face {
  font-family: 'icommon';
  ....兼容性
}

兼容性和路径

第二、给盒子使用字体

1
2
3
span {
  font-family: "icomoon";
}

第三、盒子里面添加结构

1
2
3
4
5
span::before {
  content: "\e900";
}
或者
<span>复制过来<span>
滑动门

利用CSS精灵（背景位置）和黑子padding撑开宽度，以便适应不同字数的导航栏

1
2
3
4
5
<li>
	<a href = "#"
		<span>导航栏内容</span>
	</a>
</li>

1、a设置背景左侧，padding撑开合适宽度

2、span设置背景右侧，padding撑开合适宽度，剩下由文字继续撑开宽度

3、之所以a包含span是因为整个导航都是可以点击的

before和after伪元素

类选择器、伪类选择器是选取对象

伪元素选择器本质上是插入一个元素（盒子）

之所以被称为伪元素，因为不是真正的页面元素，html中没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用注入页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是CSS样式展现的行为。

伪元素:before和:after添加的内容默认是inline元素，这两个伪元素的content属性，表示伪元素的内容。且必须设置content属性，否则伪元素不起作用

伪元素不占位置

过渡(CSS3)

要写到DIV中

在CSS3中使用transition可以实现补间动画（过滤效果），并且当前元素只要有“属性”发生变化时即存在两种状态（用A和B代指），就可以实现平滑的过度

语法格式：

1
2
transition: 要过度的属性  花费时间 运动曲线  何时开始；
如果有多组属性变化，还是用逗号隔开。
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过度属性
transition-property 规定应用过度的CSS属性的名称
transition-duration 定义过度效果花费的时间，默认时0（单位时秒 s 必须写）前两个属性必写
transition-timing-function 规定过度效果的时间曲线。默认时“ease”
transition-delay 规定过度效果何时开始，默认时0 3

想要所有属性都变化，写ALL就可以。

运动曲线

匀速 逐渐慢下来 加速 减速 先加速后减速
linear ease（默认） ease-in ease-out ease-in-out
2D变形（CSS3）transform

可以实现元素的唯一、旋转、倾斜、缩放，升值支持矩阵方式，配合过渡和动画，可以取代大量之前只能靠flash才可以实现的效果

平移
1
transform: translate(50px, 50px); 移动

translateX() 只移动X轴

translateY()只移动Y轴

translate加百分数，不是以父级为准，而是以自己为准

用translate让定位的盒子居中

1
2
3
4
5
6
7
8
9
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
缩放

scale(x,y)

可以对元素进行水平和垂直方向的缩放。scale()默认取值为1，当值小于1（0.01-0.99）时缩小，大于1（>=1.01）时，放大。只写一个参数则一起缩放。

scaleX() 仅x轴

scaleY()仅Y轴

旋转rotate （deg）
1
transform:rotate(45deg)；

deg表示读书，正值顺时针，负值逆时针

transform-origin可以调整元素转换变形的原点

如果时4个角可以用left top这些，如果想要精确的位置们可以用 px 像素。

1
div{transform-origin: 10px 10px; transform: rotate(45deg);}
倾斜skew（deg,deg)
1
transform: skew(30deg,0deg);

第一个水平倾斜，第二个垂直倾斜，正值向左，向上

3D变形（CSS3)

x左边时负的，右边时正的

y上面时负的，下面时正的

z里面时负的，外面时正的

transform: rotateX(180deg);

透视perspective

眼睛到屏幕的距离，视距越小，效果越明显500px

透视原理：近大远小

浏览器透视：把近大远小的所有图像，透视在屏幕上

perspective：视距，表示试点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。

perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

3d转换简写
1
transform: translate3d(x,y,z);

x和y可以是px，可以是%，z只能是px

backface-visibility

定义当元素不面向屏幕时是否可见

backface-visibility: hidden;

动画（CSS3)animation

动画时CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

1
animation: 动画名称 动画时间 动画曲线 何时开始 播放次数 是否反方向

animation-iteration-count: infinite;无限循环次数

animation-direction: alternate 正反交替/ reverse 反方向

animation-play-state: paused 停止

一般只用前面2个属性

如果有多组变形，都属于transform 那用空格隔开

伸缩布局（CSS3)

display: flex;

flex-direction:column; 排列方式 row水平，column 列 （给父盒子添加）

参考阮一峰老师博客

------------- 感谢阅读-------------