- 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,后两个值可选(子元素)