清除浮动
.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 世界