不过由此就可以抛光,为什么必须要单行的行内元素,因为如果多行,第二行与第一行的间隔会变超大,就不是我们所期望的效果了。...在此之前,先解释一下CSS里头vertical-align这个属性,这个属性虽然是垂直居中,不过却是指在元素内的所有元素垂直位置互相居中,而不相对于外框的高度垂直居中。...这时候就必须用到CSS特有的calc动态计算的能力,我们只要让要居中的div的top属性,与上方的距离是“ 50%的外框高度-50%的div高度”,就可以做到垂直居中,至于为什么不用margin-top...宽度:100px; 高度:50px; 最高:50%; 转换:translateY(-50%); 背景:#095; } 6.绝对定位 绝对定位就是CSS里头的位置:绝对,利用绝对位置来指定,但垂直居中的做法又和我们正统的绝对位置不太相同...宽度:100px; 高度:50px; 顶:0; 对:0; 底部:0; 左:0; 保证金:自动; 背景:#f60; } 7.使用Flexbox 使用align-items或align-content
首先我们先讲一下,要实现垂直居中,我们为什么选择 vertical-align 这样一个不起眼的 CSS 属性。...前置准备 在认识 vertical-align 属性之前,首先要了解几个基本的概念。...基线:书写英语字母时,字母 X 底部所在的位置,可以了解下《字母’x’在 CSS 世界中的角色和故事》(https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css...2、“空白节点” 可以受具有继承特性的 CSS 属性影响,于是,我们可以通过其他东西来做调整,让字符的中线和字符内容中心线在一起,或者说在一个位置上就可以了。...为什么不学以致用呢?按照之前的讲解,我们可以借助空白节点,空白节点我们看不见,但是如果可以给它设置一个高度,让它与父级高度一致,就解决了这个问题。怎么给高度呢?答案是借助伪元素。
对于现代浏览器来说,css中指定的width就是content width。 对于IE5.x和6来说,在怪异模式中width等于content、左右padding和左右border。...position: 指定一个元素在文档中的定位方式,top,right,bottom和 left 属性则决定了该元素的最终位置。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素,相对于其正常位置进行定位。...因此,"left:20" 会向元素的 left 位置添加 20 像素。 static 默认值。...display:node:把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明,长度为底部边框的一半。
所以我们需要把头部和底部之间的内容标签元素设置为flex-grow: 1或者flex-grow: auto,这样内容部分就会自动填充满头部和底部之外的所有空间。...知识总结 ::before | ::after — 伪类用于向某些选择器添加特殊的效果。 content — CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。...即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。 background-size: cover — 可以让图片大小自动适应,在很大的屏幕也会显示完整的图片。...在CSS中我们不只可以对background背景加入混合模式,我们可以对任何一个元素的自带背景加入混合模式,让你可以做出很多之前没有想过的效果和排版。...知识总结 column-width — CSS属性建议一个最佳列宽。列宽是在添加另一列之前列将成为最大宽度。
1, // 默认值1,小于或等于1px则不进行转换 mediaQuery: false, // 是否在媒体查询的css代码中也进行转换,默认false replace: true..., // 是否处理横屏情况 }, }, }; 在你配置完成后,你可以像平时一样在 CSS 中使用 px 单位,然后 postcss-px-to-viewport 会在构建时自动将 px 单位转换为....element { pointer-events: none; } ⭐️⭐️⭐️⭐️⭐️1px 问题 现象 在 H5 页面中,可能需要设置边框宽度为 1px,但在 Retina 屏幕上,1px...解决方案 给元素添加 overflow: hidden 属性。...版本不会触发事件 解决方案 添加 css 属性 cursor: pointer; 换成 button 元素。
让其显示在一行,效果正常 运行结果如下: 下面问题来了,给第一个div添加内容:“哈哈哈” 运行结果如下: 再给第二个div添加内容:"哈哈哈" 运行结果如下: 再给第三个div添加内容:"哈哈哈...说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素 基线相关 基线的位置并不是固定的: 在文本之类内联元素中,基线是字符x...的下边缘位置 在像img元素中基线就是下边缘。...在inline-block元素中,也分两种情况 如果该元素中有内联元素,基线就是最后一行内联元素的基线。...,第二个DIV没有文字,他的下边缘就是margin的底边缘,因没有margin,那就相当于底部边框。
在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-origin,transform, perspective。...demo1 高度可变的立方体,先来看看最终效果,自己弄得有点丑,如果设计师调下色,添加点元素应该会好看的多 ? 1....现在长方体已经写好,我们来点动效吧,添加一个div.cube-wapper把刚才的cube-box再包裹一层,让cube-box绝对定位到父元素底部,这样高度变化的时候是向上延伸和收缩,js定时器每隔5...在box里插入n个div,每一个div样式相同设置为border-radius:50%和1px的border边框,唯一不同的是它们的translateZ位置相邻相差1,其实就是把1px的边框依次排列起来形成一个圆柱...bg':''}`; circles.appendChild(div); } n个1px的div是无缝拼接起来的,为什么还是会有缝隙呢?
.father { border: 1px solid red; width: 300px; } // 添加浮动会导致父元素不被撑开...div> // 在父类添加元素类...div> // 在父元素添加类...left 左侧偏移量 right 右侧偏移量 定位模式: 选择器{position: 属性值} position属性的常用值 值 说明 static 自动定位 relative 相对定位,相对于其原文档流的位置进行定位...,不占有位置 元素的显示与隐藏 display visibility 和 overflow display 显示 display : none display:block 隐藏之后,不再保留位置 visibility
CSS 盒模型 CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的, 如下所示: image.png 盒子的的四个margin...除了下面提到的情况之外,如果有两个元素在正常流中依次显示,那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。 在下面示例中,有三个div元素。...image.png 仅块元素 margin 重叠 在CSS2中,只指定垂直方向的 margin 重叠,即元素的顶部和底部 margin。因此,上面的左右边距不会重叠。...在下面的例子中,给这个空盒子添加了1px的padding。现在这个空盒子的的上方和下方都有一个50px的 margin。...这个解决方案并不能解决你可能遇到的问题,因为子元素的margin会与父元素相互重叠。这个特定的问题往往不那么常见,但知道它为什么会发生可以帮助你想出一个解决方案。
这也就是为什么 CSS 引用要写在 head 里面。.../> 关于 JavaScript 的位置一直比较有争议。...因为 JavaScript 比较灵活,可以添加在页面的任何位置。通常推荐的是加在页面的最底部。...顺序解决样式冲突问题 当你对一个元素赋予了 background-color 属性,你在其他地方,忘了之前的设置,又对这个元素赋予了一个属性值与之前不同的 background-color 属性。...例如:border :1px solid #ccc;如果 1px solid #ccc 这三个值的顺序出问题了,那么浏览器就可能无法解读这段 CSS 的样式。
CSS 盒模型 CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的, 如下所示: image.png 盒子的的四个...除了下面提到的情况之外,如果有两个元素在正常流中依次显示,那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。 在下面示例中,有三个div元素。...image.png 仅块元素 margin 重叠 在CSS2中,只指定垂直方向的 margin 重叠,即元素的顶部和底部 margin。因此,上面的左右边距不会重叠。...在下面的例子中,给这个空盒子添加了1px的padding。现在这个空盒子的的上方和下方都有一个50px的 margin。...这个特定的问题往往不那么常见,但知道它为什么会发生可以帮助你想出一个解决方案。
依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,与div1组成标准流。div2发现上一个元素div1是标准流中的元素,因此div2相对垂直位置不变,与div1底部对齐。...至此,恭喜读者已经掌握了添加浮动,但还有清除浮动,有上边的基础清除浮动非常容易理解。 经过上边的学习,可以看出:元素浮动之前,也就是在标准流中,是竖向排列的,而浮动之后可以理解为横向排列。...依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,与div1组成标准流。div2发现上一个元素div1是标准流中的元素,因此div2相对垂直位置不变,与div1底部对齐。...至此,恭喜读者已经掌握了添加浮动,但还有清除浮动,有上边的基础清除浮动非常容易理解。 经过上边的学习,可以看出:元素浮动之前,也就是在标准流中,是竖向排列的,而浮动之后可以理解为横向排列。...这时候就要用到清除浮动(clear),如果单纯根据官方定义,读者可能会尝试这样写:在div1的CSS样式中添加clear:right;,理解为不允许div1的右边有浮动元素,由于div2是浮动元素,因此会自动下移一行来满足规则
(橡皮筋效果),使用overscroll-behavior-y: none: 完整Demo 总结 CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为...overscroll-behavior 防止滚动逃离固定位置元素 chatbox聊天场景 考虑位于页面底部的固定定位聊天室。...最终的结果是当用户到达聊天记录的顶部/底部时,主页面保持放置状态。在聊天框中开始的滚动不会传播出去 ?...示例 - 带和不带过度滚动行为的模态:包含 ? ? (左边之前:页面内容在叠加层下滚动,右边之后:页面内容不会在叠加层下滚动) 禁用拉到刷新 关闭pull-to-refresh操作是一行CSS。...(示例效果) 总结 本文主要是针对页面上的滚动,自定义下拉刷新与溢出效果,通过css中的overscroll-behavior:container阻止滚动链接,也就是在触发子元素的事件操作时,不会传递给父级元素
CSS进阶内容——布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然...,如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园。...元素的显示与隐藏 在我们的网页设计中,也许会有广告的设计部分 广告旁常常存在×号来进行广告的关闭,而这部分内容在CSS中就被称为元素的显示与隐藏 本质: 让一个元素在页面中隐藏或显示出来 我们常常提供三种方法...: 给图片添加vertical-align属性(推荐) 使图片转化为块级元素display:block; 溢出文字采用省略号代替 当我们的框架承受不住过多文字时,可能出溢出或者突然终止,这样的网页设计都是不合标准的...初始化 我们在进行网页设计时,CSS本身会有很多不美观的设定 我们需要在开始前就对CSS进行初始化以便于我们后期的网页设计 我们将给出CSS框架中所有需要初始化的部分并给出相关解释,下面给出代码: /*
知识点 -过渡(CSS3) 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果...语法格式: transition: 要过渡的属性 花费时间 运动曲线 何时开始; 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性。...列表页准备工作 列表页面是新的页面,我们需要新建 list.html 因为 列表页的 头部 和 底部 基本一致, 我们需要 把首页中的 头部 和 底部的 结构复制过去 头部和底部的 样式...知识点 -获得焦点元素 :focus 伪类 选择器用于选取获得焦点的元素 。...我们这里主要针对的是 表单元素 :hover 语法: .total input { border: 1px solid #ccc; height: 30px; width: 40px;
在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6 支持CSS则将令这些页面显示不正常...当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...如果我们在文档中添加 那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。...优点:将智能数据添加到网页上,让网站内容在搜索引擎结果界面可以显示额外的提示。(应用范例:豆瓣,有兴趣自行google) CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?...Important 解决 7.select 在ie6下遮盖 使用iframe嵌套 8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height
@gmail.com">dooyoe@gmail.com css 篇 0.5px细线 移动端 H5 项目越来越多,设计师对于 UI 的要求也越来越高,比如 1px 的边框。...在高清屏下,移动端的 1px 会很粗。 那么为什么会产生这个问题呢?...ontouchend onclick audio 和 video 在 ios 和 andriod 中自动播放 这个不是bug,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,...如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 true,则元素将在其所在滚动区的可视区域中居中对齐。 false,则元素将与其所在滚动区的可视区域最近的边缘对齐。...根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。
# CSS-浮动(float) CSS 布局的三种机制 为什么需要浮动? 什么是浮动?...浮动的特性 浮动的元素的对齐 浮动的元素排列位置 为什么要清除浮动 清除浮动本质 清除浮动的方法 使用after伪元素清除浮动 # CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。...CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中: 普通流(标准流) 块级元素会独占一行,从上向下顺序排列; 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行...# 为什么需要浮动? 盒子一行显示 盒子的左右对齐 # 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。...# 浮动的元素排列位置 浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。
当它正常工作时,元素会"粘"在一定位置,但在滚动的其他部分,它又会停止"粘"住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题的根本原因,所以决定深入研究sticky定位。...为什么? 这样做的原因是,当一个元素被赋予sticky定位样式时,粘性元素的容器是粘性元素可以粘住的唯一区域。...CSS Sticky 定位的视觉示例: 事例:https://codepen.io/elad2412/pen/QYLEdK 理解CSS的Sticky行为 就像我之前说的,CSS的 Sticky 定位与其他所有...Absolute 定位 - 在粘附区域的末尾,元素停止并堆叠在另一个元素的顶部,就像绝对定位元素在 position: relative 容器内的行为一样。 贴在底部?...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。
边框 CSS 中的边框(Borders)是用于在元素周围创建可视化边界的重要样式属性。 边框属性 border-width: 设置边框的宽度。...中的阴影(box-shadow)是一种在元素周围创建阴影效果的属性。...阴影可以用于增强元素的立体感,使页面看起来更加生动。通过在 box-shadow 值前添加 inset 关键字,可以创建内部阴影。可以使用逗号分隔多个 box-shadow 值来添加多个阴影效果。...中的轮廓(outline)是一个可以添加到元素周围的可见边框,通常用于强调元素的外部边缘。...轮廓不会影响布局,不会改变元素的大小或位置。轮廓通常用于表单元素的焦点可视化、链接的活动状态等。 outline-color:设置轮廓的颜色。 outline-style:设置轮廓的样式。
领取专属 10元无门槛券
手把手带您无忧上云