总结CSS常用

全局初始化css

1. 几个比较号的初始化代码 -> Miss Fantacy的总结

flex布局

flex布局 (阮一峰教程语法)(阮一峰实战)

父元素设置
flex-direction: 设置主轴的方向
	row: 主轴为水平方向，起点在左端(默认)
	row-reverse: 起点在右端
	column: 主轴为垂直方向，起点在上沿
	column-reverse: 起点在下沿
	
flex-wrap: 设置子元素是否换行及换行的风格
	nowrap: 不换行(默认值)
	wrap: 换行
	wrap-reverse: 换行并且新的一行在上
	
flex-flow: direction和wrap的简写(默认值为row，nowrap)

justify-content: 设置主轴方向上子元素的对齐方式
	flex-start: 左对齐(默认)
	flex-end: 右对齐
	center: 居中
	space-between: 两端对齐，子元素之间的间隔都相等
	space-around: 每个子元素的间隔都相等，元素之间的间隔要比元素到边框的大一倍
	
align-items: 设置垂直方向上子元素的对齐方式
	flex-start: 顶部对齐
	flex-end: 底部对齐
	center: 居中对齐
	baseline: 项目的第一行文字的基线对齐
	stretch: 如果项目未设置高度或为auto，将沾满整个容器的高度
	
align-content: 设置有多行子元素的对齐方式，如果只有一行，将不起作用
	前五个使用用法和justify-content一样
	flex-start: 
	flex-end: 
	center: 
	space-between: 
	space-around: 
	stretch: 子元素沾满整个高度(默认)

子元素设置
order: 定义属性的排列顺序，数值越小排列越前
flex-grow: <number> 定义元素放大比例，前提是要有剩余空间的话，就会分配
flex-shrink: <number> 定义缩小比例，放父元素空间不足时缩小，如果为0则不缩小，别的元素等比缩小
flex-basis: 分配多余空间之前，元素占父元素的空间，跟设置width和height一样
flex: 是前单个的缩写，默认值是前三个的默认值，(0 1 auto)
align-self: 定义元素自己的垂直对齐方式，定义后覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

箭头

.arrow	{
    display: block;
    width: .12rem;
    height: .12rem;
    border-top: .02rem solid #ffffff;
    border-right: .02rem solid #ffffff;
    transform: rotate(45deg);
    /* 后三个属性更具自己的需求更换，箭头的长度，和方向 */
}

css选择器

.f .s{} // 表示f里面所有的s元素
.f>.s{} // 表示f里面第一层的s元素
.s:nth-child(n) // 选择f下面所有元素中第n个元素且是s类
.s:nth-of-child(n) // 选择f下面的第n个s元素
// nth-last-child, nth-last-of-child,从后面开始取
odd 单行 even 双行

媒体查询 media

1. 在 link 标签上写

<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

2. @语法

// mediatype：查询设备类型，一般是screen，表示用于电脑，手机，平板
// media feature：条件
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
<----------------------常用的查询--------------------------->
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
@media screen and (min-width:1366px){
/*pc端 css*/
}
/*iphone 5/5s/5se */
@media screen and (max-width:569px){
top: 7%;
left: 18%;
}
/*iphone 6/7/8 */
@media screen and (min-width:569px) and (max-width:668px){
top: 12%;
left: 20%;
}
/*iphone 6p/7p/8p */
@media screen and (min-width:668px) and (max-width:737px){
top: 14%;
left: 20%;
}
/*iphone x */
@media screen and (min-width:737px) and (max-width:813px){
top: 12%;
left: 21%;
}
/*ipad*/
@media screen and (min-width:813px) and (max-width:1025px){
top: 22%;
left: 21%;
}
/*ipad pro*/
@media screen and (min-width:1024px){
top: 25%;
left: 21%;

}

常用的css动画库

animate.css、magic.css、Hover.css

浏览器兼容性前缀

建议把标准写法放到最后，兼容性写法放到前面

-webkit-   chrome和safari
-o-  opera
-moz-  火狐
-ms- IE

一个在线将标准写法的css转成兼容的插件 Autoprefixer (地址)

文本溢出显示(…)

.text-ellipsis{
	text-overflow: ellipsis;
	overflow: hidden;
    white-space: nowrap;
}