day 40 文本属性 常用css属性 定位

前提是标准文档流，margin的垂直方向会出现塌陷问题。 如果盒子居中：margin: 0 auto;如果盒子浮动了，margin: 0 auto;就不起任何作用 需求：让浮动的盒子居中
给浮动盒子，加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子margin: 0 auto;
.box{
width: 400px;
height: 300px;
background-color: red;
}
.main{
width: 100px;
overflow: hidden;
margin: 0 auto;
}
.child{
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
float: left;
}
文本水平居中：text-align:center;
文本垂直居中：行高=盒子的高度 盒子如果浮动了，那么垂直方向上不会出现塌陷问题。 css中有三种方式让盒子'脱表'
1.浮动float
2.绝对定位
3.固定定位

中心对齐
text-align: center;
两端对齐
text-align: justify;
首行缩进
text-indent: 2em; em代表1个字
字体大小
font-size: 14px;
修饰文本
text-decoration
none;没有线
underline;有下划线
文本的行高
line-height: 设置文本居中的方式
单行文本垂直居中： line-height = height 多行文本居中：
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px; ff:
15*16+15 255
background-repeat:no-repeat
背景图片将仅设置显示一次

默认：position:static; 静态定位 position: relative; 相对定位
absolute;绝对定位
fixed;固定定位 - ralative:
如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别
不脱标
参考点：
相对于原来的位置 形影分离 作用：
1.层级提高，做压盖（不建议）
2.布局方案 "子绝父相"的参考 - absolute 1.脱标：不占位置
2.层级提高 参考点：
单个盒子
如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分） 如果以bottom描述，是以浏览器的左上角为参考点 父子盒子之间 如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点