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