![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html和css
AboyL
zzz
展开
-
如何解决input,inline-block元素间的空隙
在我们制作类似登陆框的东西的时候,需要用到label和 input text,但是实际上他们之间会存在空隙 用户名: 密码: 我们这里对登陆按钮进行了left:60px;label的width也是60px;可是没有对齐,原因就是用户名和后面的框存在空隙这个时候我们设置form{ p原创 2017-01-13 22:55:36 · 2517 阅读 · 0 评论 -
css的绝对定位与冒泡
为什么会把两个放在一起说呢? 来源于一个小案例,我们都知道事件冒泡机制,当你点击一个dom的时候,会先从下面的dom开始触发事件 也就是说 <div id="a"> a <div id="b">b</div> </div> <script> funct原创 2018-07-20 21:03:28 · 1707 阅读 · 0 评论 -
高效前端-web高效编程与开发实践读书笔记:css-布局-三列布局使用float实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2018-07-08 00:13:20 · 270 阅读 · 0 评论 -
高效前端-web高效编程与开发实践读书笔记:css-如何设置多行文本居中
很多时候我们需要设置文本居中,这个时候我们知道应该设置,外层的容器的height跟line-height一致,就可以实现单行文本居中了,但是这个样子只适合单行,如果我们要设置多行文本居中,需要怎么做呢?我们要做的就是让多行文本相对外部容器是一行一个模型。 因此,设置外部依旧是height==line-height.再把多行文字添加进入一个span容器中,设置display为inline-bl...原创 2018-07-07 23:54:29 · 546 阅读 · 0 评论 -
如何控制input的输入方向
inoput的输入方向是从左向右的,但是有的时候我们希望的是多个input右对齐 这个时候我们可以使用两个办法 一个是设置 dir设置<input type="text" dir="rtl" />这样就是从右向左输入了。但是这个样子有一个问题,那就是我们的光标依旧是在左边,看起来很奇怪。 这个时候我们可以使用css的text-align的属性设置text-a...原创 2018-07-11 13:26:58 · 3464 阅读 · 0 评论 -
vue样式穿透问题
今天在写项目的时候需要去修改一个引入的组件的样式,因为使用的是stylus,所以就可以用>>>进行穿透,但是一开始的时候失败了,后来才发现问题在于两点。一是不可以使用层叠,也就是不可以使用.class >>> .class { .class{}}只可以使用一级也就是.swiper >>> .vux-icon-...原创 2018-07-09 20:43:05 · 2314 阅读 · 0 评论 -
如何在react项目中使用阿里iconfont字体库的svg图标
阿里的iconfont字体库是一个拥有很多字体图标资源的字体库,我们可以看到里面有很多的多彩图标。但是传统的classname方法跟unicode方法都没有办法支持多彩字体库。只有svg格式的图片才支持。我们怎么才能使用这个呢?首先我们将字体图标加入项目以后,在我的项目中会有三份代码生成。这个时候我们把把Symbol的代码复制,然后粘贴到了我们自己在项目中新建的font.js文件中就好了。随后我们...原创 2018-04-01 11:35:22 · 14410 阅读 · 3 评论 -
css自问自答(3)效果篇
1、怎么用雪碧图去实现动画效果 在需要产生动画的地方使用background-position进行移动。然后使用transtion设置动画效果2、background-size:cover跟contain有什么区别。 两个都是等比例放缩。但是cover的放缩规则是尽量不超过容器,也就是会导致图片的一部分不显示。而contain的是尽量保证图片。如果容器宽高比跟背景图原创 2018-01-07 15:32:07 · 383 阅读 · 0 评论 -
css自问自答(2)布局篇
1、relative,absolute,fixed的偏移有什么区别 从对其他元素的影响上来看,relative不脱离文档流,即使进行偏移,其他元素依旧认为他在原来的位置上面,而其他两个脱离文档流,其他元素会认为这两元素不存在。 从参照物来说。relative的参照物是自己,而absolute的参照物是理他最近的父relative元素。flixed是窗口2、有那些清除浮动的方原创 2018-01-07 15:31:31 · 303 阅读 · 0 评论 -
css自问自答(1)
1、各个选择器的权重是什么情况,有没有可以超越这些权重情况的存在 id 100 类选择器跟伪类选择器 10 元素选择器和伪元素选择器 1 其他 0 !important 最高,其次是style属性,然后再去计算权值,权值计算不进位2、css的伪类选择器跟伪元素选择器是什么,原创 2018-01-03 12:51:53 · 340 阅读 · 0 评论 -
vscode 取色器插件
vscode取色器原创 2017-07-23 16:50:18 · 38710 阅读 · 3 评论 -
CSS的first-child、nth-of-type
这几个选择器其实我是很懵逼的。因为first-child的使用是 p:first-child这种形式 这个很容易就让人想到,first-child应该位于某个元素的后端,他就想是伪元素或者伪类那个样子,但是这种思考其实是错误的。 .child:first-child很容易让人以为,选择的是 .child元素的第一个元素,也就是 <div class="father">...原创 2018-07-20 23:17:14 · 426 阅读 · 0 评论