ror突进-css基础

margin 与 padding 的差异

margin和padding是相对于盒模型的border边框说的,margin是外边距,可以把控div和div之间的宽度,padding是内边距可以把控div内部其他元素和边框的距离。

什么是 box model

盒模型是说所有页面元素基本几何形式都是盒装的,可以通过调整盒模型的属性开组织元素之间的关系,比如并排的放盒子,大盒套小盒,盒子浮动等等。

为何要使用 em 而非 px 来定义字的大小

em和px都是长度单位,而之所以用em不用px是因为,px是像素型的绝对大小,是相对于显示器分辨率按照像素来确定大小的,它受设备屏幕和分辨率的影响,但是各终端不同,所以用px可能会造成不同设备体验不同,难以控制;

而em是相对大小,是相对于默认字体尺寸的倍数,所以只要设置了默认字体尺寸,那么em就是这个尺寸的乘积关系,这个就会相对比较统一,可控性高,大小写的时候很容易辨识只要在父元素基础上几何关系算就好了。而px数都比较大,不好记。

除此之外css3为了解决em只能相对父元素设定大小,造成一层一层可能混乱的问题,还多添加了一个rem可以直接相对于根元素来直接设置倍数,不过限定ie8以上现代浏览器。

marin 方向问题

h1 {margin : 10px 0px 15px 5px;}

这个外边距顺序实际是上、右、下、左顺时针方向转的

margin-top:10px
margin-right:0px
margin-left:15px
margin-bottom :5px