阅读 239

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;表现为内容宽度,而不是自适应父盒子宽度。

<div id="parent">
    <div id="child">我是子盒子</div>
</div>
复制代码

#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*/
}复制代码

未完待续......


文章分类
前端
文章标签