CSS
zbailing
这个作者很懒,什么都没留下…
展开
-
CSS transform-style属性使用案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS transform-style属性使用案例</title> <style> /* 当父元素应用transform时,子元素也会随之改变效果 */ .box1 { ...原创 2022-03-02 10:53:06 · 286 阅读 · 0 评论 -
CSS loading动画(animation-direction案例)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS loading动画(animation-direction案例)</title> <style> body { margin: 0; padding: 50px; } .原创 2022-02-18 10:23:46 · 168 阅读 · 0 评论 -
css transition用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- css实现动画包含两种方式: 1、animate动画 2、transition动画 --> <style> li { width: .原创 2022-02-17 14:23:39 · 538 阅读 · 0 评论 -
table的fixed布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 10px 300px; } table.one { .原创 2022-01-14 13:50:06 · 957 阅读 · 0 评论 -
火狐不支持calc吗?
今天使用 css calc属性时发现了一个bug,max-height: calc(100% - 100px); 在chrome里显示正常,但在火狐里不好使。然后改成了 max-height: calc(100vh - 100px); 就好使了。推测是兼容性问题,但单独拿出测试却好使。。...原创 2021-09-03 14:54:19 · 538 阅读 · 0 评论 -
position: fixed失效
position: fixed失效了,这是为什么呢?我仔细检查了一下代码,发现原来是我把position:fixed 写在了另一个,带有position fixed的盒子中所以导致子元素的position fixed 失效了总结:两个 position fixed 元素只能并列,不能嵌套...原创 2021-05-26 10:19:39 · 203 阅读 · 0 评论 -
css中引入其他css文件
注意:@import 必须放在css文件顶部才能生效原创 2020-10-10 15:02:47 · 281 阅读 · 0 评论 -
button元素、div等块级元素、span等行内元素在flex容器里会被拉伸
htm代码如下:<div class="box"> <button class="btn">click</button></div>一、在flex容器下,button表现为纵向拉伸.box { width: 400px; height: 200px; background-color: #eee; padding: 16px;原创 2020-09-10 10:04:20 · 878 阅读 · 0 评论 -
margin-top引起的布局溢出
当父元素没有设置padding-top时,子元素的margin-top容易导致布局溢出,出现不必要的滚动条。原创 2019-11-07 16:23:47 · 685 阅读 · 0 评论 -
CSS line-height 失效2
案例1<div class="head"> 你好,西南石油大学。</div>.head{ text-align: center; background: #333;/* 设置整个背景为黑色,便于观察字体 */ color: red; line-height: 100px;/* 设置行高,让字体居中 */ ...转载 2019-07-11 16:47:49 · 369 阅读 · 0 评论 -
绝对定位元素的最大宽度受父元素宽度影响失效
代码.box { position: relative; margin: 50px; width: 150px; height: 200px; background-color: #999;}.tooltip { position: absolute; top: 50px; left: 200px; max-width: 200px; ...原创 2019-08-14 09:53:49 · 2650 阅读 · 0 评论 -
兼容火狐select样式
@-moz-document url-prefix() { /* 仅供火狐识别的css */ select.form-control { -moz-appearance: none; appearance: none; background-image: url("./caret-down.svg"); background...转载 2019-09-12 09:50:24 · 261 阅读 · 0 评论 -
兼容火狐select样式
@-moz-document url-prefix() { /* 仅供火狐识别的css */ select.form-control { -moz-appearance: none; appearance: none; background-image: url("./caret-down.svg"); background...原创 2019-09-25 09:17:21 · 146 阅读 · 0 评论 -
CSS line-height 失效
正常样式line-height失效样式带有文字的按钮样式不受影响,但只有图标的按钮line-height已失效line-height失效原因文本写在了html标签外后,line-height失效了...原创 2019-07-04 14:40:13 · 1882 阅读 · 1 评论