随笔分类 - 布局技巧
1、css能实现的不用js，使用最少js实现交互效果；
2、探索布局技巧，提高效率；
摘要：动态内容等高 一、前言 场景：不同行级或者浮动元素具有不定高度时，将其他元素的高度填充为最大高度元素的高度。 二、HTML结构 使用CSS实现容器长宽比，常见的HTML模板结构如下： <ul class="cont-wrap"> <li class="left">动态内容等高布局动态内容等高布局动态
阅读全文
摘要：粘连布局 特点 有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。 当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部 HTML代码如下： <div id="
阅读全文
摘要：固宽&变宽(两列三栏) 两列自适应布局 两列自适应布局是指一列固定宽度，另一列撑满剩余宽度的布局方式 常见HTML结构如下： <div class="main"> <div class="left"> 左边内容 </div> <div class="right"> 右边内容 </div> </div
阅读全文
摘要：宽高固定比例 一、前言 主要介绍在Web中如何实现纵横比，主要是用于响应式设计中的iframe、img和video之类的元素。 margin/padding百分比相对于父元素宽度。 二、HTML结构 使用CSS实现容器长宽比，常见的HTML模板结构如下： <div class="aspectrati
阅读全文
