CSS 世界读书笔记（一）流、元素与基本尺寸

清除浮动

.clear:after {
    content: "",
    display: block,
    clear: both;
}

盒子的显示方法

• 内联元素 (display：inline) 不能设置 with ， height 但 dispaly：inline-block 能设置，是因为 css 中的元素，是由两个盒子组合而成，外在盒子负责元素是同行显示还是换行，容器盒子负责宽高、内容的呈现

• 当内部盒子为内联时不可以设置 width ， height

• 块级元素的流布局主要体现在水平方向上

border-sizing的使用

只有在以下标签使用

input,
textarea,
img,
video,
object {
    box-sizing: border-box;
}

为了解决什么问题

为了解决原始的盒子模型实际使用时 padding 、 margin 、 border 都会影响盒子的实际大小，一旦设置这些属性就需要重新设置 width 的值。
并且这样做会破坏盒子原有的文档流。

自适应布局或者流体布局

自适应屏幕分辨率的方法

.container {
    min-width: 1200px;
    max-width: 1400px;
}

不同图片大小的最佳显示方法

img {
    max-width: 100%;
    height: auto !important;
}

min-和max-

• min- 的初始值为 auto，max- 的初始值为 none

• max-width 超越 with !important ，权重最高

• 当 min-width 和 max-width 冲突时，min-width 覆盖 max-width

任意高度的展开收起动画

CSS

.element {
    width: 300px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
    background-color: #666;
}
.element.active {
    max-height: 666px;/*安全值的最小值，比height：auto计算的值大*/
}

HTML

<div class="element" id="element" style="">
    <p>任意高度的展开收起动画</p>
</div>
<button id="btn" type="button">点击</button>

JavaScript

var btn = document.getElementById('btn');
var element =document.getElementById('element');
btn.addEventListener('click',function (ev) {
    var e= ev|| window.event;
    var t = e.target;
    if (t.nodeName.toLowerCase()=='button'){
        //停止事件的传播
        e.stopPropagation();
        //设置选中样式
        element.setAttribute('class','element active');
    }
});

内联元素

“外在盒子”为inline的都是内联元素

如：inline，inline-block，inline-table 等。
表现上看内联元素可以与文字显示在一行，因此文字也是内联元素，按钮、输入框，下拉框等原生表单控件，图片都是内联元素。

幽灵空白结点

下列代码，结果 div 的高并不等于 span 里的行高。

<div>
    <span style="font-size: 16px;line-height: 16px;">hahahahha</span>
</div>

在 HTML5 文档声明下，内联元素内部有一个实实在在存在却无法获取的透明空白结点。它存在于每个“行框盒子”前面，同时具有该元素的行高属性的 0 宽度的内联盒。

参考

【1】css 世界