css
文章平均质量分 54
赏花赏景赏时光
这个作者很懒,什么都没留下…
展开
-
css设置时需要注意的一些细节
当元素设置了负数,则该元素会处于z-index=0的元素下面,同时会处于其他普通元素下面(没有堆叠的元素position:static和z-index:auto)如果不设置z-index,则z-index默认值就是auto,则该元素不处于堆叠上下文中,其子元素不会从父元素继承优先级,可以和任意元素比较z-idnex的值;当父元素没有设置z-index时候,即父元素的z-index:auto,则子元素的层级可以和任意元素比较;1)z-index的作用:设置堆叠上下文,即设置元素堆叠顺序。...原创 2022-08-15 22:53:21 · 269 阅读 · 0 评论 -
移动端css样式兼容
1、1px边框问题问题:不同的浏览器对于border:1px像素显示的大小不一样解决方案:可以利用元素的伪类,来设置1px边框.parent{ position: relative; height: 100px; width:100px; background: yellow;}.parent:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; border: 1原创 2021-07-25 21:51:40 · 3667 阅读 · 0 评论 -
css设置元素居中的方法
1、水平居中1) text-align:设置块级元素(父级元素)里面的内容水平居中<div class="parent"> <span>hao </span></div>.parent{ text-align: center;width: 0.5rem;background: gray;color: yellow;}2) width: fit-content————父级元素的宽度设为该值,由子元素内容撑开父元素...原创 2020-11-22 16:19:07 · 284 阅读 · 0 评论 -
用css实现柱状图,要求DOM不一样
用css实现柱状图,要求DOM、CSS不一样1、DOM结构全部都用div,给父div设置宽高,给子div设置同样的margin width display:inline-block,然后在分别给每一个子div设置height background-color<!DOCTYPE html><html><head> <title></...原创 2018-04-01 09:34:32 · 1411 阅读 · 0 评论 -
css的属性position
css的属性position规定元素的定位类型,任何元素都可以定位,对于absolute和fixed定位的元素会生成一个块级框,而不论本身是什么类型。相对定位元素会相对于他在正常流中的默认位置偏移。position可能的值:1、absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位,定位位置通过top,bottom,left,right规定2、fixed原创 2017-10-11 20:42:22 · 344 阅读 · 0 评论 -
让div水平居中的css方法
一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)1、给要设置水平居中的div设置display:block ,margin:0 auto,width , height4个属性,可以让块级元素水平居中(默认情况下,div的position:static) test div{ w原创 2018-01-02 19:42:23 · 47547 阅读 · 0 评论 -
在网页上使用外部字体格式
在网页上使用外部字体格式1、首先下载web font的文件,其中格式有.ttf(TrueTypeFont)是由Apple公司和Microsoft公司共同推出的字体文件格式,.svg,.eot,.woff,如下所示为整个目录:2、然后再文件里面引用1中下载的文件 @font-face{ font-family: HYShiGuangTiW; /*自定义的字体名*/ src:url('原创 2018-01-02 15:46:27 · 3036 阅读 · 0 评论 -
li设置over-flow:hidden失效
问题:给li设置over-flow:hidden失效1、html<ul class=" lotteryNameList"> <li class="name">讲讲讲讲讲讲讲讲</li> <li class="name">讲讲</li> <li class="nam原创 2017-12-21 21:47:57 · 6098 阅读 · 1 评论 -
两个元素的display设置成inline-block会出现中间有间隔的问题
两个元素的display设置成inline-block会出现中间有间隔的问题,部分html如下<div class="content-wrapper"> <div class="avatar"> <!--在标签中获取数据的时候,要在属性前面加上v-bind或者简写成':'--> ...原创 2018-04-30 19:34:10 · 3862 阅读 · 1 评论 -
在一个div里面的两个span标签没有对齐,或者在一个div里面的两个div没有对齐
一、在一个div里面的两个span标签没有对齐,如下图红色圈所示红色圈的html如下<div class="title"> <span class="brand"></span> <span class="name">{{seller.name}}</span></div>原创 2018-04-30 20:21:14 · 14335 阅读 · 1 评论 -
设置图片的宽高一样大
在移动设备上,我们常常需要将一张图片的宽度设为屏幕的宽度,同时将图片的高度设置成和图片的宽度一样大,下面讲讲用css如何设置。html如下 <div class="imageHeader"> <img :src="food.image"> </div>css如下(这里用了styleus语法书写)...原创 2018-05-05 21:51:39 · 4534 阅读 · 1 评论 -
在写移动端页面的布局的时候是按照iphone6的尺寸写的,在iphone5中因为宽度的问题导致样式错乱
在写移动端页面的布局的时候是按照iphone6的尺寸写的,在iphone5中因为宽度的问题导致样式错乱。如下所示是ratings.vue中的<template>内容<template> <!--评价页的高度可能会超过页面,所以需要bette-scroll--> <!--在内容真正开始的地方,其外部会有一个div包裹--> <div ...原创 2018-05-07 10:13:26 · 2170 阅读 · 1 评论 -
在轮播图中去抖动
问题:在页面中存在抖动问题,如下图所示,当网速较慢的时候,图片加载的比较慢,当图片没有加载完前,test是在图片的左上角位置此时不显示图片,当图片加载完,test在图片的左下角,这时候的变化就是页面抖动。发生抖动的原因:当图片没有加载完成前,img的高度为0,没有将其撑开,等到图片加载完之后,img被撑开解决方法:通过给swiper的父级元素设置一个固定的高度来解决的,width:10...原创 2019-03-28 17:43:58 · 1503 阅读 · 0 评论 -
z-index失效
1、问题:有时候,在布局时想让A盒子的层级高于B盒子的层级,就设置A盒子的z-index,但是却失效。2、让z-index生效的前提是:设置盒子的positio:absolute/relative/fixed失效情况一:无论设置z-index多大都没有起作用。这种情况发生需要3个条件A、父标签设置了position:relativeB、问题标签没有设置positio:absolute/relati...转载 2017-12-21 21:00:50 · 1032 阅读 · 0 评论 -
父级div使用display:table-cell;vertical-align:middle会出现空隙。
父级div使用display:table-cell;vertical-align:middle会出现空隙。1、html如下 2、css.divCon{ width:200px; height:200px; background:black; display: table-cell; vertical-align: middle; text-al原创 2017-12-12 21:50:09 · 2016 阅读 · 1 评论 -
解决在chrome中input出现黄色背景的问题
chrome 表单自动填充后,input文本框的背景会变成黄色的。通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,如下图所示:解决方式:可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景,如下所示:input:-webkit-autof原创 2017-07-24 10:07:56 · 663 阅读 · 0 评论 -
遮罩层不能覆盖导航条
在设置遮罩层的时候,发现遮罩层不能覆盖导航条。原因:可能是z-index的值设的太小了。如下面所示:#bg_background{ position: absolute; z-index: 8; top:0px; left: 0px; right: 0px; bottom: 0px; background-col原创 2017-07-20 16:19:15 · 2163 阅读 · 1 评论 -
让导航条的格式不随界面的变化而变化
让导航条的格式不随界面的变化而变化原创 2017-05-31 09:07:16 · 3889 阅读 · 0 评论 -
css属性中的优先级
css属性中的优先级原创 2017-05-31 09:25:05 · 807 阅读 · 0 评论 -
css中的一些排版布局要注意的东西
css中的一些排版布局要注意的东西原创 2017-06-02 13:54:15 · 392 阅读 · 0 评论 -
css布局中的一些注意事项
最近在用css布局设置一个页面,现在分享在设计过程中遇到一些问题的解决方法:1、有的时候,只要外层的元素设为display:block,里面嵌套的inline元素可以不用设置display:block,就可以设置高度和宽度例如: style="display:block"> 这样就可以了,要是input在设置一个display:block反而达不到设置宽度的目的。原创 2017-06-07 18:41:35 · 564 阅读 · 0 评论 -
autocomplete="off"在chrom中失效
问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息。这时,在<input>中添加属性,一般能达到目的。而在chrom里面就失效。解决方法:浏览器根据t输入框的时,会自动填充账号和密码的输入框。先将作为密码的输入框的type设成:,当点击密码输入框的时候,将其type属性设为:这样问题就解决了。HTML页面代码如下: type="te原创 2017-07-18 18:38:01 · 661 阅读 · 0 评论 -
div 不能占满整个页面
在页面中,有时候我们想自己写个遮罩层,让它的宽度和高度都占满整个可见页面区域,css设置好了,但是还是没有得到想要的效果。遮罩层用表示,是body的直接子元素。部分.html代码如下:.css代码如下:#bg{ position:fixed; top:0px; left:0px; right:0px; bottom:0p原创 2017-09-13 20:40:39 · 6231 阅读 · 0 评论 -
将两个并列的元素的属性设为inline-block的影响
将两个并列的元素的属性设为inline-block的影响这是html代码: *用户名错误 *密码错误 *验证码错误 登陆 注册忘记原创 2017-08-05 22:27:35 · 1174 阅读 · 0 评论 -
css3设置box-shadow
css3设置box-shadow对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}阴影类型:此参数可选。如不设值,默认投影方式是外阴影outse原创 2017-07-23 12:26:37 · 282 阅读 · 0 评论 -
css3实现动画的上下摇动
有一张png格式的图片,用css3的animation()配合@keyframes特性,实现图片的上下摇动原图如下:html代码如下:css代码如下:#shake_icon{ width:100px; height:100px; animation: shaking 0.25s linear infinite; -webkit-animation: shak原创 2017-09-30 20:53:56 · 6744 阅读 · 0 评论 -
给li标签中的span设置属性margin-bottom不生效
给li标签中的span设置属性margin-bottom不生效html如下: <ul class="lottery_main""> <!-- 每个中间人的头像和名字 --> <li class='li25'> <span class="lottery_name25">飘原创 2017-10-28 21:13:17 · 2868 阅读 · 0 评论 -
li中的span设置float:right不生效
li中的span设置float:right不生效:部分html代码如下: 部分css代码如下:li{ display:block;}#one{ float:left;}#two{ float:right;}本意是想让两个span在li中,第一个span左浮动,第二个span右浮动,结果第二个span右浮动没生效,显示的结果还是左原创 2017-10-13 14:46:36 · 6817 阅读 · 1 评论 -
form设置margin:0px auto不生效
我们知道要想让一个组件水平居中,只要设置下面两行代码就可以了:display:block;margin:0px auto;但是给form这样设置,却达不到水平居中的效果。解决方法:给form设置属性width,即给form设置一个宽度。如下面的写法就可以让form水平居中了:width:200px;display:block;margin:0px auto;原创 2017-10-15 17:17:44 · 2405 阅读 · 0 评论 -
如何使网页的div元素高度满屏
CSS3 引入了新单位:vw、vh、vmin、vmax。(1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点,而是由视窗(Viewport)大小来决定的, 1代表 1%,视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。vw:视窗宽度的百分比(1vw 代表视窗的宽原创 2017-11-06 18:47:59 · 5452 阅读 · 0 评论 -
box-shadow在ios下没有显示
box-shadow在ios下没有显示,但是在android机下显示正常。1、html如下 2、css如下.paScreenTxt{ width:98%; height:200px; display: block; margin: 12px auto; box-shadow: 0px 0px 2px 2px #CCC;}3、在and原创 2017-12-08 19:53:52 · 4962 阅读 · 0 评论 -
css让图片居中
css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充1、html如下: /*这里的图片路径自己设置*/ 2、css如下 body{ background-color: gray; } #red原创 2017-12-08 20:24:47 · 25200 阅读 · 0 评论 -
css 盒子布局的问题
在微信小程序之中,对盒子布局的时候,我们要注意布局大小不要超过页面的宽度,否则会出现布局混乱的问题这是.wxml内容: 复制密文 点击加密 这是.wxss.encryption{ box-sizing: border-box; displa原创 2017-08-16 20:52:18 · 369 阅读 · 0 评论