CSS
小鲤鱼听听
前端开发工程师,Gitee 开源组织“奇文社区”成员,负责“奇文网盘”、“奇文股票”等开源项目
展开
-
CSS水平和垂直居中问题:用display:flex解决
使用弹性盒子,居中变的很简单,只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style&am原创 2019-02-14 17:25:25 · 1238 阅读 · 0 评论 -
前端基础入门课程推荐
前端基础学习网站https://www.runoob.com/ 菜鸟教程,你所想学的在这里都能查到。前端基础、移动端、后端、服务器、开发工具、版本管理器、主流浏览器介绍、UI框架、JavaScript框架等等。建议学习者在学习以下四门课程时可以随时结合菜鸟教程查看,这样能理解透彻、快速掌握基础知识。 HTML+CSShttps://www.imooc.com/learn/9 个...原创 2019-08-15 09:34:34 · 662 阅读 · 0 评论 -
浏览器调试工具如何查看placeholder值
1.谷歌浏览器设置如下:打开开发者工具,点击右上角三个“.”,进入Settings;2.找到Preferences——Elements,勾选Show user agent shadow DOM3.然后在元素的Styles就能看到placeholder的颜色了...原创 2019-07-31 11:20:25 · 3096 阅读 · 4 评论 -
IE10+设置placeholder的颜色等样式的正确写法
:-ms-input-placeholder后面跟input元素的类名class<input class="m-input" placeholder="请输入验证码" />:-ms-input-placeholder.m-input { color: #ccc; /*还可以设置font-size等属性*/}...原创 2019-07-31 11:05:22 · 1149 阅读 · 0 评论 -
CSS伪类与伪元素的区别
概念:伪类和伪元素都是用来添加一些选择器的特殊效果。区别:1.伪类包含两种:状态伪类和结构性伪类。(1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现改样式,而进入另一状态后,该样式也会失去。常见的状态伪类主要包括::link 应用于未被访问过的链接;:hover 应用于鼠标...原创 2019-03-08 11:47:39 · 146 阅读 · 0 评论 -
margin和padding值为百分数%时的规则
可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式...原创 2019-03-14 18:32:49 · 494 阅读 · 0 评论 -
外部引入CSS时的link和@import的区别
页面中使用CSS的方式主要有3种行内添加定义style属性值 页面头部内嵌调用 外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式XML/HTML代码 <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /..原创 2019-03-14 18:22:09 · 239 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、...原创 2019-03-14 17:36:46 · 143 阅读 · 0 评论 -
CSS Sprites
1.简介CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。2.优点(1)CSS Sprites能很好地减少网页的h...原创 2019-03-14 17:29:43 · 304 阅读 · 0 评论 -
主流浏览器内核及其私有属性CSS前缀
内核 浏览器 私有属性CSS前缀 mozilla Firefox,flock等 -moz webkit safari,chrome等 -webkit opera opera浏览器 -o Trident IE浏览器 -ms 以上只针对css前缀...原创 2019-03-14 16:40:02 · 909 阅读 · 0 评论 -
CSS画三角形
具体代码可以参加我的GitHub:https://github.com/liyating8023/usualLog.git这里解剖一下画三角形的思路,分为直角三角形和向内三角形两种。一、直角三角形比如想画左上三角形,看图可以有两种实现方法:绿色下面和蓝色右边的两种。绿色下面的实现方法:不要border-right,就是切掉纵轴的右边;然后不要border-top,即切掉横轴的上面,...原创 2019-03-14 15:08:18 · 206 阅读 · 0 评论 -
用两种方法实现选项卡切换:纯CSS和jQuery
第一种用纯CSS实现:要点: 选项卡内容用块元素div,外层套父元素tabContent,父元素的高度和每一个子元素的高度均相同,同时父元素添加css样式overflow:hidden,目的是让多余的子元素隐藏,由选项卡的a标签的href属性对应的id来寻找元素使其显示<!DOCTYPE html><html> <head> <meta ...原创 2019-02-28 15:30:45 · 722 阅读 · 0 评论 -
vue项目中npm安装sass,less,stylus
用vue-cli脚手架搭建出来的,默认是用标准css的。如果你想用sass,less,stylus就需要自己手动安装一下了。进入项目文件夹,然后安装(这里以stylus为例)stylus和stylus-loader,安装后面需要加上--save-dev,这样才会被添加到packjson文件中。npm install stylus stylus-loader --save-dev安装成...原创 2019-02-13 14:15:55 · 321 阅读 · 0 评论 -
Vue中scoped穿透 修改子组件样式
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scopedstylus的样式穿透 使用 >>> 外层 >>> 第三方组件 { 样式 } ...原创 2019-02-13 11:25:34 · 379 阅读 · 0 评论 -
CSS3中的box-sizing属性设置框大小
CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。不使用 CSS3 box-sizing 属性默认情况下,元素的宽度与高度计算方式如下:width(宽) + padding(内边距) + border(边框) = 元素实际宽度height(高) + padding(内边距) + border...原创 2019-02-15 09:56:56 · 2614 阅读 · 0 评论 -
用 justify-content 属性设置子元素两端对齐
外层元素的 justify-content 属性设置为space-between即可实现子元素两端对齐<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>原创 2019-02-14 17:35:07 · 7565 阅读 · 0 评论