摘要:做诸葛书的时候遇到一个问题,就是我插入的元素在端上设备分页被切断,显示很丑。 最后优秀的产品同学告诉我第一版用到一个神奇的属性,容器中途分割 | break-inside。 .actionDom{ -webkit-column-break-inside: avoid; page-break-insi
阅读全文
随笔分类 - Css
摘要:在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头,但是这么容易的属性,为什么会莫名其妙呢?就让我们继续看下去~ 项目里遇到的问题 在我的项目里头遇到
阅读全文
摘要:一、摘要 vertical-align用来指定行内元素(inline)行内块元素(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。也就是说,对于块级元素,vertical-align是不起作用的。 二、作用 1.实现多行文本垂直居中: .shadow{ width:
阅读全文
摘要:原因:img标签自带有3px的空隙,有很多解决方法:
阅读全文
摘要:border-image用于给border(边框)贴上背景图像 语法:border-image:source slice repeat; 一、图片(border-image-source) border-image的背景图使用url()调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即bor
阅读全文
摘要:本篇文章包括(1)介绍@font-face(2)如何在网页中使用@font-face插入特殊字体(3)中文在线@font-face——有字库
阅读全文
摘要:高度塌陷的存在:原因分析 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red so
阅读全文
摘要:1.伪类解决margin-top塌陷: 如果两个不浮动的盒子相互嵌套,对内部的盒子设置margin-top会导致属性被自动转移到外部的盒子上,导致内部盒子的margin-top设置失败最靠谱的解决方式是为父元素添加一个伪类: *****/*伪类解决margin-top塌陷*/.clearfix:be
阅读全文
摘要:input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #bbb; } input:-moz-placeholder, textarea:-moz-placeholder { color: #bbb; } input::-moz-placeholder, textarea::-moz-p...
阅读全文
摘要:大家在做项目的时候有没有遇到一个问题呢 就是一张图片宽度100% 在缩放屏幕的时候图片会被压缩变形!!!那么怎么才能实现图片始终居中而不被压缩变形呢? 接下来让我带领大家解决这个问题 请看代码↓↓↓↓↓↓↓ 下面是css: 摘自:https://www.cnblogs.com/chenchenhao
阅读全文
摘要:前提理解:第一个,less是单独的一种文件,可以理解为css的升级版,完全按照css写也没问题,不过它提供了很多便利的东西,可以省好多代码量。第二个,html只认css,所以需要配套一些软件将less解析成css,引用时候,直接引用css就好。gulp,koala 都是常用的,Koala好像简单且方
阅读全文
摘要:一. 配置/更改vue项目中的资源路径 在vue 开发项目中需要对路径进行设置。最简单的就是设置为绝对路径。 1. 找到项目中的build文件夹下的webpack.base.conf.js,在module.exports .resolve .alias下自定义: 2. 然后就可以在js中直接使用as
阅读全文
摘要:<link rel="icon" href="img/logo.ico" type="img/x-ico" />demo:效果图:代码图:
阅读全文
摘要:css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验。 一、概念: 1.定义 Th
阅读全文