css
愤怒的小果汁
这个人很懒,什么都不想写......
展开
-
absolute和fixed定位的区别
两种定位的共同点:都会脱离当前文档流,触发BFC区别:相对定位的元素不同:absolute是相对于离它最近的有定位的父元素进行定位(如果没有定位的父元素则相对于浏览器窗口);fixed是相对于浏览器窗口定位在有滚动条的页面中,absolute会跟随页面滑动,fixed不会滑动,始终固定在同一位置...原创 2018-06-26 15:04:03 · 6987 阅读 · 0 评论 -
块级元素在同一行展示的方法
<div id="container"> <div class="div">1</div> <div class="div">2</div> <div class="div">3</div></div&g原创 2018-07-19 18:39:52 · 20694 阅读 · 0 评论 -
-webkit-overflow-scrolling: touch用途
h5的页面在ios的浏览器展示时,滚动可能会出现不连贯、卡顿的情形-webkit-overflow-scrolling: touch的作用是开启滚性滚动和回弹原创 2018-07-18 19:25:45 · 893 阅读 · 0 评论 -
超出指定文本宽度展示省略号
{ overflow: hidden; /*超出宽度隐藏*/ white-space: nowrap; /*不换行*/ text-overflow: ellipsis; /*文字超出部分用省略号展示*/}注:text-overflow: clip是文本超出部分直接截断...原创 2018-07-17 21:30:26 · 273 阅读 · 0 评论 -
div中放置img元素下方会有空白的问题
首先说原因:img是行内置换元素,所以它和文字一样,是有行高的,图片默认和文字的下方基线对齐 解决有以下几种方式:将img设置display:block;不是行内元素了,自然也就没有行高了 给div设置line-height:0;即将基线和bottom下方的高度设成0,就取消了空白 给img设置vertical-align:bottom/middle/top;这样就修改图片与下方botto...原创 2018-07-17 21:14:38 · 632 阅读 · 0 评论 -
行内元素和块级元素的居中
1.水平居中:(1)行内元素: 对该行内元素的父元素设置text-align:center(2)块级元素: 对该块级元素设置margin:0 auto(3)弹性盒子中的水平居中: 将某元素定义为弹性盒子:display:flex; 然后在水平方向居中盒子内的元素:justify-content:center;2.垂直居中:(1)行内元...原创 2018-03-05 20:12:07 · 2132 阅读 · 1 评论 -
常用动画一:缓缓收起顶部栏
HTML<div class="div"></div>CSSbody { margin: 0;}.div { height: 100px; background-color: cyan; border:1px solid red; transform-origin: top; animation: moveup 3s fo...原创 2018-06-21 16:46:59 · 222 阅读 · 0 评论 -
常用动画二:心跳效果
HTML<div class="div"></div>CSS.div { width: 100px; height: 100px; background: red; border-radius: 50%; animation: beat 1.5s infinite;}@keyframes beat { from { wi...原创 2018-06-21 17:06:30 · 1560 阅读 · 0 评论 -
scroll的条件
1.父元素设置高度,并且overflow为scroll或auto(默认是visible)2.内容区高度大于其父元素3.在移动端的浏览器中有个特性:当内容区超出视窗范围会自带滚动效果,此时不必设置父元素scroll...原创 2018-06-25 11:09:13 · 683 阅读 · 0 评论 -
用border画有边框的三角形
下边这种图每个三角形是怎么画的呢?其实它并不是一个div,而是用设置了宽度的border画的 原理:一个border是由上下左右四个小三角形组成的,它的宽度就是下边这个正方形的边长代码如下:<div id="triangle"></div>#triangle { width: 0; height: 0; border-width: 30px; ...原创 2018-07-19 19:56:13 · 2693 阅读 · 0 评论