随笔分类 - CSS
摘要：1. 空格 —— “后代选择器” 例如下面这个例子，表示div元素里面所有的p元素 div p { ... } 2. > —— “子选择器” 例如下面这个例子，表示div元素里面所有的子代（不含孙代及以后）p元素 div>p { ... } 3. ~ —— “兄弟元素选择器” 例如下面这个例子，表示
阅读全文
摘要：前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为300px,中间自适应，可以通过几种方法来实现？以及
阅读全文
摘要：第一种: 在组件中直接使用style 不需要组件从外部引入css文件，直接在组件中书写。 import react, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundC
阅读全文
摘要：一、圆角边框 border-radius:5px; 二、多背景图 background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 三、颜色和透明度(由原来的rgb到现在的rgba) backg
阅读全文
摘要：一、设置好看的单边框表格 分别给table标签和td标签设置不在同一方向的border属性，如下table设置‘左上’边框，td设置‘右下’边框。其他设置方式同样可以实现。 table{ border-right: 1px solid; border-top: 1px solid; /*相邻边框被合
阅读全文
摘要：设置鼠标指针放在一个元素边界范围内时所用的光标形状，需要对元素的css属性cursor进行设置。cursor属性可能的值： default 默认光标（通常是一个箭头） auto 默认。浏览器设置的（user agent stylesheet）光标。 crosshair 光标呈现为十字。 pointe
阅读全文
摘要：第一种: 在组件中直接使用style 不需要组件从外部引入css文件，直接在组件中书写。 import react, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundC
阅读全文
摘要：一、公众号设置 注册企业微信，在应用与小程序栏目中，设置可信域名，配置公众号菜单。可信域名不得不说下，在最初开发时，认为设置并验证后，微信认证接口会实现跨域请求，其实并没有。所以全在H5端还得配合服务端完成票据获取等操作。 二、开发步骤 资源引入 开发文档地址 https://work.weixin
阅读全文
摘要：在项目中，我们使用img标签加载图片，有时候图片地址有可能失效，获取路径问题，导致图片加载失败，img标签就会显示alt内容。这时候用户体验不是很好，所以就需要显示一张默认图片。 第一种方式：使用jquery_lazyload插件实现图片懒加载。只需要在src中写上默认图片地址即可。 <img sr
阅读全文
摘要：设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>
阅读全文
摘要：html 1、关闭首个字母大写（html） <input type="text" autocapitalize="off"/> 2、伪类:active失效 body class="" onmousemove="" ontouchstart="" meta 1、设置页面的编码（HTML） <meta
阅读全文
摘要：Less和css的区别 html和css不属于编程语言而是属于标记语言,很难像js一样定义变量、编写方法、实现模块化开发等。LESS是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。使用LESS基本上按照这样的步骤：编写LESS代码，使用NODE
阅读全文
摘要：用过elementUI组件应该会知道它内置一个滚动效果，官网对此组件没有相关文档,也是细心网友发现的。 <el-scrollbar></el-scrollbar> 将会出现滚动的内容放到上述标签内就可以了。 这里要简单的设置一下，将标签的height设为100%，读者查看效果的时候，会出现一个横向的
阅读全文
摘要：发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。(贫穷使我节省。。。。。。。。。。) 闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this： 看着挺酷炫的还不错 就看了下实现方式。还挺简单的。 附上demo <!DOCTYPE html> <html> <head>
阅读全文
摘要：作为前端，我们每天都在与css打交道，那么css的原理是什么呢？ 一、浏览器渲染 开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图： 正如上图所展示的，我们浏览器渲染过程分为了两条主线：其一，html Parser 生成的 DOM 树；其二，CSS Parser 生成的 Style Rule
阅读全文
摘要：contain 为何？ 这个 contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系；我们可以把它看做一个iframe。跟iframe很相似，它能建立起一个边界，产生一个新的根布局；保证了它和
阅读全文
摘要：前一段时间，有很多关于用css构建的“键盘记录器”的讨论（源代码见：https://github.com/maxchehab/...）。 有些人要求浏览器“修复”它。 另有一些人挖掘得更深一些，发现它只影响使用react及类似框架编写的网站，并为此指责react。 不过真正的问题在于第三方内容是不是
阅读全文
摘要：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 在网页的<head>中增加以上这句话，可
阅读全文
摘要：作为前端，我们每天都在与css打交道，那么css的原理是什么呢？ 一、浏览器渲染 开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图： 正如上图所展示的，我们浏览器渲染过程分为了两条主线：其一，html Parser 生成的 DOM 树；其二，CSS Parser 生成的 Style Rule
阅读全文
摘要：字体是如何渲染的 解码 Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息，这一般有最高的优先级； 网页本身 meta header 中的 Content-Type 信息的 charset 部分，对于 HTTP 头未指定编码或者本地文件，
阅读全文