2020-11-24【css 必输项样式解析】

css 弹性盒和布局

• display:flex
• flex-flow:row,wrap
• 设置弹性盒子的子元素超出父容器时是否换行 flex-wrap
• 设置弹性盒子元素在y轴方向上的对齐方式 align-items
• 设置弹性盒子元素在x轴方向上的对齐方式 justify-content
• 而是设置行对齐 align-content

/*弹性盒*/
#flex-container{
	display: flex;
	flex-direction: row; /*row | row-reverse | column*/
	flex-wrap: wrap;/*nowrap | wrap | wrap-reverse*/
	/*flex-flow	flex-direction 和 flex-wrap 的简写*/
	width: 1200px;
	height: 640px;
}
/*排序*/
.flex-container .flex-item { order: 2; }
/*居中设置*/
.flex-container .flex-item {
    align-self: center
	/* auto | stretch | center | flex-start | flex-end | baseline inherit; */
}

css 盒模型和定位

• box 属性分别是：margin、border、padding、content
• padding是能够改变盒子的大小的，这时盒子大小就等于content+padding
• 同理，border属性也能改变盒大小，所以这时盒子大小就等于content+padding+border

css 定位

position 取值类型

• static 默认
• relative 以 原来的位置为基础定位，并且没有脱离文档流
• absolute 以 body只不过红色方块的位置刚好在body的最左上角
• fixed
• left、top
• bottom、right

dom 文档流(page)

• 正常流
• 浮动流
• z-index
• 绝对定位流

css 伪元素和伪类选择器

• 比如：a标签的:hover
• target 超链接后目标样式
• 伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。如::before、::after

结构【数组】伪元素选择器

• :first-child p:first-child 匹配属于任意元素的第一个子元素的p元素
• :last-child p:last-child 选择所有p元素的最后一个子元素
• :nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
• :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素

表单伪元素选择器

• :focus input:focus 选择元素输入后具有焦点
• :checked input:checked 匹配每个已被选中的 input 元素
• :disabled input:disabled 匹配每个被禁用的元素
• :required input:required 选择有"required"属性指定的元素属性
• :read-only input:read-only 选择只读属性的元素属性
• :in-range input:in-range 用于标签的值在指定区间值时显示的样式
• :out-of-range input:out-of-range 选择指定范围以外的值的元素属性

伪元素

• :first-letter p::first-letter 选择器的首字母
• ::before p::before 在选择器前增加内容
• ::after p::after 在选择器后增加内容

选择器权重和运算

• 行内样式 1000
• id选择器 100
• class选择器/属性选择器/伪类 10
• 元素名/伪元素 1
• 通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内

dmeo-必输项样式

 .required:before{
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
        position: relative;
        top:25px;
        left: 20px;
    }