美文网首页
张鑫旭css世界学习心得一

张鑫旭css世界学习心得一

作者: 洋洋袁 | 来源:发表于2018-07-27 17:11 被阅读0次

    目前大概只看了width,height这一部分的介绍,感觉明悟了一点之前关于布局的疑惑.

    1. 关于display:block

    block属性具有最具代表性的流动性,天生默认宽度为父盒子的100%.流动性,当设置了宽度的时候,会打断流动性,所以张鑫旭建议布局无宽度.(当子盒子浮动或者定位,就会失去这个流动性);

    2. 关于display:inline-block

    与block的流动性不同,inline-block具有包裹性,也就是宽度由内部元素决定

    3. 宽度

    其实流动性和包裹性也是他提到的宽度的一部分内容,同时还设计了宽度百分比的计算依据.

    未脱离文档流的,如果是block或者inline-block计算以父元素为基准,脱离文档流的float,以父元素为基准;position脱离文档流的也是父元素为基准,只是父元素是的选择情况不定

    4. 高度

    这个东西也是构建盒子的基础,和宽度一样作用域content box上,要是设置了box-sizing当我没说.

    但是height的auto并不会随着父盒子一样打,除非父盒子设置了具体的高度,那么子盒子设置百分比啊什么的才能起作用

    5. 文字和图片最优原则

    就是你哪怕设置了父盒子的宽度为零,文字和图片依旧会显示的.如果设置了overflowhidden,就可以隐藏起来,这是改变了渲染的规则.

    6. min/max width/height

    IE7之后就支持了,我之前在做布局的时候,一直以为IE不支持这两个属性,结果被打了脸,看个书纠正了我一直以来的认知错误,很好

    7. 顺便提一嘴~ 和 +

    ~ : 如 p~div,前面有个p的div

    + : p+div,必须是p后边紧接着的div

    例如:

    <p>开始<p>

    <div>

    1

    <div>3</div>

    </div>

    <div>2</div>

    p+div {color:red} // 颜色变成红色的是1,3

    p~div {color:red} // 123都变红

    相关文章

      网友评论

          本文标题:张鑫旭css世界学习心得一

          本文链接:https://www.haomeiwen.com/subject/bjygmftx.html