css3常见样式设置

r囧r小猫 2023-08-17 17:47 50阅读 0赞

*  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不变，不论你加什么样式，盒子的大小就是固定的，不会导致页面的错乱，用法：给父元素添加这个属性，当子元素太大时会自动的平均收缩

![20191002162421994.png][]

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

定位：

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

伸缩布局：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDQyOTM4_size_16_color_FFFFFF_t_70][]

*   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，后两个值可选（子元素）

[20191002162421994.png]: /images/20230808/f47ce435e72f4bf9b6f67d3bf727cd70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDQyOTM4_size_16_color_FFFFFF_t_70]: /images/20230808/3045e692a737437ca99f8d714da48965.png