CSS最常用到的属性 垂直居中 flex布局 自适应布局

1、属性选择器

[style]                 // 只要是这个属性的都被选中
    p[style]                // 具有 style 属性的 p 元素。
    li[class = "red"]       // 具有 class 属性且属性值等于 red 的 li 元素。
    li[class ~= "red a "]   // 具有 class 属性且 中间 以空格隔开的 其他属性  其中一个等于 red 的 li 元素
    li[class ^= "red"]      // 具有 class 属性且属性值为以 red 开头的字符串的 li 元素。
    li[class $= "red"]      // 具有 class 属性且属性值为以 red 结尾的字符串的 li 元素。
    li[class *= "red"]      // 具有 class 属性且属性值里只要有 red 这三个字母的 li 元素。
    li[class |= "red"]      // 字符串拼接  以red开头且 中间有 -  字符的属性值。

	<p style="">看看能不能也添加样式</p>
    <ol>
        <li class="red a" style="">100</li>
        <li class="blue">禽流感次发生蔓延</li>
        <li class="darkred" style="">南方农作物减产绝收面积上亩</li>
        <li class="blue">猪流感在广减产绝收发</li>
        <li class="red">全国多作物减产绝收面积上亩</li>
        <li class="blueviolet">猪流感群体性暴发</li>
        <li class="red-violet">猪流感群体性暴发</li>
    </ol>

2、同级选择器

	类名 + 类名/元素   // 选择该类名后边的  紧挨着的  类名/元素  不包含本身
    类名 ~ 类名/元素   // 选择该类名后边的  所有的  类名/元素  不包含本身
	
	.red + .green{}    // 只会影响 和 red  挨着的 green 类名里的元素  red不影响
	.red ~ .green{}    // 只会影响 和 red  后边的所有 green 类名里的元素  red不影响

3、伪类选择器

	li  也可以为 class 类名
	li:first-of-style    // 表示 父元素下的  第一个li元素
    li:last-of-style     // 表示 父元素下的 最后一个li 元素

    li:nth-child( n )       // 表示 父元素下的 第n个li元素
    li:nth-child( even )    // 表示 该父元素下的 偶数项 的li元素
    li:nth-child( odd )     // 表示 该父元素下的 奇数项 的li元素
    li:nth-of-style( even )    // 表示 该父元素下的 偶数项 的 li元素样式
    li:nth-of-style( odd )     // 表示 该父元素下的 奇数项 的 li元素样式

    li:nth-last-of-type(-n+5)  前5个     // n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效
    li:empty            //空值:没有任何的内容，连空格都没有

    a 的4种状态顺序必须这样写  不然可能会出现识别不了
    a:link {}           // 未被访问前的样式
    a:visited {}        // 已被访问过的样式
    a:hover {}          // 鼠标悬停时的样式
    a:active {}         // 鼠标点击与释放之间发生的样式

    li:focus           // 获取焦点的时候的样式
    li:checked         // 匹配用户界面上处于选中状态的元素li
    E:enabled           // 匹配用户界面上处于可用状态的元素E
    E:disabled          // 匹配用户界面上处于禁用状态的元素E

4、盒子模型

	li{box-sizing: content-box / border-box;}  
		content-box: 内容大小不变
		border-box: 盒子大小不变
	适用于 padding 撑起来的盒子  设置padding之后会改变盒子原本大小  
	设置这个属性可以在设置padding的情况下不改变盒子大小

5、垂直居中的适用方法

	当需要垂直居中的是  行内块元素时  
	dispaly: flex; align-items:center   组合使用   使该元素的子元素垂直居中
	<div style="dispaly: flex; align-items:center">   伸缩性  布局
		<div style="flex:1;"></div>
		<div style="flex:1;"></div>
		<div style="flex:1;"></div>
	</div>

	当需要 垂直居中的是块级元素时   定位
	父元素  相对定位  子元素绝对定位
	.po{
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);  移动盒子自身一半的值   
					translateX(-50%)  
					translateY(-50%)
					translateZ(-50%)
		}
	<div style=" position: relative;"> 
		<div class="po"></div>
	</div>
	

6、 弹性布局 && 伸缩盒子

主轴 or  辅轴   主轴为 x  辅轴为 y
display: flex  -----  开启弹性布局
    设置子元素的排列方式
    justify-content:
        flex-start: 让子元素从父容器的起始位置开始排列
        flex-end: 让子元素从父容器的结束位置开始排列
        center: 让子元素从父容器的中间位置开始排列
        space-between: 左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
        space-around:将多余的空间平均的分布在每一个子元素的 左右外边距
    
    伸缩布局的常用属性
    flex-flow: flex-wrap   flex-direction
        flex-wrap:控制子元素是否换行显示，默认不换行
            nowrap:不换行--则收缩
            wrap:换行
            wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列
        flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)
            row:水平排列方向，从左到右
            row-reverse:水平排列方向，从右到左
            column:垂直排列方向，从上到下
            column-reverse：垂直排列方向，从下到上 

    flex-grow: 设置当前元素应该占据剩余空间的比例值      当前空间的flex-grow  /  所有兄弟元素的flex-grow的和    默认为 0
    flex-shrink: 定义收缩比例，通过设置的值来计算收缩空间    当前空间的flex-shrink  /  所有兄弟元素的flex-shrink的和    默认为 1

    align-items : 设置子元素在辅轴上的对齐方式        当元素在主轴是  一行一列时
    align-content : 设置子元素在辅轴上的对齐方式        当元素在主轴是  多行多列时
    align-self : 设置 该子元素 在父盒子中的  在辅轴上的  排列方式
        center:设置在侧轴方向上居中对齐
        flex-start:设置在侧轴方向上顶对齐
        flex-end:设置在侧轴方向上底对齐
        stretch:拉伸：让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向>> 默认值
        baseline:文本基线