前端必须掌握的css知识点大全（全）
一、CSS是什么？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化二、使用步骤
1.选择器
标签选择器
语法：标签名：{}
id选择器
语法：#id{}
css类选择器
语法：.class属性值{}
选择器分组(并集选择器)
作用： 通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
语法：*{}
交集选择器（复合选择器）
作用：可以选择同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
注意：因为id可以唯一确定一个元素，因此不要对id使用交集选择器
后代元素选择器
语法：祖先元素 后代元素{}
子元素选择器(IE6及以下的浏览器不支持)
语法：父元素>子元素
伪类选择器
伪类选择器用来表示元素的一种特殊的状态。
正常链接：a:link
访问过的链接：a:visited(只能定义颜色)
鼠标滑过的连接：a:hover
正在点击的链接：a:active
:focus 获取焦点
:before 指定元素前
:after 指定元素后
:selection 选中的元素(火狐中应该这样用::-moz-selection)
伪元素选择器
::first-letter : 第一个字符
::fist-line : 第一行字符
::before : 表示元素最前边的部分
属性选择器
语法：
[属性名] 选取具有指定属性的元素
[属性名=属性值 ]选取含有指定属性值的元素
[属性名^=属性值]选取属性值以指定内容开头的元素
[属性名$=属性值]选取属性值以指定内容结尾的元素
[属性值*=属性值]选取属性值包含指定内容的元素
相邻兄弟选择器
语法：前一个+后一个
2.CSS 创建
外部样式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表(Internal style sheet)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式(Inline style)
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
3.CSS 背景
背景颜色
background-color 属性定义了元素的背景颜色.
body {background-color:#b0c4de;}
背景图像
background-image 属性描述了元素的背景图像.
body {background-image:url('bgdesert.jpg');}
背景图像 - 水平或垂直平铺
background-image:url('gradient2.png');
background-repeat:repeat-x; // 水平方向平铺 (repeat-x)
背景图像- 设置定位与不平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景- 简写属性
body {background:#ffffff url('img_tree.png') no-repeat right top;}
4.CSS 文本格式
文本颜色
颜色属性被用来设置文字的颜色。
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration 属性用来设置或删除文本的装饰
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}
5.CSS 字体
通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
Serif字体中字符在行的末端拥有额外的装饰
"Sans"是指无 - 这些字体在末端没有额外的装饰
p{font-family:"Times New Roman", Times, serif;}
6.CSS 列表
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
ul
{
list-style: square url("sqpurple.gif");
}
7.CSS 表格
<td colspan="2"></td>//
<td rowspan="3"></td>//
8.CSS 盒子模型
链接: https://editor.csdn.net/md/?articleId=108336817.
9.CSS Display(显示) 与 Visibility（可见性）和opcaity: 0
事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0元素上面绑定的事件是可以触发的。
过渡动画
transition对于display肯定是无效的
transition对于visibility也是无效的；
transition对于opacity是有效
隐藏元素 - display:none或visibility:hidden
块级元素(block)特性 ：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性 ：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有 ：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个 ：
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
=====================================
华丽分割线
对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
然而，visibility 还可能取值为 collapse 。
当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。
在不同浏览器下，对 visibility: collapse 的处理方式不同：
1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。
10.CSS Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
static 定位
静态定位的元素不会受到 top, bottom, left, right影响。
relative 定位
相对定位元素的定位是相对其正常位置。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
11.CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
overflow: visible
overflow 的值为 visible， 意思是内容溢出元素框
12.CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
清除浮动 - 使用 clear
clear 属性指定元素两侧不能出现浮动元素
clear:both;
13.设置字体间距
所有的浏览器都支持letter-spacing属性。
letter-spacing: 1px;
3227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
