-
10分钟理解CSS BFC原理及其应用
所属栏目：[系统] 日期：2020-05-13 热度：110
在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被[详细]
-
css3实现波纹特效、H5实现动态波浪效果
所属栏目：[系统] 日期：2020-05-13 热度：79
css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok， 使得translateX 产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对页面也比较友好的。 比如[详细]
-
CSS实现多行多列的布局的实例代码
所属栏目：[系统] 日期：2020-05-13 热度：164
副标题#e# HTML: div class=box1box1:实现两列多行布局ulli111/lili222/lili333/li/ul/div CSS: .box1 { width: 500px; background: #EEEEEE;}.box1 ul { clear: both; overflow: hidden;}.box1 ul li { width: 48%; height: 100px; margin-bottom: 10px; b[详细]
-
CSS3 clip-path 用法介绍详解
所属栏目：[系统] 日期：2020-05-13 热度：182
刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来说，无疑是很精妙的考虑，这样的效果是怎么实现的呢？ 接下来就说说这个效果的具体实现思路： 将两张图片通过定位，相对于图片容[详细]
-
css常用元素水平垂直居中方案
所属栏目：[系统] 日期：2020-05-13 热度：159
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) html headstyle.parent {width: 100%;height: 100px;background: cyan;display: flex;justify-content: center;align-items: center;}.son {width: 20%[详细]
-
深入理解CSS中的line-height的使用
所属栏目：[系统] 日期：2020-05-13 热度：144
什么是line-height(行高)？ line-height 是指两行文字基线之间的距离。 什么是基线？ 基线、底线、顶线、中线 注意： 基线（base line）并不是汉字文字的下端沿，而是英文字母x的下端沿。 不同字体的基线不尽相同。 行距、行高 line-height 与行内框盒子模[详细]
-
CSS实现镂空遮罩效果
所属栏目：[系统] 日期：2020-05-13 热度：195
前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面： 当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现 它首先加了一个半透明的黑色蒙层（ background-color: rgba(0,0,0,.8)[详细]
-
详解flex布局的元素如何分配容器的剩余空间
所属栏目：[系统] 日期：2020-05-13 热度：172
副标题#e# 自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼[详细]
-
CSS3 translate导致字体模糊的实例代码
所属栏目：[系统] 日期：2020-05-13 热度：51
今日客户反馈，发现 使用了 translate会导致字体模糊。 .media-body-box{@media all and (min-width: 992px){position: absolute;width: 100%;top:50%;transform: translateY(-50%);right: 0;padding: 30px;}} 为了垂直居中，使用了 transform: translateY[详细]
-
CSS中@support实现渐进式网页设计实例代码
所属栏目：[系统] 日期：2020-05-13 热度：110
特性查询赋予了我们使用CSS检测浏览器是否支持某个css特性的能力。我们可以使用该功能在浏览器支持最新的CSS特性时，使用新的语法来编写我们的样式，同时对于不支持的浏览器进行优雅降级。 CSS的设计本身就是支持优雅降级的。对于浏览器不支持的CSS语法，[详细]
-
css transition animation的使用（内含贝赛尔曲线详解）
所属栏目：[系统] 日期：2020-05-13 热度：98
副标题#e# transition也叫过渡动画，主要是用于让一个元素从一种状态过渡到另一种状态效果，常用于主动触发的效果。例如移动端的页面切换（很常用）、button点击效果（也很常见）。 animation才是css3正宗的动画，主要是用于实现某种持续的动画效果（当然简[详细]
-
CSS背景图片固定宽高比自适应调整的实现方法
所属栏目：[系统] 日期：2020-05-13 热度：83
img标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是 img标签一样通过src引入，而是通过css的background-image: url('路径')实现。 实现背景图片固定宽高比缩放我们采用padding[详细]
-
CSS3实现类似翻书效果的过渡动画的示例代码
所属栏目：[系统] 日期：2020-05-13 热度：171
副标题#e# 在VUE实战项目的中有一个加载推荐书籍的过渡动画，在项目中是使用JS实现。 当时看视频大概一个小时作用，拆分动画逻辑，写代码更是耗时。后来自己想着能不能用CSS动画直接写出来，折腾了半天，终于算是实现了。 可以查看加载动画地址 /*首先是DOM[详细]
-
针对class、id所做的CSS HACK
所属栏目：[系统] 日期：2020-05-13 热度：130
这是一篇关于CSS HACK的文章，这篇文章中提到的CSS HACK是针对class、id中属性的HACK，排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。 .test{/*FF*/ height:20px; background-color:orange; } * html .test{/*IE7*/ height:20px;[详细]
-
Html/CSS前端实现文字边框阴影效果
所属栏目：[系统] 日期：2020-05-12 热度：118
参数: 参数1 x-shadow：设置对象的阴影水平偏移值，单位可以是px、em或百分比等，允许负值。参数2 y-shadow：设置对象的阴影垂直偏移值，单位可以是px、em或百分比等，允许负值。参数3 blur：用于设置边框阴影半径大[详细]
-
基于HTML+CSS实现网页滑动门效果
所属栏目：[系统] 日期：2020-05-12 热度：157
一、什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。 小米官网，网页滑动门效果 二、实现滑动门所需技术 简单HTML基础知识 简单的CSS基[详细]
-
超全面CSS样式整理
所属栏目：[系统] 日期：2020-05-12 热度：196
副标题#e# 一 字体属性：(font) 大小 {font-size: x-large;}(特大)xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体)italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM[详细]
-
详解CSS经典布局之Sticky footer布局
所属栏目：[系统] 日期：2020-05-12 热度：87
何为Sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流[详细]
-
详解CSS的table-layout属性的用法
所属栏目：[系统] 日期：2020-05-12 热度：144
tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用的布局算法。 ②固定布局算法比较快，但灵活性不强。 ③自动布局算法比较慢，却更能反映传统的HTML表。 2固定表格布局 ①与自动表格布局相比，允许浏览器更快地对表[详细]
-
CSS语法与JSON、JS对象区别比较
所属栏目：[系统] 日期：2020-05-12 热度：78
CSS（Cascading Style Sheets）规则由2个部分构成：选择器，声明。 selector｛declaration1;declaration2;declaration3;...declarationN｝ declaration由分号（；）隔开，表示为 property:value1 value2 ..是一种单层的无内嵌套的结构。 value为具体的某值[详细]
-
好的 CSS 命名规范可以节约 Debug 时间
所属栏目：[系统] 日期：2020-05-12 热度：110
简评：Debug CSS 是一种很耗时的操作，如果有良好的命名规范可以节约很多的 Debug 时间。 使用连字符（'-'）分隔字符串 你可能习惯了在 Javascript 中使用小驼峰的命名方式： var redBox = document.getElementById（'...'） 但是在 CSS 中不建议使用这种[详细]
-
css自定义占位文本(placeholder)的样式的方法示例
所属栏目：[系统] 日期：2020-05-12 热度：165
自定义占位文本(placeholder)的样式 当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML input placeholder=我是红色的[详细]
-
详解CSS3 弹性布局快速入门
所属栏目：[系统] 日期：2020-05-12 热度：155
弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。 PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局[详细]
-
CSS揭秘之多重边框的实现
所属栏目：[系统] 日期：2020-05-12 热度：62
多重边框的两种实现方案： border-shadow outline !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, initial-scale=1.0meta http-equiv=X-UA-Compatible content=ie=edgetitleMutiple border/title/headbo[详细]
-
CSS八等分圆的实现示例
所属栏目：[系统] 日期：2020-05-12 热度：193
对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮[详细]
