今天复习了css的基础知识，整理了一下
css基础复习
核心概念和知识点
语法：
css的核心功能是将css属性设定为特定的值，一个属性与值的键值对，被称为声明，如果有多个声明要用{}包裹起来。
使用{}包裹起来想后要效果生效，要使用css选择选择器将其与HTML元素绑定，选择器和声明块组成了css规则集（css ruleset）
css注释
/* 单行注释 */
/*
多行
注释
*/
@规则
css规则是样式表的主体，通常样式表会包括大量的规则列表。但是有时候也需要在样式表中包括有一些其他信息，比如字符集，导入其他外部样式表，字体等，这些语法需要用专门的语句表示。
而@规则就是这样的
-
@namespace 告诉css引擎必须考虑XML命名空间。
-
@media 媒体查询，如果满足媒体查询的条件则条件规矩组里的规则生效。
-
@page 描述打印文档时布局的变化
-
@keyframes 描述css动画的关键帧
-
@document 如果文档样式满足给定条件则条件组里的规则生效
-
@charset 定义样式表使用的字符集，他必须是样式表中的第一个元素，不能用在HTML页面中的style中
-
@import 用于在css代码块中，从外部导入一个css样式
link 和@import 都能导入一个样式文件，他们有什么区别吗？
- link是HTML标签，除了可以引入css样式外还可以引入其他资源，而@import只是一个css中的语法，只能导入css
- link引入的样式会在页面加载时同时加载，而@import导入的样式需要等到页面加载完成后在加载
- link是HTML标签没有兼容性问题，@import不兼容iE5以下
- link 可以通过js操作DOM 动态引入样式，改变样式，而@import不能
-
@support 用于查询特定的css是否生效，可以结合not，and，or操作符进行后续的操作
层叠性
层叠样式表，其实就是css中的核心特性之一，用于合并来自多个源的属性值的算法。比如说某个HTML 标签，有许多的css样式对他都能作用到，那最后应该谁起作用。那么这就会有选择器优先级以及继承性来处理了。
选择器
基础选择器
- 标签选择器
- 类选择器
- ID选择器
- 通配符选择器
属性选择器
- [attribute] : 拥有指定属性的元素
- [attribute = value]：拥有指定属性并且属性值 为value
- [attribute *= value]：拥有指定属性并且属性值 包含 value
- [attribute ^= value]：拥有指定属性并且属性值开头为value
- [attribute $= value]：拥有指定属性并且属性值结尾为value
- [attribute ~= value]：（不推荐使用）
- [attribute |= value]：（不推荐使用）
组合选择器
- 相邻兄弟选择器: A + B
- 普通兄弟选择器: A ~ B
- 子选择器: A > B
- 后代选择器: A B (空格)
伪类
条件伪类
:lang()：基于元素语言来匹配页面元素；:dir()：匹配特定文字书写方向的元素；:has()：匹配包含指定元素的元素；:is()：匹配指定选择器列表里的元素；:not()：用来匹配不符合一组选择器的元素；
行为伪类
- :active : 鼠标单击的元素
- :hover : 鼠标悬浮的元素
- ::selection : 鼠标选中的元素
状态伪类
- :target : 当前锚点，的元素
- :link
- :visited
- :focus: 获取焦点的，表单元素
- :required : 输入必填的，表单元素
- :valid : 输入合法的，表单元素
- :invalid : 输入非法的，表单元素
- :in-range : 输入范围以内的表单元素
- out-of-range : 输入范围以外的，表单元素
- :checked : 选项中选中的表单元素
- :optional ：选项可选的表单元素
- :enaled : 事件启用的表单元素
- :disabled : 事件禁用的表单元素
- :read-only：只读的表单元素
- :read-write ：可读可写的表单元素
- :blank : 输入为空的表单元素
- :current : 浏览中的元素
- :past : 已经浏览的元素
- :future : 未浏览的元素
结构伪类
:root：文档的根元素；
:empty：无子元素的元素；
:first-letter：元素的首字母；
:first-line：元素的首行；
:nth-child(n)：元素中指定顺序索引的元素；
:nth-last-child(n)：元素中指定逆序索引的元素；；
:first-child：元素中为首的元素；
:last-child ：元素中为尾的元素；
:only-child：父元素仅有该元素的元素；
:nth-of-type(n)：标签中指定顺序索引的标签；
:nth-last-of-type(n)：标签中指定逆序索引的标签；
:first-of-type ：标签中为首的标签；
:last-of-type：标签中为尾标签；
:only-of-type：父元素仅有该标签的标签；
伪元素
- ::before : 在元素前插入内容
- ::after ：在元素后插入内容
选择器的优先级
行内样式（1000）> ID 选择器（100）> class 选择器（10）> 元素选择器（1）
优先级就是分配给css声明的权重，权重越高，则不会被权重低的所覆盖，相反，权重低的，会被权重高的所覆盖，如果权重不高又想覆盖其样式，可以使用 !important 将其优先级提升至最高
权重等级划分：
- 10000 ：!important
- 01000 ：内联样式又称为行内样式
- 00100 ：ID选择器
- 00010 ：类选择器，伪类选择器，属性选择器
- 00001：元素选择器，伪元素选择器
- 00000 ：通配符选择器，兄弟选择器，后代选择器
css可继承属性
-
字体相关：
font-family、font-style、font-size、font-weight
-
文本相关：
text-align、text-indent、text-decoration、text-shadow、letter-spacing、
word-spacing、white-space 、 line-height、color
-
列表相关：
list-style、list-style-type、list-style-position、list-style-image
-
其他属性: visibility、cursor
文档流
在 CSS 的世界中，会把内容按照从左到右、从上到下的顺序进行排列显示。正常情况下会把页面分割成一行一行的显示，而每行又可能由多列组成，所以从视觉上看起来就是从上到下从左到右，而这就是 CSS 中的流式布局，又叫文档流。文档流就像水一样，能够自适应所在的容器，一般它有如下几个特性：
- 块级元素默认会占满整行，所以多个块级盒子之间是从上到下排列的；
- 内联元素默认会在一行里一列一列的排布，当一行放不下的时候，会自动切换到下一行继续按照列排布；
盒模型
在css中任何元素都可以看成是一个盒子，而一个盒子是由4部分组成的：内容（content）、内边框（padding）、边框（border）、外边距（margin）
盒模型有两种
-
标准盒模型
内容（设置的宽和高）+ 内边距 + 边框 = 盒子的实际尺寸
-
IE盒模型
内容 + 内边距 + 边框 = 设置的宽高 = 盒子的实际尺寸
媒体查询
媒体查询是针对不同的设备、特定的设备特征或者参数进行定制化的修改网站的样式。
1、可以通过link标签加上media属性来定义
<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />
支持的设备：
- all 所有设备
- print 适用于打印预览模式下，在屏幕上查看的分页材料和文档
- screen 主要用于屏幕
- speech 主要用于声音合成器
2、可以使用@media 让css 样式在规定条件下生效，响应式页面就是使用@media才能让一个页面同时适配于 PC、Pad、和 手机端
媒体查询支持的逻辑操作符：
- and ：查询条件都满足的时候才能生效
- not ：查询条件取反
- only ： 整个查询匹配的时候才生效，常用语兼容旧浏览器，使用时候必须指定媒体类型
- 逗号或者是or ：查询条件满足一条即可匹配
清除浏览器默认样式
reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
css什么是浮动，为什么要清除浮动，如何清除浮动
-
css浮动
一个元素设置float属性值不为none的时候，元素会脱离标准文档流，产生浮动效果
float属性值：
1)right：向右浮动
2)left：向左浮动
3)none：没有浮动
4)inherit：规定继承父元素的浮动
-
为什么要清除浮动
元素浮动后会脱离标准文档流，若其父元素的高度是该元素所撑起来的，没有设置指定的宽和高，那么父元素的高度就塌陷了，其他元素就会顶上来，影响页面效果。
-
如何清除浮动
-
clear:both;清除浮动
最原始的清除浮动的方式，兼容性好，在浮动元素的下面加一个空盒子设置他的style:clear:both;
<style> .clear{ clear:both; } li{ float:left; } </style> <body> <ul> <li></li> <li></li> <li></li> <div class="clear"></div> </ul> </body> -
overflow:hidden;
给浮动元素的父元素加overflow:hidden;属性
<style> ul{ overflow:hidden; } li{ float:left; } </style> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> -
使用伪元素清除浮动（推荐）
<style> ul:after{ content:''; display:'block'; clear:both; } li{ float:left; } </style> <body> <ul> <li></li> <li></li> <li></li> </ul> </body>
-
1821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
