![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
CSS
左手喵子
这个作者很懒,什么都没留下…
展开
-
float布局里面的div怎么撑开外面的div,让高度自适应
关于容器高度自适应的兼容性问题。1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应。在一般情况下,使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性:代码如下:height:auto!important;height:200px;min-height:200px;2.很多朋友反映用上面的方法后原创 2024-02-13 13:25:24 · 212 阅读 · 0 评论 -
pc端与移动端base.css公共样式
base.css公共样式 pc端body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, tabl原创 2024-02-13 11:22:18 · 152 阅读 · 0 评论 -
使用CSS修改HTML5 input placeholder颜色
【代码】使用CSS修改HTML5 input placeholder颜色。原创 2024-02-12 13:25:15 · 280 阅读 · 0 评论 -
chorme 浏览器记住密码后input黄色背景处理方法(两种)
使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景;由于是设置颜色覆盖,所以只对非透明的纯色背景有效;原创 2024-02-12 13:23:16 · 401 阅读 · 0 评论 -
css 渐变背景设置及修改透明度方法
background: linear-gradient(to right,颜色1, 颜色2);- - - 这种是从左到右,有颜色1过渡为颜色2;background: linear-gradient(颜色1, 颜色2);- - - 这种是从上到下,有颜色1过渡为颜色2;background: linear-gradient(角度, 颜色1, 颜色2, 颜色3);透明度值 0~1 之间,0指完全透明,1指完全不透明,90deg - - - 从左到右,0deg - - - 从上到下,根据具体需求设置渐变方向。原创 2024-02-12 12:45:57 · 639 阅读 · 0 评论 -
修改CSS中transition属性的方向
在练习CSS hover时用到了transition属性,发现transition属性只能从左向右、从上向下延伸,但是我想要的效果是从下向上延伸。经过我多方面的Google和测试,找到了一个实用的方法,在此做个记录。首先,“修改transition属性”做个说法其实是错误的,窍门其实就是修改容器(div)的位置。以下是没有设置过div位置的代码,此时transition属性是正常地从上向下延伸。想要从右向左的话也是同样的道理,固定right的值就好了。原创 2024-02-12 12:20:40 · 315 阅读 · 0 评论 -
css的文字间距letter-spacing的应用以及应用后不居中的显示
letter-spacing能给文本加一个字间距,非常好用,但是带来的问题就是不居中,原因不明,但都是往左偏了一些。解决方法:字间距是X px,则整个文本再加一个padding-left,同样是X px,效果图如下。原创 2024-02-12 11:15:05 · 387 阅读 · 0 评论 -
html、body宽高都是100%,body里面一个div设置margin-top,body却跑下来了
给body设置一个上边框,跟背景颜色一致,然后设置其盒子模型为border-box就应该可以了。原创 2024-02-11 12:51:06 · 388 阅读 · 0 评论 -
CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原
transform:scale()可以实现按比例放大或者缩小功能。transition允许CSS的属性值在一定的时间区间内平滑过渡。鼠标经过或悬停时,图片会缓慢放大;鼠标离开,图片缓慢还原。可以调节放大倍数以及放大过程所用时间。下图分别为:原图、鼠标经过。原创 2024-02-11 11:37:24 · 573 阅读 · 0 评论 -
CSS3实现的4种水波特效
(1)HTML结构(2)CSS样式。原创 2024-02-11 11:07:47 · 491 阅读 · 0 评论 -
CSS实战 - 波纹扩散效果
效果一:涟漪扩散效果效果二:波动扩散效果。原创 2024-02-11 10:47:26 · 870 阅读 · 1 评论 -
内容超出div宽度后自动换行的css代码
使用一段css代码:”word-wrap: break-word;原创 2024-02-11 10:41:57 · 266 阅读 · 0 评论 -
css 字体透明度继承父级透明度,导致不能正常显示。防止opacity子元素继承方法
给父级盒子设置透明度导致内部文字也存在透明度的问题。原创 2024-02-09 12:46:07 · 209 阅读 · 0 评论 -
display换行
【代码】display换行。原创 2024-02-08 10:15:49 · 495 阅读 · 0 评论 -
解决左边宽度固定,右边宽度随浏览器自适应的3种方案
实现左边固定,右边随浏览器自适应的主要是通过 flex 布局或者 float 浮动。使用 float 时,左边元素设置固定宽度,右边元素设置相应的 margin-left 值。使用 flex 时,如果左边元素宽度使用 flex-basis 属性,右边元素可设置 flex-grow 为 1 或者 flex 为 1。如果左边元素宽度使用 min-width 属性,右边元素除了可以设置 flex-grow 为 1,或者 flex 为 1,还可以设置宽度 100%。原创 2024-02-08 10:14:31 · 844 阅读 · 0 评论 -
11 种垂直居中的方法
在学习了上面的 11 种垂直居中布局方法后,我们简单概括一下如果你的项目在 PC 端有兼容性要求并且宽高固定,推荐使用absolute + 负 margin方法实现;如果你的项目在 PC 端有兼容性要求并且宽高不固定,推荐使用css-table方式实现;如果你的项目在 PC 端无兼容性要求,推荐使用flex实现居中,当然不考虑 IE 的话,grid也是个不错的选择;如果你的项目在移动端使用,那么推荐你使用flexgrid也可作为备选。原创 2023-11-01 22:26:23 · 101 阅读 · 0 评论 -
flex 布局:一行固定个数,超出换行(流式布局)
设置在父容器上的属性:display:flex,align-items(交叉轴对齐方式),justify-content(主轴对齐方式),flex-wrap(换行)。设置在子容器上的属性,通过 flex: 1,简写了 flex-grow、flex-shrink、flex-basis 三个属性。原创 2023-10-24 16:59:49 · 4232 阅读 · 0 评论 -
CSS3 transition 浏览器兼容性
在IE7-9进行测试时,transition的效果没有过渡效果(如线性过渡效果),但是还是有效果(立即执行。原文地址:https://www.cnblogs.com/mengfangui/p/6603452.html。原创 2023-10-11 21:21:49 · 303 阅读 · 0 评论 -
解决text-align: justify;浏览器、安卓手机不兼容问题
原文地址:https://segmentfault.com/a/1190000013146385。var text= "这一行要两端对齐";原创 2023-10-11 20:49:00 · 138 阅读 · 0 评论 -
CSS div内放长英文字母或长数字自动换行 CSS一行排不下自动打断换行
解释:使用break-word时,是将强制换行。兼容各版本IE浏览器,兼容谷歌浏览器。原创 2023-10-11 20:40:49 · 152 阅读 · 0 评论