发表于： 2019-02-25 23:05:32
1 749
今天完成的事情：
居中问题：
一运用auto：
1 padding 不可以设置 auto
2 设置auto时 作用是居中（必要条件就是 必须要规定盒子的宽度 并且不可以设置浮动； 即一定要设置width宽度）
不然auto的值会自动为0（就不会居中）
margin：auto margin：10px auto
二
如果一个盒子里面的文字要相对于该盒子的父级盒子水平居中;如果用的是绝对定位的话，要注意：
为什么用了 left: calc(50% - 20px); 还要加 text-align: center;才能水平居中呢？
因为left: calc(50% - 20px);只能使该盒子相对于header盒子水平居中 但是还有文字啊 所以还要加 text-align: center;才能达到水平居中
这是因为绝对定位是以一个点 来定位造成的 ； 如果是flex布局的话不用加text-align: center
margin相关
margin塌陷/margin重叠
标准文档流中，竖直方向的margin不叠加，取较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
盒子居中margin:0 auto;
margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了
注意：
- （1）只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
- （2）使用margin:0 auto;的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
- （3）margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;
明天计划的事情：
继续css任务7
收获：
1进一步了解了居中的问题，让一个容器中的文本居中 还需要使用 text-align：center
返回列表
评论