CSS
文章平均质量分 56
abloume
这个作者很懒,什么都没留下…
展开
-
【CSS】flex布局 - 左边超过打点, 右边完整展示
场景:宽度一定的情况下右边自适应,左边被挤压。需要的效果如下:flex 的三个参数分别对应:flex-grow、flex-shrink、flex-basis。flex-grow:定义项目的放大比例,默认为0。即如果存在剩余空间,也不放大。flex-shrink:定义项目的缩小比例,默认为1。即如果空间不足,该项目将缩小。flex-basis:定义在分配多余空间之前,项目占据的主轴空间。简单说,左边的设置flex: 0 1 auto; 右边的设置flex: 0 0 auto;直接上Demo原创 2021-03-14 09:57:28 · 1054 阅读 · 0 评论 -
【CSS】CSS经典布局之居中定位
1 水平水平居中有行内元素和块元素,行内元素有文字、图片、链接等;块元素主要是div、p等block元素。1.1 行内元素对于行内元素可以使用如下实现水平居中.blocklist1_1 { text-align: center;} 这种方法对于inline,inline-block,inline-table等都有效。1.2 块元素对于...翻译 2017-12-25 09:36:40 · 260 阅读 · 0 评论 -
【CSS3】box-sizing
box-sizing属性可以分为三个值:content-box(default)、border-box、padding-boxcontent-box:border和padding不计入width之内。即(Element width = width+border+padding)border-box:border和padding计入width之内,其实就是怪异模式。即(Element wid原创 2017-07-18 14:46:39 · 254 阅读 · 0 评论 -
【CSS】-webkit-tap-highlight-color
-webkit-tap-highlight-color 是一个没有标准化的属性,能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识,以及暗示了他们点击的元素。 (移动端)有事件监听的元素被点击的时候会被高亮显示,表现为一个蓝框加上半透明的背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮,设置原创 2017-07-16 18:57:49 · 3180 阅读 · 0 评论 -
【CSS】由 flex: 1; 引发的思考
首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。 flex-grow 属性:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 flex-shrink 属性:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 flex-basis 属性:定义了在分配多余空间之前,项目占据的主轴空间(main size原创 2018-01-09 12:47:40 · 6704 阅读 · 2 评论 -
【CSS】CSS经典布局之绝对底部布局
转载自:CSS经典布局之Sticky footer布局何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时,页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky f转载 2018-01-09 11:48:23 · 5099 阅读 · 1 评论 -
【CSS】fixed绝对定位水平垂直居中不随滚动条而移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&a原创 2018-05-03 23:18:04 · 2158 阅读 · 0 评论