css3常见样式设置

• margin：0  auto;  // 把元素放在父元素的中间
• margin: auto;  // 将父盒子多余的空间平均分配给每一个子元素
• float： left； // 浮动到父元素的左边

文本属性：

• line-height: 36px; // 行高
• text-align: center; // 文字居中显示

列表属性：

• list-style: none; 设置所有列表<li>的属性,none表示不设置

边框设置：

• border: 1px  solid red;   // 给边框设置为1px的线条

盒子模型：

• box-sizing:content-box； // 盒子大小为width+padding+margin，这种情况下改变width，padding，margin中的任何一个盒子的宽度都会改变，容易引起页面的错乱，不建议使用
• box-sizing:border-box;  // 盒子大小为width。也就是说margin和padding在width中,只要width不变，不论你加什么样式，盒子的大小就是固定的，不会导致页面的错乱，用法：给父元素添加这个属性，当子元素太大时会自动的平均收缩

       

• *{padding: 0; margin: 0;} // 清除浏览器有可能默认设置间距，边距，在全局范围使用*号，会极大的消耗资源，所以不建议在全局使用，需要加特定的标签

定位：

• display: block; // 此元素将显示为块级元素，此元素前后会带有换行符

伸缩布局：

• display: flex; // 设置父容器为伸缩盒子，会使每一个子元素自动变成伸缩项，子元素会自动换行（父元素）
• justify-content: flex-end; 或者 flex-start; 或者 center；或者 space-between; 或者 space-around; // 改变子元素在主轴方向上的排列顺序（主轴是可以在水平和垂直方向变化的）（父元素）

       

•  align-items: center; 或者 flex-start; flex-end;// 设置所有子元素在侧轴方向上的对齐方式（父元素）
•  align-self: center; // 设置子元素在侧轴方向上的对齐方式（子元素）
•  flex-warp: nowrop; 或者wrap；// 控制子元素是否换行显示 （父元素）
•  flex-direction: column; / row; // 设置子元素的主轴方向，默认 row（父元素）
•  flex-flow: row  wrap;  // 这个标签是flex-warp 和 flex-direction的结合体，用这个可以代替前两个（父元素）
•  flex-grow: 1;  //  用来设置扩展比例，设置当前元素应该占据父元素剩余空间的比例值，跟随父元素变化而变化，比例值的计算：当前空间的flex-grow/所  有兄弟元素的flex-grow的和，默认值是0。（子元素）
•  flex-shrink: 1; // 用来设置收缩比例，父元素空间不够，子元素的搜索比例，跟随父元素变化而变化，默认值为1，计算方式同flex-grow（子元素）
•  flex: 0 1 auto; // flex是flex-grow,flex-shrink,flex-basis的间写，跟随父元素变化而变化，默认值 0 1 auto，后两个值可选（子元素）