css
关注
分享
扫一扫
道雄
在前端的道路上不断学习向前
展开
-
css的尺寸单位
1.rem和em的区别rem和em的区别原创 2020-09-17 18:55:01 · 180 阅读 · 0 评论 -
如何修改input默认表单的样式
1.修改默认样式和添加链接参考链接2.如何在placeholder前面加入图标参考链接2参考链接3原创 2020-09-17 18:49:43 · 456 阅读 · 0 评论 -
css知识总结和实践
1.@import全局定义路径后，@import引入样式文件 @import '~styles/varible.styl'~ 必须要有2.div中的搜索框自适应div中的搜索框自适应重点：规定父元素的宽度，input 100%，然后display：inline-block原创 2020-09-17 18:49:30 · 243 阅读 · 0 评论 -
@font-face的自定义字体
菜鸟教程@font-face的format属性//代码示例@font-face {font-family: "iconfont"; src: url('./iconfont/iconfont.eot?t=1518407379870'); /* IE9*/ src: url('./iconfont/iconfont.eot?t=1518407379870#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('...') form转载 2020-09-17 16:43:19 · 286 阅读 · 0 评论 -
如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）
这种对齐方式有两种情况图片和文字框中都是居中的，这样看起来也是一种对齐情况，如图所示解决办法：文字框设置line-height，然后图片的高度height=文字框line-height，再给图片设置vertical-align=top，这样图片相对外框向上，但是视觉上相对文字框居中。//html <span class="brand"></span...原创 2019-08-02 14:11:24 · 1282 阅读 · 0 评论 -
flex布局
注：移动端尺寸的开发是实际UI尺寸的二分之一一、三等分布局的样式设计对于几等分的布局，可以使用flex布局，其原理是给父元素（也就是包含框）设置display：flex 的样式，子元素（也就是需要等分排列的元素）设置flex:1的样式，这样就能实现等分布局，如下面的代码，父元素是tab，子元素是tab-item<template> <div class="tab"&g...原创 2019-07-30 15:10:22 · 130 阅读 · 0 评论 -
如何解决两个inline-block并排出现空白间隙的情况&&如何进行文字溢出设置
1.如何进行文字溢出设置有时候·我们想实现如上效果，在如果文字内容超出元素框宽度，就以省略号的形式出现，而且只出现一行文字。这是我们需要给父元素设置overflow，white-space以及text-overflow的效果。点击了解white-space属性点击了解text-overflow属性点击了解overflow属性<div class="bulletin-wrapper...原创 2019-08-02 15:41:54 · 862 阅读 · 0 评论 -
用css画三角形的思路
参考地址画三角形的原理解释画三角形的方法其实就是用一个内容填充物为0的div的边框构成，四个边框的相互作用构成了一个直角三角形。<body><style> .triangle { width: 0; height: 0; border-style: solid; border-width: 1...原创 2019-07-17 15:33:21 · 216 阅读 · 0 评论 -
CSS权重以及优先级
权重的级别划分包含了所有的css选择器如果两个选择器作用在同一个元素上，则权重高者生效权重的级别根据选择器被分为四个分类：行内样式，id，类和属性，以及元素。当很多规则都被应用到某一个元素上时，全中决定了那种规则生效。每个选择器都有自己的权重。每个css规则，都包含了一个权重级别。如果两个选择器同时作用到一个元素上，权重高者生效。权重等级根据选择器的种类可以分为四类，也决定了四种不同...原创 2019-03-18 17:11:11 · 567 阅读 · 0 评论 -
认识CSS之animation属性
1.animation 属性是一个简写属性，用于设置六个动画属性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction animation: name duration timing-functio...原创 2019-03-25 11:06:56 · 217 阅读 · 0 评论 -
认识CSS3 transition属性
transition: property duration timing-function delay;1.transition-property：定义过渡的属性，默认是all，都过渡2.transition-duration过度需要的时间，以秒计时3.transition-timing-function：规定速度的速度曲线（linear，ease，ease-in，ease-out，ease...原创 2019-03-25 10:38:40 · 442 阅读 · 0 评论