css
关注
分享
扫一扫
LPLIFE
学习接受学习
展开
-
css画个正方形
css画个正方形方式1方式2html效果参考方式1/* 兼容性好 */.use-transform { width: 10%; height: 0; padding-bottom: 10%; border: 1px solid #000;}方式2使用 vw: 为什么不用%？ % 是相对于父元素的大小设定的比率，body默认的宽度为视窗的宽度，没有内容时高度为0，而vw、vh 是视窗大小决定的，不取决于内容。vw、vh 优势在于能够直接获取高度，而用 % 在没有设原创 2021-07-02 14:56:43 · 1322 阅读 · 0 评论 -
CSS画0.5px的线
i { display: inline-block; width: 170px; height: 1px; background: #ff9db5; transform: scaleY(0.5); }如下图：原创 2020-09-03 16:46:18 · 834 阅读 · 0 评论 -
css的回流和重绘
浏览器的的渲染过程1.将 HTML 文档解析成 DOM 树2.将 CSS 解析成 CSS 规则树3.将 DOM 树和 CSSOM 合并为 Rendering Tree（渲染树）4.计算元素位置5.遍历 render 树 进行绘制页面回流（重排）：页面中的某个部分发生了改变并且影响了布局，需要重新排页面结构重绘：仅仅样式变化，不会引起页面结构变化，如改变字体颜色、边框颜色、背景颜色等可以想象成搭积木，如果我们抽离其中的一块木块或者把添加一块木块，那么原来的结构会发生改变了，这时..原创 2020-05-25 23:05:13 · 308 阅读 · 0 评论 -
常用css动画和图形
若隐若现@keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; }}无限循环@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate.原创 2020-05-13 00:20:14 · 342 阅读 · 0 评论 -
一些兼容性问题
火狐浏览器这些写会失效： transform:translateY(-56%);改为这样写： transform: all translateY(-56%);ios input输入光标会很长：不给input设置高度，使用padding或者仅设置外层div的高度、或者改小line-height<div> <input type="text...原创 2020-02-17 19:39:58 · 224 阅读 · 0 评论 -
img标签的alt和title的区别以及会引发的隐性bug
img是html 中的标签，主要用来定义图像。是一个空标签，意思是说，它只包含属性，并且没有闭合标签。必要的常用的属性：alt： 当图片加载不出来时作为替代文本出现如下图：title：鼠标移动到元素上的提示或者说明如下图： src：图像的url地址height：设置图像的高度width：设置图像的宽度需要注意的点：src属性存在，但为空的时候，浏览器会去加载图片资源，并...原创 2020-01-13 21:57:00 · 682 阅读 · 0 评论 -
CSS的替换元素
CSS的“替换元素”：通过修改某个元素的属性值呈现的内容就可以被替换的元素。替换元素的特性：内容不受页面上的CSS的影响。也就是样式表现在CSS作用域之外 大部分有自己默认的尺寸，<img>标签没有 在很多CSS属性上有自己的一套表现规则 所有替换元素都是内联元素，都可以在一行显示 我们无法改变这个替换元素内容的固有尺寸如下图：各元素语法<img&g...原创 2020-01-04 02:02:52 · 954 阅读 · 0 评论 -
css实现过渡移动坐标位置
需求：过渡移动坐标位置。使用下面的两个css属性来实现。transition：实现过渡效果。具体用法：transitiontransform ：使用这个属性可以将元素旋转，缩放，移动，倾斜等，常见的是居中。具体用法：transform<!DOCTYPE html><html lang="en"><head> <meta chars...原创 2019-12-13 23:49:44 · 3308 阅读 · 1 评论 -
css高度从0 到auto过渡
最近朋友问了这样的问题：css高度从0 到auto过渡，上拉或者收起主要利用scrollHeight：scrollHeighttransition：transitionmaxHeight：maxHeight应用场景：点击收起、下拉 然后进行过渡，开发中应该经常会遇到这样的需求直接上代码：<!DOCTYPE html><html lang="zh-cn">...原创 2019-12-06 18:09:35 · 1297 阅读 · 0 评论 -
mark、em、strong、b、i
共同点：都是用来处理文本的1. <b>：加粗，表示突出显示关键词的作用，但是并不强调其重要性，字体被设置为bold，属于物理标记<p><b>加粗</b>和<b></b></p>如下图：2. <em>（emphasize）: 强调，表示对文本的意思有改变作用，我们说话的时候通常会对某...原创 2019-12-05 14:43:54 · 1209 阅读 · 0 评论 -
fixed相对于父元素定位
position:fixed;定位，只要不同时写top、left和top、right值，他就会默认居于父级进行定位。只是位置会偏左。手动调整就好。.div{position:fixed;top:80px;margin-left:60px;width:340px;}top: 相对父元素高度弹窗内有悬浮提示，内容高度固定（有滚动条）如下：...原创 2019-10-14 18:30:57 · 4576 阅读 · 0 评论 -
挺有趣的css题，看看有没有踩坑的
.blue { color: blue; } .red { color: red; } <div class="blue red">这是什么颜色</div> <div class="red blue">这是什么颜色</div>请问到底是什么颜色？答对了吗？原因：...原创 2019-07-10 15:43:39 · 196 阅读 · 0 评论 -
ios input 提示不居中
需要单独写出：input::-webkit-input-placeholder{line-height: 1.5;}原创 2019-05-15 15:46:12 · 858 阅读 · 0 评论 -
placeholder设置字体颜色
使用伪元素： input { border: none; outline: none; background: rgba(255, 255, 255, 0); width: 500px; outline: none; &::placeholder { color...原创 2019-05-05 17:17:57 · 5534 阅读 · 0 评论 -
css使用弹性布局/定位布局实现三栏布局
三栏布局：初学css的时候，什么是三栏布局？好高大上的样子。简单来说： 就是网页分成三块，中间自适应，左右两边固定应用场景：视频播放进度条，两边固定，中间进度条根据电子屏幕自适应长度。弹性布局（移动端使用弹性布局真是非常方便，可以自己了解一下）来实现：<!DOCTYPE html><html lang="en"><head> <met...原创 2019-04-28 01:08:33 · 1710 阅读 · 0 评论 -
盒子模型
在网页布局中,为了使网页中各个元素能合理地进行组织,通过研究总结出了一套完整地,有效地原则和规范,这就是盒子模型.盒子模型由content(内容),border(边框),padding(内边距),margin(外边距)共四个部分组成. 一个盒子实际上在页面上占据地控件是由"内容+内边距+外边距+边框"组成的,可以通过设定盒子的border,padding和margin来实现各种各样的排版效果...原创 2018-06-08 13:01:20 · 207 阅读 · 0 评论 -
如何区分块级元素和行内元素
块级元素 :总是以一个块的形式表现出来,并和同级的兄弟一次垂直排列,左右撑满,比如<li>,<p><hn>,总是不会排在同一行,而是和相邻的<li>垂直排列,简单来说,就是标准文档流下它会自动换行,并不会挤在一行上.就像柜台买票排队,按照正规流程,应该是自动排队,并不能挤在一条上在同一个窗口服务,那不是乱套了吗?但是特殊情况下还是有的(这个就是靠...原创 2018-06-08 13:21:37 · 1765 阅读 · 0 评论 -
为什么设置css的 border-color属性值可以画出三角形?
先来看几张图:1.中间有width,无height2.中间无width,有height3.中间有width,也有height4.即无 width,也无height5. <p> 中间无width,无height,但是进行边框透明处理 得到一个三角形</p>上边这些图案其实根本不能算是一个完整的内容,而是仅仅利用边框的属性: 1. border-width:这个属性能够...原创 2018-06-09 10:52:11 · 1091 阅读 · 0 评论 -
使用媒体查询在屏幕宽度改变的时候实时更改样式
媒体查询需要一层层查找下去修改，否则无效当屏幕宽度小于1024的时候，.time-box里头的.data内容被隐藏 <li class="time-box"> <div class="time">{{systemTime}}</div> <div class="date"&原创 2018-07-25 18:06:01 · 2930 阅读 · 0 评论 -
双飞翼布局
双飞翼布局: 两边定宽,中间自适应(随着屏幕宽度的大小而改变),如下图:贴上代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:...原创 2018-08-22 23:36:10 · 292 阅读 · 0 评论 -
自适应内部元素
如下图:现在需要做的就是,让文字的宽度自适应图片的宽度,也就是如下图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2018-09-09 23:42:54 · 260 阅读 · 0 评论 -
中间宽度固定,两边自适应
小白<!DOCTYPE html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA原创 2018-11-03 13:25:29 · 575 阅读 · 0 评论 -
固定高度的垂直居中
有没人跟我一样,觉得js比css好学多了原创 2018-11-04 21:33:08 · 565 阅读 · 0 评论 -
简单的flex布局
下定决定心好好学CSS,CSS真是要去感受它的存在!flex布局,刚开始像阅读一样看,看不明白..,于是就敲代码,然后就明白了,当你有不懂的地方,直接找个教程敲代码就容易懂了.如下图：固定只显示3列，超出的自动换行。 上代码： <!DOCTYPE html><html><head> <meta charset="ut...原创 2018-11-21 23:51:03 · 238 阅读 · 0 评论 -
vue跑马灯效果
如下图片，会自行向 上“滚动” <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯 </title> <script src="https://cdn原创 2018-12-25 01:05:11 · 350 阅读 · 0 评论 -
解决ios固定定位失效问题
1.把需要固定定位的拆分出来，单独的一层2.需要滚动的单独一层3.看到最后需要滚动的 height: 100%; margin: 0 auto; position: fixed; top: 0; left: 0; bottom: 2px; overflow-y: scro...原创 2019-01-17 18:42:43 · 4795 阅读 · 0 评论 -
css文字超出隐藏
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;输入: 我是一只小毛炉，效果(显示多少自己控制)：...原创 2019-03-04 16:16:33 · 3965 阅读 · 0 评论 -
CSS背景
强制打个酱油 有些知识反反复复地看,你就会发现每一次看到的,理解的程度都不一样.CSS背景属性用于定义HTML元素的背景CSS属性定义背景效果:1. background-color(背景颜色): 该属性定义了元素的背景颜色CSS种,颜色值通常以以下方式定义:十六进制 - 如: "#ff0000"RGB - 如: "rgb(255,255,0)"颜色名称 -如: "red"2. backgr...原创 2018-06-06 20:01:33 · 177 阅读 · 0 评论