CSS
关注
分享
扫一扫
YooHoeh
热爱可抵岁月漫长
展开
-
移除safari浏览器点击出现蓝框
a:focus,input:focus,p:focus,div:focus{ outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; }原创 2021-05-11 12:44:55 · 2018 阅读 · 1 评论 -
REM——适合移动开发的自适应方案
文章目录1.什么是REM2.REM和EM的区别3.手机端方案的特点4.使用JS动态调整REM5.REM与其他单位同时存在6.在SCSS里使用PX2REM1.什么是REM先来认识几个常见单位：px：像素，这个大家都知道。vh：viewport height，视窗高度，是指占整个浏览视窗高度的百分数。vw：viewport width，视窗宽度，是指占整个浏览视窗宽度的百分数。em：一...原创 2019-03-17 11:08:58 · 7899 阅读 · 0 评论 -
通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏，在这里分享并记录几个有难度的答案1. Flexbox Froggy通过调整CSS样式来使各种青蛙回到对应的荷叶上，游戏默认难度为Beginner会有提示，可以在下面的settings关闭提示，一共24关，感觉只有17和24有点疑惑，这里标记一下答案Flexbox Froggy 17关Flexbox Froggy 24关## 2. ...原创 2019-03-01 20:53:39 · 543 阅读 · 0 评论 -
CSS文字垂直居中的一些问题
说到CSS文字垂直居中，很多初学者都喜欢用调整行高等于div高度的方式来达到效果，div { height:30px; line-height:30px;}但其实这么做会遇到一个问题：多行文本溢出父元素。所以还是使用div{ padding:8px 0;}的方式比较稳妥...原创 2019-02-24 17:44:00 · 1247 阅读 · 0 评论 -
CSS文字溢出处理问题
单行省略div { white-space:nowrap; //断行处理：无断行 text-overflow:ellipsis; //文字溢出处理：省略号 overflow:hidden; //溢出处理：隐藏}多行省略不支持IEdiv { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vert...原创 2019-02-24 17:10:36 · 976 阅读 · 0 评论 -
使用CSS达到文字首尾对齐效果
在制作表单的时候经常会遇到需要不同个数的文字首尾对齐，比如：<span>姓名：</span><span>联系方式：</span>姓名：联系方式：有些人会使用直接在姓名之间添加&nbsp(No Break space)的方式来达到对齐效果例如：<span&原创 2019-02-23 21:14:36 · 1818 阅读 · 0 评论 -
影响CSS的margin合并的几个属性
很多人知道，在CSS中存在Margin合并的现象，比如下代码：<style>div { margin:10px; height:100px; background:red;}</style><body> <div></div> <div></div></body>原创 2019-02-23 16:00:58 · 227 阅读 · 0 评论 -
Flex核心属性整理
main axis和cross axis的位置不一定是水平和垂直的，以flex-direction的值即为主轴方向justify-content:主轴对齐方式space-between:将多余空间放在中间space-around:将多余空间放在两边，和space-between的区别就是最两边会有空间flex-start:都靠齐主轴的首部（main start）flex-end...原创 2019-02-27 17:21:42 · 502 阅读 · 0 评论 -
使用CSS选择器实现选择指定子节点
HTMLCSS具体效果其他事例事例图片来自MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child原创 2019-02-27 15:47:02 · 2187 阅读 · 0 评论 -
隐藏"Input"标签默认样式
input { width: 400px; border: none; background-color: inherit; border-bottom: #fbfee9 solid 3px; font-size: 2.4em; color: snow;}input:focus { background-color: inherit; border: none;...原创 2018-12-15 20:41:52 · 1481 阅读 · 0 评论 -
原生CSS设置网站主题色—CSS变量赋值
定义CSS变量在css文件顶部定义css变量，注意必须以--开头，使用:root包括这几个变量:root { --main-bg-color: #ff7675; --color1: #fbfee9; --color2: #5a4446; --color3: #8baca1; --color4: #ffeec4;}使用在需要的地方使用，使用var()包裹css变量#...原创 2018-11-28 18:04:19 · 861 阅读 · 0 评论 -
摆脱CSS浏览器私有属性-moz， -ms， -webkit
为了兼容各个浏览器之间的私有属性，前端开发人员在写css的时候需要给一些css属性添加多个私有前缀，非常麻烦。这里给大家分享一个简单的方法可以让你以后无需手动给CSS添加私有属性。 -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性 -o代表opera私有属性 安装项目目录内终...原创 2018-07-26 21:41:01 · 2657 阅读 · 0 评论 -
JSX设置CSS样式详解
JSX设置CSS样式详解1. 使用className设置样式(CSS的其他选择器也是同理)(1)定义一个CSS文件style.css,和普通CSS一样定义class选择器.sty1{//和普通CSS一样定义class选择器 background-color: red; color: white; font-size: 40px;}(2)在JSX中导入...原创 2018-07-20 17:11:21 · 10666 阅读 · 2 评论 -
React使用Styled-Componets来添加样式
React使用Styled-Componets来添加样式Styled-Comonents是用JS中ES6 语法的方式来管理CSS样式的一个组件，解决了在import CSS文件时样式重复安装项目根目录下打开bashyarn add styled-components 新建一个style.js文件来添加样式 注意，这里不是用style.css文件。...原创 2018-07-19 10:35:34 · 2668 阅读 · 0 评论 -
统一各浏览器CSS 样式——CSS Reset
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, s...原创 2018-07-17 16:15:07 · 4278 阅读 · 0 评论 -
纯CSS实现展开列表
效果预览 以下为源码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><style>*{ padding:0;原创 2018-05-26 20:37:04 · 6077 阅读 · 0 评论 -
使用纯CSS制作展开合并立方体特效
显示效果 源码<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css动画练习</title></head><style>bod原创 2018-05-26 20:30:16 · 702 阅读 · 0 评论