CSS易忘知识点

选择器

标签选择器：直接写标签名，选中页面里面所有该标签名，包括选中标签里面的标签
id选择器：只能被声明一次，就是我这个div的id叫red，那只能有这个div的id为red
通配符选择器：

字体属性

font-family设置自己系列，比如宋体，微软雅黑
，可以一次性设置多个字体，用逗号隔开
font-size设置字体大小，h标题的大小特殊需要单独设置
font-weigh设置字体粗细，数值不要跟单位，400是正常粗细
font-style设置文字斜体和正常(italic)
font是复合属性
font-size和font-family是必须保留的

文本属性

color设置文本颜色
text-align设置文本对齐，左中右，注意是盒子内的元素在盒子内的对齐方式
text-decoration添加文本修饰，下划线删除线上划线等，可以用于设置去掉a链接下面的下划线
text-indent首行缩进，每个段落首行缩进多少个像素，一般可以写2em，em是相对当前元素的多少倍(也就是这个段落的字体大小)
line-height,文字大小加上上间距和下间距

样式表

行内样式老是忘记怎么写

vscode快捷

快捷生成父子，ul>li
快捷生成兄弟，div+p

复合选择器

后代选择器
ul li
只要是后代li都会被选择到，无论父子还是更深层次
子选择器
ul>li
只有子代li才会被选择到
并集选择器
div,span
改变所有div和span的样式
伪类选择器
链接伪类
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上链接
a:active 选择所有鼠标按下未弹起
input:focus伪类选择器
选择获得焦点的表单元素、

元素显示模式

块级元素

<h1><h6> <p><div><ul><ol><li>

这些属于块级元素
特点：

1. 独占一行
2. 高宽，内外边距都可以设置
3. 宽度默认100%
4. 是一个容器及盒子，里面可以放行内元素或块级元素
   注意：p、h1-h6里面一般不放块级元素

行内元素

<a><strong><b><em><i><del><s><ins><u><span>

这些属于行内元素
特点：

1. 相邻元素在一行上，一行显示多个
2. 高宽设置无效，可以设置水平方向内外边距，垂直方向上的无效
3. 默认宽度是其内容宽度
4. 行内元素只能容纳文字或者其他行内元素
   注意：a里面不能放a，但是a可以放块级元素

行内块元素

<img/><input/><td>

这些属于行内块元素
特点：

1. 相邻元素一行显示但是之间会有空隙
2. 宽度是内容宽度
3. 宽高，内外边距都可以设置

显示模式转换
display:block转化为块级元素
display:inline转化为行内元素
display:inline-block转化为行内块元素

背景

background-color背景颜色,背景颜色在最底层
background-image：url()背景图片地址
background-repaeat：repeat|no-repeat|repeat-x|repeat-y，背景图片平铺，默认平铺
background-position：x y背景图片位置,只写一个方位名词，另一个默认center，精确单位就是坐标，只写一个数值另一个居中，方位名词和数值也可以混着用

background-attachment：scroll | fixed背景图像固定
背景复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
顺序没要求，但是默认这样
背景颜色半透明rgba(0,0,0,0.3)最后一个跟的是透明度

CSS三大特性

层叠性
继承性
继承text-,font-,line-以及color，行高不跟单位就是倍数的关系（当前标签文字大小的倍数）
优先级
选择器权重(权重会叠加，但是不会进位)

a链接浏览器默认指定样式，蓝色的有下划线

盒子模型

盒子就是内容，内边距，边框，外边距组成
border：宽度 样式 颜色 ，也可以单独设置上下左右边框
border-collapse:collapse表示相邻边框合并在一起
盒子模型里的边框，padding会增加盒子的大小，如果盒子没有指定width/height,此时padding不会撑开盒子

外边距可以让盒子居中对齐，但是盒子必须有宽度然后将左右外边距设置为auto，如果要让行内元素和行内块元素居中对齐，就把他们当作文字看待，给他们的块级父元素设置text-aligin:center

对于两个嵌套关系的块元素，如果父子元素上都有外边距，那么父元素会塌陷较大的外边距值
解决方案：给父元素一个上边框或者一个上内边距或者overflow:hidden

不同的网页元素会带有不同的内外边距，解决

* { padding:0;matgin:0;}

li去掉前面小点

list-style:none