CSS常用属性

CSS常用属性
选择器
元素选择器

• 全选
  HTML标签
  #id 带有id对应值的HTML标签
  .class 带有class对应值的HTML标签
  关系选择器
  后代选择器 祖先元素 后代元素
  父子选择器 父元素 > 子元素
  普通兄弟选择器 兄弟元素 ~ 兄弟元素
  相邻兄弟选择器 兄弟元素 + 兄弟元素

	属性选择器
		具备属性的元素    元素[属性]  
		具备特性属性值的元素 元素[属性=值]
		[属性!=值] input[name!=user]
		[属性|=值] input[name|=user] 
		[属性*=值] input[name*=user]
		[属性~=值] input[name~=user] 
		[属性$=值] input[name$=user]
		[属性^=值] input[name^=user]
		作为了解，下去自己练
	伪类选择器
		鼠标事件
			a:link 链接在鼠标未点击时候的样式
			a:visited 链接在访问后的样式
			a:hover 链接在鼠标放上去的样式
			a:active 链接在鼠标单击以及释放之间的样式
		集合
			li:first-child 父元素集合里面的第一个子元素
			li:last-child 父元素集合里面的最后一个子元素
			li:first-of-type 匹配父元素集合里面第一个为li类型的元素
			li:last-of-type 匹配父元素集合里面最后一个为li类型的元素
			li:only-child 匹配父元素集合中只有唯一的一个为li的子元素
			li:only-of-type 匹配父元素集合中只有一个类型为li的元素
			li:nth-child() 在父元素集合中选取第几个
			li:nth-of-type() 在父元素集合中选取第几个相同类型的元素
			li:nth-last-child() 在父元素集合中倒数选取第几个
			li:nth-last-of-type() 在父元素集合中倒数选取第几个相同类型的元素
		状态
			p:empty 段落在内容为空的情况下的样式
			input:checked 表单在选中的状态下的样式
			input:enabled 表单处于可操作状态的样式
			input:disabled 表单处于禁止操作状态的样式
	伪对象选择器
		:after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
		:before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
		p:first-letter 设置对象内的第一个字符的样式,必须是块级对象
		p:first-line 设置对象内的第一行字符的样式，必须是块级对象
定位
	static 常规
	relaive 相对定位，参照自身文档流中的位置进行偏移
	absolute 绝对定位，参照离自身最近的定位祖先元素进行定位，脱离了文档流
	fixed 参照视图窗口进行定位
	 用到的属性：z-index,left,right,top.botton
布局
	display 改变元素的显示方式
		none 隐藏对象
		inline 内联元素
		block 块元素
		inlien-block 内联块元素
		run-in  根据上下文来决定是内联还是块级元素
		flex 弹性伸缩盒
		inline-flex 内联块级弹性伸缩盒
	float 浮动
		left 左浮动
		right 右浮动
	clear 清除浮动
		left 清除左浮动
		right 清除右浮动
		both 清除所有的浮动
	visibility 是否显示
		visile 设置对象可视
		hidden 设置对象隐藏
	overflow 内容溢出
		不做处理 visible 
		隐藏溢出的内容 hidden
		scroll 隐藏溢出的内容，溢出的内容以滚动条的方式呈现
		auto 当内容没有溢出的时候不出现滚动条，当内容溢出的时候出现滚动条
尺寸
	width 宽度
	min-width 最小宽度
	max-width 最大宽度
	height 高度
	min-height 最小高度
	max-height 最大高度
外边距
	margin
	margin-top
	margin-right
	margin-bottom
	margin-left
内边距
	padding
	padding-top
	padding-right
	padding-bottom
	padding-left
边框
	border
	border-width
	border-style
	border-color
	border-radius
	box-shadow 设置阴影
	border-image  边框用图片
背景
	background 背景
	background-color 背景颜色
	background-image 背景图片
	background-repeat 是否平铺
	background-attachment 背景是否跟随内容一起滚动
	background-position  设置背景图像在布局中的位置
	background-origin 改变position的参考点
		默认是padding-box ,从padding区域开始显示图像
		border-box,从border区域开始显示图片
		content-box,从content区域开始显示图片
	background-size 背景图片的大小
		auto 真实大小
		cover 将背景图像等比例缩放到完全覆盖容器，背景图像有可能超过容器
		contain 将背景图像等比例缩放到宽度或者高度与容器的宽度高度相等，背景图片始终被包含在容器内
颜色
	color 
	opacity
字体
	font
	font-weight 文字粗细
	font-size 文字大小
	font-family 文字字体
文本
	text-transform 设置文本的大小写
		capitalize 将单词的第一个字母转化为大写
		upercase 将每个单词转换为大写
		lowercase 将每个单词转化为小写
	white-space  设置空格的处理方式
		normal 默认情况下是忽略空格的，换行
		pre,类似于格式化文本，不忽略空格，不换行
		nowrap,忽略空格， 不换行
		pre-wrap ,不忽略空格，换行
	word-wrap/overflow-wrap 设置超过指定容器的边界的时候是否换行
		normal 不换行
		break-word 自动换行
	text-align 文字对齐方式
		left 左对齐
		right 右对齐
		center 居中对齐
		justify 两端对齐
			对于文字内有空格的情况，有待考察
		start 内容对齐开始边界
		 end 内容对齐结束边界
		justify-all 效果等同于justify，但还是会让最后一行也两端对齐
	text-align-last 强制打断的行或者最后一行的对齐方式
		我们可以这么理解，在不支持text-align-last的情况下，可以使用after不让它成为最后一行，在支持的情况下，我们再添加一个text-align-last属性即可
	word spacing  单词之间的间距
	letter spacing 字符之间的间距
	text-indent 文本的缩进
	vertical-align 设置内联元素在行框内的垂直对齐方式
		text-top / text-bottom/middle  
			作用 图片与文字在一起时，对齐方式
	line-height 设置行高
文本装饰
	text-decoration 文本修饰
	text-decoration-line 设置文本修饰的装饰线的位置
	text-decoration-color 设置文本修饰的装饰线的颜色
	text-decoration-style 设置文本修饰的装饰线的样式
	text-decoration-skip
	text-underline-position
	text-shadow 文字阴影
列表
	list-style 列表样式
	list-style-type  列表项用的标记
	list-style-position 标记的位置
	list-style-image 标记的图像
用户界面
	text-overflow
		clip 溢出部分裁剪掉
		ellipsis 溢出部分用...代替
	zoom 设置缩放比例
	box-sizing 设置盒模型的组成方式
多列
	cursor 鼠标样式
	columns 多列布局，常用与报纸、文章多列排列的布局
		 column-width  每列的宽度
		 column-count 每列的列数
	clumns-gap 定义列间距
	clumns-rule 定义列边框
	clumns-span 定义多列布局中子元素跨列效果，firefox不支持
	clumns-fill 控制每列的列高效果，主流浏览器不支持
伸缩盒Flex
	旧版本
		display:-moz- -webkit- box 先设置布局为块级弹性伸缩布局
		box-orient  设置伸缩盒里面的子元素的排列方式
			horizontal：

设置伸缩盒对象的子元素从左到右水平排列
vertical：
设置伸缩盒对象的子元素从上到下纵向排列
inline-axis：
设置伸缩盒对象的子元素沿行轴排列
block-axis：
设置伸缩盒对象的子元素沿块轴排列
其实就是设置每一个盒子是如何排列的
box-direction 设置伸缩盒里面的子元素的顺序是否反转
reverse 反转子元素的顺序
box-pack 设置伸缩盒里面的子元素的对齐方式
start 开始位置对齐
center 居中对齐
end 结束为止对齐
justify 两端对齐
box-align 设置伸缩盒子里面的额外空间
start 开始位置对齐
end 结束为止对齐
center 居中对齐
baseline 基准线对齐
stretch 填充整个容器，默认
box-flex 设置伸缩盒子里面的子元素如何分配剩余的空间（要写在子元素的样式中），并且分配的是父元素剩余空间的比例
box-ordinal-group 设置子元素的显示顺序
区别在于pack是作用于子元素跟盒子的对齐方式的，align是个个子元素之间的对齐方式
过渡版本（IE10）
新版本
display:flex 新版本的基本也不用加前缀了
flex-direction 所有子项如何在flex布局中排列
row 横向左对齐
row-reverse 横向右对齐
column 纵向顶对齐
column-reverse 纵向底对齐
flex-wrap 容器大小改变的时候，如果内容超过容器大小的时候，是否能够换行
nowrap：
flex容器为单行。该情况下flex子项可能会溢出容器
wrap：
flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：
反转 wrap 排列。
flex-flow 综合了flex-direction以及flex-wrap两个参数
justify-content 弹性盒子元素在主轴（横轴）方向上的对齐方式
flex-start 弹性盒子元素将向行起始位置对齐
flex-end 弹性盒子元素将向行结束位置对齐
center 弹性盒子元素将向行中间位置对齐
space-between 弹性盒子元素会平均地分布在行里
space-around 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半
align-items 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
align-self 单独对某个子项进行
flex(子项操作)，用于控制子项的比例
order（子项操作）,用于子项出现的顺序
转换
transform
translate(X轴,Y轴) -------平移效果
scale(X轴，Y轴) --------放大或者缩小
rotate(角度) -------旋转
skew(X轴，Y轴) -----------倾斜
transform-origin() -------以某个原点进行转化
perspective ------设置观察者的位置
perspective-origin --------改变观察者的基准点
transform-style -------------设置转化的3D效果
过渡
transition
transition-property 过渡属性
transition-duration 过渡时间
transition-timing-function 过渡的效果
transition-delay 延迟过渡
动画
Animation
@keyframes 创建动画
animation-name 调用动画名称
animation-duration 动画的时间
animation-timing-function 动画的效果
animation-delay 动画的延迟
animation-iteration-count 动画的次数
animation-direction 动画缓动的方向
animation-play-state 停止动画
animation-fill-mode 动画时间之外的状态
媒体查询
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}
字符以空格相连，选取条件在小括号内，sRules为样式表在花括号中，only,not,and为逻辑关键词，多个设备用逗号分隔
设备名称
逻辑关键词
选取的条件列表

对强制打断的行或者最后一行不作处理
必须显式的声明容器overflow：hidden,width:大小,white-space为nowrap