随笔分类 - html/css
摘要:预期是写一个如下所示的布局内容: 即有一个固定高度的外部容器,顶部的header已知高度,在header占据了固定高度后,剩下的都分给body部分。因此采用flex布局,header设置flex-shrink为0,不自动收缩,body则flex-shrink为1,使其高度压缩为剩余高度。这个操作看起
阅读全文
摘要:关于浏览器渲染 先来看一张webkit引擎的大致渲染流程: 页面渲染可分为下面几个步骤: 1. 处理HTML标记并构建DOM树 2. 处理CSS标记并构件CSSOM树 3. 将DOM与CSSOM树合并成一个渲染树 4. 根据渲染树来布局,计算每个节点的确切大小和位置 5. 将各节点绘制到屏幕上 关于
阅读全文
摘要:CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。 BFC的生成 CSS2.1规定满足一下条件之一就会生成BFC: 根元素
阅读全文
摘要:假设我需要实现将三个块级元素并排对齐的如下效果: 代码如下: 然而,如果当某个div块中没有内容时,就会发生该div块上浮无法对齐的情况: 造成这种现象的原因在于:行内元素和替换元素(如img、input、textarea等)会有个称做 基线 的东西;基线位于文字的最底部。如果块状行内元素(inli
阅读全文
摘要:这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片;本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=): 首先是box-shados语法,用于向框添加一个或多
阅读全文