css
css
Cupid510
这个作者很懒,什么都没留下…
展开
-
css的filter方法,给图片添加滤镜
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width...原创 2021-09-23 13:49:00 · 1056 阅读 · 0 评论 -
css隐藏元素的方法和区别
css隐藏元素的方法display不占据页面布局,子元素继承Visibility占据页面布局,子元素不继承(可通过visibility: visible,让子元素显示)Opacity占据页面布局,子元素不能显示Position通过定位移出可视区域,子元素可显示 <style> .box{ width: 300px; height: 300px; background-color: aqua; /* display: non原创 2022-03-28 13:19:23 · 131 阅读 · 0 评论 -
css 使页面一秒变灰
利用css的filter函数,grayscale的参数值越大,页面灰色滤镜越明显filter: grayscale(100%);原创 2022-01-11 11:24:51 · 234 阅读 · 0 评论 -
移动端line-height设置文字不居中问题
方法一:line-height: normal;height: auto;padding: 7px 0;方法二、1、利用flex布局中的垂直居中属性实现垂直居中,父元素设置display:flex;height:1rem;align-items: center;2、子元素transform: scale(0.5);transform-origin: left center;方法三、由于安卓在排版的时候会计算字体属性,所以可设置为中文字体font-family: -apple-sys原创 2021-10-22 14:53:49 · 654 阅读 · 0 评论 -
在css中使用js定义的变量
<template> <h1>Vue</h1></template> <script>export default { data () { return { border: '1px solid black', color: 'red' } }}</script> <style scoped>h1 { color: var(--color); bo原创 2021-09-15 19:45:05 · 223 阅读 · 0 评论 -
ios解决大转盘层级以及闪烁bug
ios中大转盘层级问题1、z-index不生效使用transform: translateZ(自定义数字)代替z-index注意:要加单位,2、translateZ可能会使其他元素闪烁(比如打开弹层的时候,大转盘会闪烁)可在整个大转盘的父级添加translateZ(0).box { translateZ(0) -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transfo原创 2021-09-08 08:42:52 · 540 阅读 · 0 评论 -
最小高度的兼容方法
在我们正常的项目开发中,最小高度直接用min-height即可!如果考虑兼容的话,iE6不兼容。 IE6默认把height解析成最小高度,如果height 和 min-height同是出现,IE6执行height固定高度!那么我们如何进行设置:第一种方法:min-height:300px; _height:300px;第二种方法:min-height:300px; heigh...原创 2020-04-17 14:49:00 · 180 阅读 · 0 评论 -
页面分栏布局
1)用BDC实现分2栏:右栏自适应<style> *{ margin:0; padding:0; } html,body{ height:100%; } .box{ width:100%; ...原创 2020-04-17 21:08:00 · 378 阅读 · 0 评论 -
移动端隐藏滚动条
1)给滚动条的部分设置宽高为100%, overflow-y: auto;2)设置滚动条的部分::-webkit-scrollbar{width: 0;display:none;}原创 2020-04-16 23:08:00 · 790 阅读 · 0 评论 -
css3背景属性
(一)背景属性1)Background-origin 背景原点(背景的起始点yoush)Background-origin 背景原点(背景的起始点you)Background-origin 背景原点(背景的起始点yoush)Background-origin 背景原点(背景的起始点1)Background-origin 背景原点(背景的起始点yoush)Background-origi...原创 2020-04-13 23:33:00 · 189 阅读 · 0 评论 -
css3选择符
css属性选择器: 通过html属性选择对应的标签 1 选择符[属性名] { } 当一个元素有当前html属性值名称则匹配成功. 2 选择符[属性名="属性值"] 属性和属性名都匹配成功才做选中 3 选择符[属性~="属性值"] 当前属性的属性值为一个词列表(多个单词以空格隔开) , 只要有当前指定的词就能匹配. 4 选择符[属性...原创 2020-04-12 00:55:00 · 91 阅读 · 0 评论 -
BFC触发条件及应用
BFCBFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。一 BFC的布局规则一、内部的Box会在垂直方向,一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相...原创 2020-04-08 14:36:00 · 2018 阅读 · 0 评论 -
宽高自适应,高度塌陷,伪对象选择符
宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应。自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。宽度自适应元素宽度设置为100%。(块元素宽度默认为100%) 或者不设置宽度(width);(宽度是父元素的宽度)高度自适应1)自适...原创 2020-04-08 08:59:00 · 78 阅读 · 0 评论 -
css选择符
css选择器1)类型选择符(标签选择符) 能选中左右同名标签、2) id选择器 用法: 用来划分网页外围结构 语法: <标签 id=“名称”> </标签> #名称{ 属性:属性值}3)类选择器(clas...原创 2020-03-29 21:55:00 · 59 阅读 · 0 评论 -
盒模型
盒模型盒模型是网页的基石,在使用CSS进行网页布局时,我们一定离不开的一个东西————盒模型,一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。会发现margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。盒子模型对应的...原创 2020-03-29 21:46:00 · 58 阅读 · 0 评论 -
css元素类型
css元素类型分为: 块状元素,内联元素,内联块状元素块状元素1)在页面中以矩形区域显示 2)自上而下排列,独占一行 3)可以直接添加宽高,可做为其他元素或者内容的容器 常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table&...原创 2020-03-29 21:44:00 · 114 阅读 · 0 评论 -
css定位
css定位定位模式:在css中,position属性用于定义元素的定位模式,其基本语法格式如下:选择器{position:属性值;}position属性值有5种,分别是静态定位,相对定位,绝对定位,固定定位和粘性定位属性值描述static(静态定位)正常显示,和不设置的效果一样absolute(绝对定位)以已定位父元素的位置为参照物,脱离文档流,不占据空...原创 2020-04-08 08:20:00 · 72 阅读 · 0 评论