CSS
CSS学习笔记
pg_li
这个作者很懒,什么都没留下…
展开
-
使用sass开发web-components组件
同时执行chokidar监听和webpack server。原创 2024-02-20 16:07:33 · 625 阅读 · 0 评论 -
child常用选择器
first-child 练习父元素下首个子元素样式.first-last-child > h5:first-child { background: #4dff3a; }last-child父元素下最后一个子元素样式 .first-last-child > h5:last-child { background: #fbffbd; }nth-child(n)匹配属于其父元素的第 N...原创 2021-02-18 20:25:53 · 579 阅读 · 0 评论 -
CSS中counter计数器
1、counter-reset 创建或重置一个或多个计数器。none:没有计数器将递增id: 选择器、id、class, number定义默认值counter-reset: counter-reset: one 0 two 1 three 2;;2、counter-increment增一个或多个计数器值。none:没有计数器将递增id: 选择器、id、class, number定义增量, 默认为1counter-increment: one 1...原创 2020-07-15 10:40:41 · 350 阅读 · 0 评论 -
CSS选择器
css选择器优先级 行内样式>交叉选择器>id选择器>类名选择器>标签选择器>*通配符>浏览器对标签预定义的样式>继承的样式 选择器 后代级别选择器 选择器 例子 例子描述 CSS element element div p 选择 <div> 元素内部的...原创 2019-06-17 15:24:43 · 120 阅读 · 0 评论 -
calc在less中计算不准确
背景:在less使用calc方法,width : calc(100% - 16px);结果在编译后浏览器中显示为:原因:less的计算方式跟calc方法有重叠,两者在一起有冲突。解决方案:使用 “~”符号告诉less不需要编译例:width : calc(~"100% - 16px");@diffWidth: 16px;width : calc(~"100% ...原创 2019-03-13 10:33:57 · 522 阅读 · 0 评论 -
CSS学习
1、样式类型外部样式表(External style sheet)<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>内部样式表(Internal style sheet)<head><style>原创 2018-10-17 15:44:28 · 159 阅读 · 0 评论 -
CSS基础动画
1、淡入淡出使用的是angular的库,可动态改变CSS来实现动态效果。动画是通过_quadraticOut函数计算的private _quadraticOut (k) { return k * (2 - k);}<div [ngClass]="{'d3chart-map-topRight-fadesoutOpen': videoFade, 'd3char...原创 2018-07-26 18:07:50 · 208 阅读 · 0 评论 -
地图鼠标样式(参考百度地图)
1、获取图标 点击连接并保存 closedhand.cur openhand.cur2、CSS样式 /*鼠标样式*/ .chart-cursor-d3 { cursor: url("assets/img/charts/openhand.cur") 8 8, default; cursor:grab; /*IE下兼容性处理*/...原创 2018-07-10 11:29:58 · 3373 阅读 · 5 评论 -
谷歌浏览器覆盖input默认样式
一、修改场景:默认的样式通过和背景颜色不一致,有一些突兀,体验不好。二、问题根因:谷歌默认的样式为淡黄色三、解决思路1、覆盖掉默认的颜色 适用场景:背景色或者背景图片的颜色是一致的,且没有变化 &:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px $bg inset !impo...原创 2018-06-28 23:46:45 · 2425 阅读 · 1 评论 -
谷歌浏览器调用webkitRequestFullScreen方法后,设置的背景色只填充可视范围问题。
1、问题根因 谷歌浏览器下默认对全屏设置的背景色是白色,而当前body是不设置高度的或者设置的是100%,导致背景色只对可视范围生效。2、解决思路 设置谷歌浏览器下,背景色,覆盖掉默认的颜色 //各个浏览器下 全屏状态下背景色设置:-webkit-full-screen { background-color: @content-bg !important;}:-moz-...原创 2018-06-07 10:47:22 · 14007 阅读 · 0 评论 -
解决d3.js在angular中添加class样式不生效问题
1、背景 在ng-alain中使用d3.js绘制曲线图,想改变坐标轴的样式。通过.attr('class', 'd3-line-axis')的形式添加样式来覆盖d3.js默认的样式,但是一直不生效。 2、原因 .ts文件中3种添加样式的方式1)template种直接<style></style>2)通过styles: []3)通过st...原创 2018-08-03 14:21:46 · 2533 阅读 · 0 评论 -
svg设置高度后 父级div会比svg高度高4px左右
背景<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div style="background-color: #000"&...原创 2019-06-27 11:28:01 · 2550 阅读 · 3 评论 -
ng-alain通过修改样式实现菜单布局切换
这种样式修改的方式限制太多,且比较麻烦,因此又通过对sidebar-nav进行修改,来实现该功能。第二版。一、页面效果1、默认的左右布局2、切换后的上下布局二、代码实现1、布局切换服务类,用于通知需要改变布局的模块去改变样式import { Injectable } from '@angular/core';import { Subject } fro...原创 2018-06-20 16:04:25 · 6915 阅读 · 1 评论 -
盒模型和BFC
一、深入理解CSS盒模型 如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。基本概念:标准模型 和IE模型CSS如何设置这两种模型JS如何设置获取盒模型对应的宽和高实例题(根据盒模型解释边距重叠)BFC(边距重叠解决方案) 基本概念盒模型的组成大家肯定都懂,由里向外content,padding,b...转载 2018-04-23 09:58:06 · 639 阅读 · 0 评论