css世界--读书总结

1.块级元素width:auto;流动性

<div id="parent">
    <div id="child">div>
div>复制代码

#parent{
    width:300px;
}复制代码

如果child盒子没有width属性，宽度默认是父元素的宽度300px（代码如下）

#child{
      
    
}复制代码

如果child盒子没有width属性，但是有margin、padding属性,宽度默认是父元素的宽度300px减去margin和padding的宽度=300-20-20=260px（代码如下）

#child{
      
    margin:0 10px;
    padding:0 10px;
}复制代码

因此，本书建议能不写宽度属性尽量不写，充分利用盒子的流动性。

作者推荐宽度分离原则：所谓“宽度分离原则”，就是 CSS 中的 width 属性不与影响宽度的 padding/border（有 时候包括 margin）属性共存，也就是不能出现以下的组合：

.box{
    width:100px;
    padding:20px;   /*宽度与padding属性共存*/
}复制代码

而应该这样写

.father{
    width:140px;
}
.box{
    padding:20px; /*利用宽度流动性*/
}复制代码

这样写的好处就是，一旦需求变更，可以只改变相应的padding,margin等数值，而不必挨个计算重写width等数值。

总结一下就是，代码中尽量不出现width:100%;等width属性，而是利用width:auto;的流动性达到布局的目的。

2.块级元素width:auto;包裹性

对于浮动、绝对定位、inline-block 元素或 table 元素，width:auto;表现为内容宽度，而不是自适应父盒子宽度。

"parent">
    
"child">我是子盒子

复制代码

#parent{
      
    width:300px;
}
#child{
      
    float:left;
}复制代码

这时，child盒子的宽度正好包裹内部文字，不会是父盒子的宽度300px;

3.height等；

div想要高度全屏，需给html,body都height:100%;

html,body{
    height:100%;
    width:100%;
}
.div{
    height:100%;
    width:100%;
}复制代码

min-width/max-width/max-height/min-height权重比!important大

.div{
    max-width:100px;
    width:200px !important;   /*宽度只有100px,因为max-width权重比!important大*/ 
}复制代码

绝对定位元素的width/height百分比是相对于其定位祖先元素的padding-box;

.parent{
    position:relative;
    width:100px;
    padding:0 50px;
}
.child{
    position:absolute;
    width:100%;    /*实际宽度是200px*/
}复制代码

未完待续......

转载于:https://juejin.im/post/5b0a16f851882538b63af587