![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Hans Huang
热爱IT,热爱钻研,热爱分享
展开
-
超神的flex布局,解放你的双手
flex布局是CSS3推出的新特性,也叫弹性布局。如果你学习了以前传统的定位浮动布局,你再来接触flex,你会有一种“风雨过后是彩虹”的感觉。flex布局的强大,让前端工程师爱不释手。 1、布局原理 flex就是弹性布局,任何元素都可以使用flex布局,十分强大。 当父元素被设置为flex布局之后,子元素的float、vertical-align都会失效 一句话:flex就是给父元素添加fl...原创 2019-11-03 15:10:32 · 703 阅读 · 2 评论 -
CSS经典布局大揭秘
上一篇的文章介绍了BFC块级格式化上下文,BFC是CSS中的常用技巧。今天我们将详细地介绍网页中的常见布局,运用BFC,也或者是flex弹性布局。 1 两栏布局 两栏布局是非常常见的布局方案,在许多网站中都运用到这一布局。说到两栏布局,最常见的就是管理后台系统。左侧菜单栏固定宽度,右侧主要内容随窗口变化而自适应。 1.1 传统浮动方法 <!DOCTYPE html> <htm...原创 2019-10-21 10:16:54 · 234 阅读 · 0 评论 -
CSS神器之一——块级格式化上下文BFC
块级格式化上下文(Block Formatting Context),简称BFC。BFC是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局。 这是一个非常重要的知识点,无论是项目页面的布局,还是和同事之间的交流,也或者是面试前端工程师,这都是经常会碰到的。 在这里补充常规流块级盒模型的相关知识: 在水平方向上,必须撑满包含块 在包含块的垂直方向上依次摆放 若外边距无缝相邻,则进行外边...原创 2019-10-20 13:50:28 · 198 阅读 · 0 评论