HTML(在不设置css属性的情况下)根据元素类型不同而布局不同,块级元素靠左边向下排列,行内元素和行内块元素不会独占一行,可以横向排列。所以不借助css的话,页面布局就会有很大的局限性。
能够影响布局的css属性(常用):
属性 | 属性值 | 作用 |
---|---|---|
margin | xxpx | 设置盒子外边距,可以理解为包裹电视机的泡沫,在外部影响了电视机与桌子的距离 |
padding | xxpx | 设置盒子内边距,调整盒子内容的布局 |
position | absolute(绝对定位)relative(相对定位)fixed(固定定位)static(静态定位,默认值) | 设置了absolute的元素会根据设置了定位的父元素来布局,设置了relative的元素根据自身最初的位置来布局,设置了fixed的元素根据浏览器窗体来布局,通过设置top,right,left,bottom这四个属性来控制位置 |
display | flex | 将元素display设置成flex,代表这个盒子变成了一个弹性盒子,可以通过弹性盒子的属性来控制盒子内的布局 |
元素水平居中:
1,通过设置margin来实现(只对块级元素有效):
子元素设置margin:0 auto;
2,通过设置子元素display和父元素text-align来实现:
父元素设置text-align:center
子元素设置display: