随笔分类 -  css

grid-layout 网格布局--快速上手
摘要：grid布局非常强大，他是二维布局模式，将容器划分成“行”和“列”，产生单元格，然后指定项目所在单元格，，而flex是一维布局，grid远比flex强大的多。 这里我只讲日常工作中常用的属性。 1、容器上的属性 （1）display属性 display：grid 用来指定容器为网格布局。这跟我们以前 阅读全文
posted @ 2019-08-19 19:04 王小溪 阅读(3314) 评论(0) 推荐(0)
flex布局详解
摘要：1、flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 注意：设置为flex布局以后， 子元素的float、clear、vertical-align属性将失效。 2、容器的属性（父元素） 阅读全文
posted @ 2019-08-06 23:44 王小溪 阅读(1212) 评论(0) 推荐(0)
transform、flex、grid实现水平垂直居中
摘要：实现水平垂直居中的方法有很多，在这里我只介绍三种种易用且常见的方法，这三种方法对于固定宽高和不定宽高都有效。 1、transform 方案 2、flexbox 方案 3、grid方案 阅读全文
posted @ 2019-07-30 14:11 王小溪 阅读(3785) 评论(1) 推荐(2)
自适应布局
摘要：常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应 左侧固定，右侧自适应 1、子元素 float:left 2、子元素 width:calc() 3、父元素 display: flex 左右2列固定，中间自适应 1、子元素 width:calc() 2、父元素 display: fle 阅读全文
posted @ 2019-07-30 13:51 王小溪 阅读(443) 评论(0) 推荐(0)
清除浮动
摘要：清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的情况。 清除浮动的方法有很多种，这里我只写被大家推荐切常用的方法。 1、父级添加伪类 2、父级添加overflow属性 可以通过触发BFC的方式，可以实现清除浮动效果 阅读全文
posted @ 2019-07-30 13:06 王小溪 阅读(202) 评论(0) 推荐(0)
border实现两栏等高布局
摘要：在我们日常开发中可能会有这样的需求：侧边栏的高度需跟内容区域高度一致，但是内容区域高度不固定。 这里只需利用border，就可轻松实现。 html部分如下： css部分如下： 效果如下： 阅读全文
posted @ 2019-01-12 19:17 王小溪 阅读(481) 评论(0) 推荐(1)
css 实现水平居中
摘要：水平居中分为块状元素和行内元素，而块状元素又分为定宽块状元素和不定宽块状元素。 1、行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 text-align：center；来实现的。 <p style="text-align: center;">行内元素水平居中</ 阅读全文
posted @ 2018-12-13 22:25 王小溪 阅读(20836) 评论(1) 推荐(2)