CSS相关知识点整理

CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明,每条声明由一个属性和一个值组成。
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select

CSS 选择器

示例	描述
div p	选择div元素内部的所有p元素
子元素选择 div>p	选择父元素为div的p元素
紧邻兄弟元素 div+p	选择紧接在div元素之后的p元素
后面兄弟元素 p~ul	选择前面有p元素的ul元素

伪类选择器：为元素的不同状态或不确定是否存在的元素设置样式
:link a:link 选择所有未被访问的链接
:visited a:visited 选择所有已被访问的链接
:hover a:hover 鼠标移动到元素上时
:active a:active 点击正在发生时
:focus input::focus 选择获得焦点的 input 元素

权重	粒度
行内样式	1000
ID	100
class，类属性值	10
标签，伪元素	1
*	0

继承
子元素可以继承父元素设置的样式，并不是所有样式都会被继承，边框、高度等样式不会被继承。

CSS 文本格式

text-align 文本的对齐方式
p.uppercase {text-transform:uppercase;} 文本转换
text-indent 指定文本的第一行的缩进
font-family  设置文本的字体 
font-size  设置文本的大小
line-height 行高

CSS 链接

 - a:link - 正常，未访问过的链接
 - a:visited - 用户已访问过的链接
 - a:hover - 当用户鼠标放在链接上时
 - a:active - 链接被点击的那一刻

表格样式

border: 指定表格边框属性
border-collapse: 设置折叠边框
padding: 表格填充,用于控制空格之间的边框

CSS 盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

CSS 边框

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
border-color: 单独使用时不起作用,需先用border-style设置边框样式;

margin属性:上边距 右边距 下边距 左边距 / 上 左右 下 / 上下 左右

CSS 分组 和 嵌套 选择器

分组选择器：每个选择器之间用逗号分隔
嵌套选择器：

p{}：为所有p元素指定样式
.m{}: 为所有class为m的元素指定样式
.m p{}: 为所有class为m元素内的p元素指定样式
p.m{}: 为所有class为m的p元素指定样式

显示与可见性

隐藏元素：display:none或visibility:hidden
visibility:hidden隐藏元素后，被隐藏的元素仍然占用空间，会影响布局
display:none隐藏元素后不会占用任何空间
块元素<h1>, <p>, <div>独占一行，前后都是换行符。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素<span>, <a>只需要必要的宽度跟其他内联元素共占一行，不强制换行。宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
将元素显示为内联元素display:inline
将元素作为块元素display:block
使元素水平居中对齐：margin:auto
使元素左右对齐：position: absolute或使用float属性实现对齐
使元素垂直居中对齐：padding设置顶部底部高度相等
设置水平垂直都居中：使用padding和text-align:center
设置垂直居中：使用line-height，通过设置line-height值与height值相等来实现，或使用transform属性来设置

display:inline使其变为内联元素，即在一行内进行布局，因此无法设置宽高。
display:none使其不显示。
display:block使其变为块级元素，可设置宽高。
display:inherit使其从父元素继承display属性。

CSS伪类

:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容

建立横向导航栏可使用内联列表项display:inline

ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
display:inline;
}
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

属性选择器

input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}
input[type=text] {
width: 100% 设置全宽输入框
padding: 12px 20px 设置输入框填充内边距
border-bottom: 2px solid red; 设置底部边框
}

网页布局

创建三个不相等的列
.column {
  float: left;
} 
 左右侧栏的宽度 
.column.side {
  width: 25%;
} 
 中间列宽度 
.column.middle {
  width: 50%;
}

底部区域
.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Float

通过浮动控制相邻元素间的排列关系
元素浮动后会变为块元素包括行元素如 span，所以浮动后的元素可以设置宽高
清除浮动：

• clear:both：父元素最后加一个高度为0的子元素

.clearfix {
      clear: both;
      height: 0;
  }

• ::after：为父元素添加后标签

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

• overflow：子元素使用浮动后将不占用空间，这时父元素高度为将为零。通过添加父元素并设置 overflow 属性可以清除浮动。将会使用父元素产生 BFC 机制，即父元素的高度计算会包括浮动元素的高度。

  article {
      overflow: hidden;
  }
...

定位

• static：如果没有为定位元素设置偏移，将受父元素的padding等属性影响。
• relative ：相对定位是相对于元素原来的位置控制，当元素发生位置偏移时，原位置留白。
• absolute：绝对定位不受文档流影响，绝对定位元素拥有行内块特性，将参照父元素进行定位
• fixed
• sticky

弹性布局

使用 display:flex 或 display:inline-flex 声明为弹性盒子