随笔分类 -  html/css

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

点击右上角即可分享
微信分享提示