css浮动 float属性详解

一、什么是浮动?浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。二、如何产生浮动?给元素本身添加float属性float值:...

2020-10-16

CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现

例子:<html><head><style type="text/css">ul.none{list-style-type:none}ul.circle {list-style-type:circle}ul.square {list-style-type:square}ol.upper-roman {list-sty...

2020-10-16

面试官提问之CSS如何实现固定宽高比

对于这个问题,你可能还没有过相关需求,或者还没有在面试的时候被问到过,但是歪马相信你终将有需要。这个问题说起来也是老生常谈,歪马今天再次提起也是希望有朝一日当你被问到的...

2020-10-16

CSS3标注引用的出处和来源的方法

疫情呆家里都快发霉了,打开电脑动动大脑,今天给大家分享一篇关于CSS3标注引用的出处和来源的方法。新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及,越...

2020-10-16

CSS中元素的显示模式

在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level)、块级元素(block-level)。1,首先介绍什么是行内元素,什么又是块级元素?      1.1,行内元素就是...

2020-10-16

快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)

问题解说:在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题问题演示 //html <div class="contain...

2020-10-16

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码

作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。栗子1:从最简单的水平...

2020-10-16

解决移动端1px边框问题的几种方法(5种)

本文介绍了解决移动端1px边框问题的5种方法。当然了,在这之前先整理了与这些方法相关的知识:物理像素、设备独立像素、设备像素比和viewport。物理像素、设备独立像素和设备像...

2020-10-16

CSS3实现文字浮雕效果,镂刻效果,火焰文字

要做出这个效果,首先必须知道css的一个属性:text-shadow:水平位置 垂直距离 模糊距离 阴影颜色;水平位置和垂直位置的值可以为负值可以使用两组值来实现凹凸效果,中间用逗号&ld...

2020-10-16

css样式层叠规则详解

CSS样式规则语法样式是CSS的基本单位,每个样式规则都是由选择器和声明块两个基本部分组成的。选择器(selector)决定为哪些元素应用样式;声明块定义相应的样式,它包含在一对花括号...

2020-10-16

解决CSS浏览器兼容性问题的4种方案

前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。为什么会有浏览器兼容性问题?还不是因为浏览器厂商太多了!Ch...

2020-10-16

css sticky footer经典布局的实现

什么是sticky footer布局?我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是...

2020-10-16

css实现两列固定与一列自适应的几种方法

本文介绍了css实现两列固定与一列自适应的几种方法,分享给大家,具体如下:1.flex布局Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提...

2020-10-16

border-radius给元素添加圆角边框的方法

border-radius:10px; /* 所有角都使用半径为10px的圆角 */border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */不要以为border-r...

2020-10-16

CSS实现QQ浏览器功能

代码知识点1.结合fullpage.js实现全屏滚动2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。 background-image: linear-gradient(direction, c...

2020-10-16

js判断并告知支持css属性(值)的 情况分析

当我们想用某个css新特性时,总是会在意它的兼容性情况,或许我们会去搜索它的兼容性,哪些浏览器合适哪些不合适,在这些已知的情况下再选择是不是使用或如何使用,这是一个已知我们...

2020-10-16

CSS 实现蜂巢/六边形图集的示例代码

不知道为什么,UI 很喜欢设计蜂巢效果(摊手) 一、实现六边形首先用传统的方式来分析一下六边形可以拆分成三个矩形,每个矩形 旋转正负 60&deg; 得到其它两个矩形由此可以设计出基...

2020-10-16

CSS3颜色值RGBA与渐变色使用介绍

CSS3之前渐变色图片只能用背景图片
CSS3的渐变色语法可以让我们省去下载图片的开销
并且在改变浏览器分辨率时有更好的效果颜色值RGBA我们熟悉的rgb颜色标准,是由r(red)、g(gree...

2020-10-16

css实现多张图片横向居中显示的方法

先讲一下实现的步骤:最终效果2. 代码实现HTML部分 <div class="main"> <div class="tag"> 分类小贴士 </div> <div class="images" > <div class="mid"> <img sr...

2020-10-16

css3 transform导致子元素固定定位变成绝对定位的方法

本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法,分享给大家,也给我自己留个笔记,方便查找。<!DOCTYPE html><html><head><style> body { background: #f...

2020-10-16

css如何利用负margin技术实现平均布局

我们平常会利用float布局来解决IE浏览器CSS的兼容性问题,比如淘宝,就是用float布局来实现的。 我们会在淘宝页面会看到下图这样一种布局。这种图片均匀分布的布局我们叫平均布...

2020-10-16

CSS实现带遮罩层可关闭的弹窗效果

实际开发中常常少不了使用弹窗,在学习css3的时候我发现可以通过纯css实现带遮罩层可关闭的弹窗。使用CSS3实现带遮罩层可关闭的弹窗需要用到 :target伪类,::before 、::after...

2020-10-16

利用CSS3的3D效果制作正方体

学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态图就是利用3D旋转位移,结合动画效果制作的。感兴趣的同学可以在完成正方体的制...

2020-10-16

CSS实现两栏布局,左边固定,右边自适应的4种方法

1. float+overflow:hidden这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置...

2020-10-16

通过css动画实现一个表格滚动轮播效果

css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下<template> <section> <div class="box"> <ul class="header"> <li class...

2020-10-16

巧用CSS属性值正则匹配选择器(小技巧)

属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"]这3种属性选择器是字符匹配,而非单词匹配。其中,尖角符号^、美元符号$以及星号*都是正...

2020-10-16

CSS选择器中的正则表达式使用

一 是的,CSS也有正则(阿门)CSS装逼两利器:矩阵和正则。其实呢,我们也不必惊讶,CSS毕竟也是一门语言,而且正则本来就是有利于某个具体语言之外的东西。二 正则表达式的一些通用规则...

2020-10-16

CSS中的 position属性sticky详解

在开发移动端app时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是...

2020-10-16

css实现抖音订阅按钮动画效果

前段时间刷抖音,觉得关注时的按钮动画很好看,加上自己本身最近也在学习前端知识。所以就想怎么自己实现出来,最终效果还可以,但是感觉自己做的还不够好。仅供参考。&#127867;最...

2020-10-16

CSS 返回顶部代码示例

现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉...

2020-10-16

用css3实现转换过渡和动画效果

为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素...

2020-10-16

css overflow: hidden 的用法(溢出隐藏及清除浮动)

溢出隐藏就是隐藏超出规定高度的文本或者图像信息。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> di...

2020-10-16

CSS 中px、em、rem、%、vw、vh单位之间的区别详解

1 、pxpx就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。2、em参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。字体大...

2020-10-16

CSS变量实现暗黑模式的示例代码

最近微信被苹果逼的开发了 暗黑模式 ,越来越多的网站和应用开始支持了暗黑模式,许多人也喜欢为网站选择暗模式,也许他们更喜欢这样的外观,或者他们想让自己的眼睛免受疲劳。 这...

2020-10-16

利用css样式实现表格中字体垂直居中的方法

利用css样式实现表格中字体垂直居中的方法,具体代码如下所示:有一个自定义表格如下所示,当所返回数据改变时,文字都能自动居中 //html //用两个div做容器 <el-col :sp...

2020-10-16

css用Flex布局制作简易柱状图的实现

以下是一个用Flex布局的柱状图:HTML:<div class="his_box"> <div>成绩分布直方图</div> <div class="histogram"> <div><div>10</div></div> <div><div>8...

2020-10-16

CSS3实现文字描边的2种方法(小结)

  问题    最近遇到一个需求,需要实现文字的描边效果,如下图  解决方法一     首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke    该属性...

2020-10-16

详解CSS中的flex布局

flex布局又称为弹性布局,任何一个容器都可以指定为flex布局声明弹性盒子的几种方式就像前面说的,所有容器都可以指定为flex布局.box{ display:flex;}行内元素也可以使用:dis...

2020-10-16

CSS overflow-wrap新属性值anywhere 用法大全

一、先了解下overflow-wrap属性CSS overflow-wrap 属性其实就是以前的 word-wrap 属性,MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。由于 overfl...

2020-10-16

CSS3属性 line-clamp控制文本行数的使用

说明:限制在一个块元素显示的文本的行数。-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。为了实现该效果,它需要组合其他...

2020-10-16

css3通过scale()、rotate()实现放大、旋转

一、scale()方法缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。跟translate()方法一样,缩放scale()方...

2020-10-16

关于CSS中定位的小结

CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位.static静态定位:应用的场景不多,这里不做介绍下面主要介绍一下其他三种常见的定位1.position...

2020-10-16

css区分ie8/ie9/ie10/ie11 chrome firefox的代码

网站兼容性调试实在令人烦心,现在的网站设计人员真的要比以前费力很多,因为网页代码不再是只需满足一个IE6访问就行,而是要满足N多的浏览器访问正常才行。粗略算一下,目前至少要...

2020-10-16

css hack之\9和\0就可能对hack IE11\IE9\IE8无效

每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是IE家族。在做兼容性设计时,我们往往会使用各种浏览器能识别的独特语法进行hack,从而达到各种浏览器下显示...

2020-10-16

比较好看的css 自定义样式(标题 h1 h2 h3)

效果图博客园中常用的样式/*标题h1 h2 h3样式*/#content { color: black; font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif; font-size: 16px;}#co...

2020-10-16

css之display属性之inline-block布局实现详解

CSS display 属性注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-c...

2020-10-16

CSS之定位布局(position,定位布局技巧)

1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bo...

2020-10-16

css记录文本图标对齐的几种解决方案

开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:html...

2020-10-16

css 层叠与z-index的示例代码

层叠与层叠等级HTML 元素是一个三维的概念,除了水平和垂直方向外,还会在“z 轴”上层层叠加。
既然是叠加,就会涉及到先后顺序的问题,规范中称之为“层叠等级&rd...

2020-10-16

CSS 清除浮动与BFC的方法

BFCBFC:块级格式化上下文BFC的布局规则
内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。...

2020-10-16
返回顶部
顶部