![](https://img-blog.csdnimg.cn/20191226115708722.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
CSS
南乔几经秋
这个作者很懒,什么都没留下…
展开
-
CSS选择器总结
1、基本选择器(1)标签选择器,示例表示选择所有p元素p { font-size:15px; color:#00796b; }(2)类选择器,示例表示选择 class="my-font" 的所有元素.my-font { font-size: 18px; font-weight: bold;}(3)ID选择器,示例表示选择 id="poe...原创 2019-11-01 17:10:26 · 220 阅读 · 0 评论 -
记:flex布局遇到white-space:nowrap失效的问题
在写界面时遇到一个问题:在flex布局中想实现文字超出隐藏并显示省略号,结果使用white-space:nowrap后,flex布局失效了....想实现的效果:结果:解决办法:给包含文字元素的父元素设置min-width: 0总结:white-space:nowrap会影响flex布局下未设定宽度的元素,而只要对元素的宽度有一个下限设定就可以解决这个问题,不管是最小...原创 2019-08-30 17:14:20 · 4930 阅读 · 0 评论 -
css常见单位px、em、rem、vh、vw、vmin、vmax说明
1、px相对单位,像素,相对于显示器屏幕分辨率而言2、em相对单位,相对于父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值3、rem相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性4、vwvw:viewpoint width,视窗宽度,1vw等于视窗宽度...原创 2019-07-19 14:11:18 · 374 阅读 · 0 评论 -
浅谈css3的box-sizing属性
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,其属性值有两种:content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪异盒模型,低版本IE浏览器中的盒模型现代浏览器和IE9+默认值是content-box。区别: content-box:padding和border不被包含在定义的w...原创 2019-04-04 18:15:25 · 186 阅读 · 0 评论 -
自定义滑动条input[type="range"]样式
有时候我们需要修改浏览器的原始滑动条样式,并针对不同浏览器兼容,首先来看一下不同的浏览器的原始滑动条:chrome: firefox: IE: 下面是我们要达到的效果:chrome、firefox: IE: 直接上代码:<!DOCTYPE html...原创 2019-03-05 14:26:18 · 1431 阅读 · 0 评论 -
Flex布局
1 基本概念采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。Flex项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做...原创 2019-01-30 18:23:24 · 152 阅读 · 0 评论 -
Less 颜色操作函数Mix的计算方法
Less Mix混合两种颜色以及不透明度描述它用于混合两种颜色以及不透明度。 它有以下参数: color1 :它代表一个颜色对象。 color2 :它代表一个颜色对象。 weight :这是一个可选参数,通过在两种颜色之间提供百分比平衡点来指定元素的权重。默认的比例是 50%,这意味着两个颜色各占一半,如果指定的比例是 25%,这意味着第一个颜色所占比例为 25%...原创 2018-12-29 15:33:26 · 2894 阅读 · 0 评论 -
滚动条样式修改
废话不说,直接上代码----IE(只支持修改颜色):scrollBar{ width: 250px; height: 700px; padding: 10px; overflow: auto; /*三角箭头的颜色*/ scrollbar-arro...原创 2018-11-26 17:53:32 · 1155 阅读 · 1 评论 -
css3修改input[type=radio]样式
在项目中经常,需要使用单选按钮input[type=radio],但是浏览器的默认样式可能与我们需要实现的样式差距很大,可以使用css3来实现想要达到的效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>&am原创 2018-09-20 16:35:41 · 11210 阅读 · 0 评论 -
input框type=number时去掉上下箭头
<input type="number" ...><style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -...转载 2018-08-08 11:47:42 · 2819 阅读 · 0 评论 -
CSS 设置z-index无效原因
z-index设置无效原创 2017-12-19 16:08:29 · 3606 阅读 · 1 评论 -
文字不换行,超出部分显示省略号
这个效果常常会用到(其中文字占两行后超出隐藏为css3属性,且IE 、火狐不支持)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .content1{原创 2017-12-24 10:54:39 · 1216 阅读 · 0 评论