displayinline-block的对齐
当所有的display:inline-block以块内的文字为对齐标准,如果有块中没有文字,则将该行内块的块底部作为veritical-align:baseline处理
b{display:inline-block;
height:30px;
width:30px;
background:#cc99ff;
}
<body>
<b></b>
<b></b>
<b></b>
</body>
三个行内块对齐
将其中的两个行内快内部填充内容
<b>aaa</b>
<b></b>
<b>sss</b>
将所有的行内标签统一设置vertical-align
b{display:inline-block;
height:30px;
width:30px;
background:#cc99ff;
vertical-align:top;
}
重新认识margin属性
margin是指的同级盒子之间用margin来撑开同级盒子的间距,margin属性对父级盒子无效
此处特点可以用于ul的无序列表中,但是注意——
margin在有的时候可以对父盒子有效
- 给父盒子设置了border属性,那么子盒子的margin可以影响父盒子。
- 给父盒子加了padding-top/bottom,(在主流浏览器下)父盒子可以被子盒子的margin影响,但是IE7及以下不支持。
- 给父盒子BFC化在主流浏览器下可以使子盒子的marign影响到父盒子的高度。
- 触发了layout可以使IE下子盒子的margin影响到父盒子的高度。
所以当子盒子有margin属性时,我们应该时刻注意,父盒子的border,padding以及BFC、layout是否存在或被触发。
所以margin溢出并不是bug,而是特性必然,只是有时候某些属性被触发了而导致我误以为margin可以撑开父盒子
但是左右的margin是可以影响父盒子的尺寸,在ie及主流浏览器中都一样,maring:0 auto就是典型
如果我们需要一个间距,父盒子的以上属性未被触发,则可以使用padding,如果被触发了,则子盒子的margin可以替代这份工作,
——但一般来说,主张各司其职,margin是margin的职责,padding是padding的职责。
关于JQ的优势发现
JQ的优势新发现。
<div class="box1"></div>
<div class="box2"></div>
console.log($(".box1").prev().html());