面向面试编程 2

永远不要和傻逼争辩
因为那样大家会搞不清谁是傻逼

 

内联元素与块级元素

就是display:inline和block的区别;
block:独占一行,可设置长宽,有padding,margin;
inline:自适应宽度,高度line-height不可设置长宽,padding margin对垂直方向都不管用;

div{
    height: 100px;
    width: 100px;
    display: inline;
    margin: 100px;
    padding: 100px;
}

div{
    height: 100px;
    width: 100px;
    display: block;
    margin: 100px;
    padding: 100px;
}

css自适应正方形

正方形的特征是长和宽相等,自适应的意思应该是找个参照物使两边都对应成比例。css中有个很奇特的事情就是margin和padding的百分比不管什么方向上的都是相对于父元素的宽度的。所以搞个不设长宽只设置padding为百分比的就好了;

div{
    display: inline-block;
    padding: 10%;
}

长宽皆为body宽度的20%;

自适应垂直居中

display:flex; 
align-items:center;

这个flexbox要常看,太容易忘了。如果这个不让用了呢

display:inline-block; 
vertical-align:middle;

我还要自适应水平居中呢?
那就只能给他

position:abusolute;
left:50%;
transform:translate(-50%,0);

先让元素的左边处于正中,再给他反向推个自身的50%;

content-box与border-box

一张图明了

div{
    width: 100px;
    height: 100px;
    background: #999;
    padding: 20px;
    border: 20px solid #333;
}
  • 里面的是box-sizing: border-box;可以看到他长宽100就是他的界限,border和padding都是向内增加的;
  • 外面的box-sizing: content-box;就是默认值,border和padding是向外面加的所以最后总大小变成了180;
  • 那要是padding和border超过了这个长宽怎么办呢;那就取大的,长宽100,padding60的话最后大小就是120;

发表评论

电子邮件地址不会被公开。 必填项已用*标注