随笔分类 -  CSS

1 2 下一页
CSS中定义变量，并使用变量设置属性值
摘要：:root{ --base: yellow; --spacing: 10px; --blur: 10px; } 上面代码定义了3个变量，：root使得所有人可访问 img{ filter: blur(var(--blur)); padding: var(--spacing); background: 阅读全文
posted @ 2020-10-01 16:10 webpon 阅读(385) 评论(0) 推荐(0)
禁止文本选中
摘要：* { /* 禁止文本选中 */ -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } 阅读全文
posted @ 2020-09-22 10:25 webpon 阅读(123) 评论(0) 推荐(0)
自定义属性
摘要：自定义属性是相对于内置属性来说的。 1、完全自定义属性 <input type="text" id="txtBox" displayName="123456" /> var obj = document.getElementById("txtBox"); // 读取 obj.getAttribute 阅读全文
posted @ 2020-09-21 15:33 webpon 阅读(363) 评论(0) 推荐(0)
CSS常见可以继承的属性
摘要：个人总结的，虽然不全，但是常见： 1、字体系列属性 font-family：字体系列 font-weight：字体的粗细 font-size：字体的大小 font-style：字体的风格 2、文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height： 阅读全文
posted @ 2020-09-11 01:24 webpon 阅读(189) 评论(0) 推荐(0)
移动端vw适配方案
摘要：在移动端适配有很多种方案，有flex布局，百分比布局，响应式布局，还有vw布局， 下面讲解以下vw布局： 首先我们得明确vw是什么？ vw viewpoint width，视窗宽度，1vw=视窗宽度的1% vw是一种css单位。1vw相当于视窗宽度的1%,100vw相当于100%. 这种布局和百分比 阅读全文
posted @ 2020-09-04 12:11 webpon 阅读(3810) 评论(0) 推荐(0)
媒体查询@media
摘要：https://www.runoob.com/css3/css3-mediaqueries.html 阅读全文
posted @ 2020-09-04 07:10 webpon 阅读(145) 评论(0) 推荐(0)
隐藏滚动条
摘要：添加样式：元素名::-webkit-scrollbar{display:none;} 阅读全文
posted @ 2020-08-28 18:27 webpon 阅读(143) 评论(0) 推荐(0)
flex(弹性布局）
摘要：链接 阅读全文
posted @ 2020-08-27 08:57 webpon 阅读(116) 评论(0) 推荐(0)
块级元素水平垂直居中方法
摘要：链接 阅读全文
posted @ 2020-08-22 10:24 webpon 阅读(103) 评论(0) 推荐(0)
css3系列之transform详解translate
摘要：translate translate这个参数的，是transform 身上的，那么它有什么用呢？ 其实他的作用很简单，就是平移，参考自己的位置来平移 translate() translateX() translateY() translateZ() translate3d() translate 阅读全文
posted @ 2020-08-22 10:07 webpon 阅读(309) 评论(0) 推荐(0)
动画Animation 常用属性
摘要：动画Animation 常用属性 动画就是由一个个的关键帧组成的。 想实现一个动画的效果，这个时候 1.需要先预设一个动画 @keyframes cc { /* 动画序列：时间节点 */ /* 开始状态 */ /* 节点设置 */ /* 写CSS属性 */ from { transform: tra 阅读全文
posted @ 2020-08-19 22:17 webpon 阅读(625) 评论(0) 推荐(0)
深入理解CSS过渡transition
摘要：详情请点击 文章详情 阅读全文
posted @ 2020-08-19 10:34 webpon 阅读(118) 评论(0) 推荐(0)
背景
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2020-08-17 10:56 webpon 阅读(141) 评论(0) 推荐(0)
用纯css中hover来显示和隐藏其他元素，如子元素，兄弟元素等（不用js，jq做展示或隐藏）
摘要：利用CSS控制元素的显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文
posted @ 2020-08-16 22:57 webpon 阅读(2821) 评论(0) 推荐(0)
body高度为0为什么背景色能充满整个浏览器？
摘要：给body元素设置背景色，但是body没有内容，高度没有填充整个浏览器情况下，浏览器整个窗口都是body设置的背景色，这个是什么导致的？ 一般情况下，我们css控制的最高结点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是bod 阅读全文
posted @ 2020-08-15 10:55 webpon 阅读(307) 评论(0) 推荐(0)
10 分钟理解 BFC 原理
摘要：一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新 阅读全文
posted @ 2020-08-14 22:21 webpon 阅读(187) 评论(0) 推荐(0)
元素的层级
摘要：元素的层级 1.下面的盖住上面的元素 2.z-index大的盖住z-index小的 3.父元素的z-index再大也盖不住子元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="te 阅读全文
posted @ 2020-08-14 17:14 webpon 阅读(200) 评论(0) 推荐(0)
利用绝对定位实现水平垂直居中
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2020-08-14 15:56 webpon 阅读(213) 评论(0) 推荐(0)
CSS的几种定位详解
摘要：CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。 1、静态定位（static） 一般的标签元素不加任何定位属性都属于静态定位，在页 阅读全文
posted @ 2020-08-13 22:45 webpon 阅读(592) 评论(0) 推荐(0)
解决高度坍塌问题
摘要：我们在进行页面布局的时候可以发现元素在脱离文档流后，就会出现高度塌陷问题。 一、什么是高度塌陷？ 通过下面的例子了解什么是高度塌陷。 在页面中设置一个盒子box，其中在嵌套一个子元素小盒子box1。box设置边框宽度，而高度不去设置（高度会由内容撑开） 但是当我们向盒子里面添加内容的时候<div c 阅读全文
posted @ 2020-08-11 17:27 webpon 阅读(343) 评论(0) 推荐(0)

1 2 下一页