css
codingWeb
知行合一
展开
-
css中你不知道的:not,:is选择器用法
用CSS将div内,在不改变html的前提下,除了P标签,其它的字体颜色变成蓝色<div class="box"> <span>我是蓝色</span> <p>我是黑色</p> <h1>我是蓝色</h1> <h2>我是蓝色</h2> <h3>我是蓝色</h3> <h4>我是蓝色</h4&g原创 2021-09-13 21:57:56 · 732 阅读 · 0 评论 -
css有趣实用的技巧和一些冷门知识点
border-radius的8个属性值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-10-07 22:14:28 · 412 阅读 · 0 评论 -
css实现容器(宽高不等的)内部自适应的正方形
先来看需求:容器(宽高不等的)内部自适应的正方形方案一:设置垂直方向的 padding 撑开容器在 CSS 盒模型中,一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定,margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了:代码如下:<!DOCTYPE html><html lang="zh">原创 2020-08-14 20:09:17 · 1710 阅读 · 0 评论 -
css实现下划线的最佳实践及其他方式
开发中下划线效果挺常见的,使用频繁,特别用于对一些文章的内容做一些层次区分,重点分明,用户体验也好,谈谈下划线的多种实现,以及最佳实践1、文字下划线的实现可以使用原生样式:text-decoration:underline.mark{ font-size: 22px; text-decoration: underline; text-decoration-color: red;}局限:没法调整下划线的位置,太贴文字了也不好看灵活性太差,用法太单一2、边框法,就.原创 2020-08-11 15:04:26 · 2173 阅读 · 0 评论 -
挖掘css背景模糊的三种表现形式(背景整体模糊,背景局部模糊,背景局部清晰)
深挖一下背景模糊效果的三种表现形式:背景整体模糊背景局部模糊背景局部清晰背景整体模糊:最近频繁出现一个需求,实现类似于这种效果,背景是商品图模糊后的样子,商品图出现在前面,我第一反应是通过定位position和滤镜filter实现,来看看吧先定结构,有坑点: <div class="bg"> <div class="content">我是内容</div> </div>分析:,如果我们把background和fi.原创 2020-07-18 18:56:13 · 2460 阅读 · 0 评论 -
table 》 tr 设置样式无效? table tr 这样设置才行,why?
今天碰到的一个问题,之前一直没有注意到,虽然很快找到问题所在了,但感觉有必要记录一下,希望有同样遇到这个问题的小伙伴,但没找到原因的,能看到这篇文章先来看问题:html如下: 想让 tr变成红色背景<style type="text/css"> table > tr { background-color: red; }</style><body> <table border cellspacing="0" cellpaddi原创 2020-06-18 00:24:56 · 5024 阅读 · 1 评论 -
原生js造轮子之----仿ElementUI消息提示组件,含生命周期钩子
先来看看ElementUI消息提示组件官网:https://element.eleme.cn/#/zh-CN/component/message我的效果:代码如下:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2020-05-25 22:44:54 · 731 阅读 · 1 评论 -
浅谈浏览器的渲染引擎和渲染过程,以及阻塞(css阻塞,js阻塞)
一、浏览器的渲染引擎主要模块一个渲染引擎主要包括:HTML解析器,CSS解析器,javascript引擎,布局layout模块,绘图模块HTML解析器:解释HTML文档的解析器,主要作用是将HTML文本解释成DOM树。CSS解析器:它的作用是为DOM中的各个元素对象计算出样式信息,为布局提供基础设施Javascript引擎:使用Javascript代码可以修改网页的内容,也能修改c...原创 2020-05-04 02:08:11 · 962 阅读 · 0 评论 -
纯css实现简单瀑布流(flex 和 column-count 两种方式)
两种实现方式虽然都能实现瀑布流效果,但都有各自的缺点,会有介绍到方式一:column-count实现直接复制可预览,可以不做任何修改这种实现方式的缺点是:图片是先从上到下排列,再从左到右排列的<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><...原创 2020-05-01 02:18:48 · 3534 阅读 · 0 评论 -
html的一个小总结
到底啥是HTML,HTML翻译过来就是超文本标记语言,是一种创建网页的标准标记语言而非编程语言,说白了就是用来创建网站,通过浏览器解析运行的语言。一个html文档中,必须存在的是(1)声明,通过声明说明是html文档,html5的声明变得更简单,只需要即可;(2)标签,用来包裹整个页面;(3)标签,用来包裹文档的元数据信息(meta信息,后面会单独出一期总结meta标签)、title、...原创 2019-06-17 23:17:21 · 95 阅读 · 0 评论 -
组合使用css选择器
一、用法介绍在css中.classA.classB指的是一个元素,同时满足classA和classB,即(class=“classA classB”)<style>.classA.classB{ border:1px solid red;}.classa .classb{ border:1px solid blue;}</style>--------...原创 2019-07-16 14:09:04 · 1161 阅读 · 0 评论 -
用canvas和js模拟重力小球
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ margin: 0; } canvas{ backgroun...原创 2019-09-06 11:40:43 · 562 阅读 · 0 评论 -
用html,css,js模拟飞机大战
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ...原创 2019-09-06 11:36:10 · 1082 阅读 · 0 评论 -
块状元素、内联元素、和内联块状元素的概念与区别
块状元素block:该元素前后会有换行符,可以设置margin和padding内联元素inline:元素前后没有换行符,和其他元素在一行上,水平方向可以设置margin和padding,竖直方向不可以而内联元素inline-block:既有块状元素的性质又有内联元素的性质,即:1、和其他元素都在一行上;2、元素的高度、宽度、行高以及顶和底边距都可设置。 ...原创 2019-07-05 14:05:58 · 1348 阅读 · 2 评论 -
css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。如下图,是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查。标题一、伪元素:before和:after用法这...原创 2019-07-24 16:11:23 · 308 阅读 · 0 评论 -
css解决display:inline-block;产生的缝隙(间隙)
display:inline-block的缝隙<style type="text/css"> *{ border: 0; padding: 0; margin: 0; } ul li{ display: inline-block; border: 1px solid #000000; }</style...原创 2019-07-13 16:17:14 · 4782 阅读 · 1 评论 -
css中4种居中div的方法
方法1:Flex layout在父容器内添加以下样式:display: flex;justify-content: center;align-item: center;方法2:Margin auto在子容器内添加以下样式:margin: 0 auto;方法3:Text-align和Inline-block在父容器内添加以下样式:text-align: center;在子...原创 2019-06-15 14:15:03 · 198 阅读 · 0 评论