css
withwz_
逆了苍天,踏破碧落黄泉
展开
-
grid+scss实现bootstrap栅格系统
grid + scss 20行代码实现 bootstrap 栅格系统vscode插件html文件的热加载sass编译栅格核心style.scss.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px;}@media screen and (max-width:768px) {...原创 2020-02-24 11:04:40 · 618 阅读 · 0 评论 -
css3动画 animation
animation 实现一个旋转鼠标放上暂停https://codepen.io/bb798sky/pen/KOeEZE原创 2019-08-09 12:56:32 · 199 阅读 · 0 评论 -
css3 transition
transition四个属性transition: property duration timing-function delay;属性描述transition-property指定过渡的属性比如 width height transformtransition-duration过渡时间 单位可以是s mstransition-timing-functi...原创 2019-08-09 17:07:54 · 578 阅读 · 0 评论 -
css3 transform 变形
文章目录transform语法坐标轴说明2D变形函数3D变形函数transform-origin属性transform语法transform: none|transform-functions [transform-functions]* ;可以有多个变形坐标轴说明z轴是垂直屏幕指向我们的https://codepen.io/bb798sky/pen/MNPedL可以从这个例...原创 2019-08-10 15:36:01 · 200 阅读 · 0 评论 -
[Sass]混合宏 VS 继承 VS 占位符
https://www.imooc.com/code/7041 ←a) Sass 中的混合宏使用@mixin mt($var){ margin-top: $var;}.block { @include mt(5px); span { display:block; @include mt(5px); }}.header { color: oran...原创 2019-08-12 19:56:51 · 226 阅读 · 0 评论 -
css 所有display属性快速查询
css2.x属性描述none此元素不会被显示block此元素将显示为块级元素,此元素前后会带有换行符inline此元素会被显示为内联元素,元素前后没有换行符inline-block行内块元素,既有宽高是内联list-item此元素会作为列表显示 示例:https://codepen.io/bb798sky/pen/PMLzvYtable...原创 2019-08-12 20:51:43 · 326 阅读 · 0 评论 -
grid布局属性总结
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。容器的属性属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII描述display属性指定容器采用grid布局grid-template-columns指定每一列的列宽 属性值详解grid-template-rows指...原创 2019-08-16 15:49:51 · 613 阅读 · 0 评论 -
flex属性快速查询
文章目录容器的属性项目的属性Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。容器的属性属性描述flex-direction属性决定主轴的方向(即项目的排列方向)flex-wrap项目的换行方式flex-flowdirection和warp的缩写默认是row nowrapjustify-content...原创 2019-08-12 21:12:47 · 173 阅读 · 0 评论 -
css margin合并 为什么子元素的margin-top把父元素也给撑下来了
比如这样我们的本意是这样我们只需要在父容器上加上一个overflow:hidden问题就解决了块级元素的上边距与下边距有时会拼合成一个外边距,这样的现象称为“margin合并”margin合并出现的条件:块级元素只发生在垂直方向margin合并的3种场景:相邻兄弟元素margin合并父级和第一个/最后一个子元素(上边的情形)空块级元素margin合并...原创 2019-08-26 18:39:32 · 763 阅读 · 1 评论 -
bootstrap栅格系统原理,grid做一个不用设备监听的响应栅格
栅格系统,把屏幕分成了十二份然后是设备监听bootstrap源码下边这个div在屏幕宽度>767px的时候占3份,<768px占6份也就是在电脑宽屏上横屏可以放四个(12/3),手机上横屏可以放两个(12/6)<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-sh...原创 2019-08-27 22:16:48 · 178 阅读 · 0 评论 -
css3渐变背景
线性渐变(Linear Gradients)语法background: linear-gradient(angle, color-stop1, color-stop2, 3 ,4 ,5…);angle属性说明:0度是由下向上渐变;关键词:to top 0degto right 90degto bottom 180degto left -90deg径向渐变语法...原创 2019-08-18 19:45:57 · 178 阅读 · 0 评论 -
css123全部选择器整理
css3选择器基本选择器层次选择器伪类选择器伪元素属性选择器动态伪类选择器目标伪类选择器语言伪类选择器UI元素状态伪类选择器结构伪类选择器否定伪类选择器基本选择器选择器类型描述兼容性css版本*通配选择器*{margin:0;padding:0}, .demo * {background:orange}all1E元素选择器ul {backgroun...原创 2019-08-13 17:21:55 · 341 阅读 · 0 评论 -
cssbem规范
规范BEW指 块(block),元素(element),修饰符(modifier)。__用来连接B和E 。_用来连接B和M,E和M,如 search__btn_active。-用来连接含多个单词的B或E或M。示例块:例如搜索框块,log的块,菜单块search块,用search和元素(ipt、btn)连接<ul class="search"> <input c...原创 2019-07-22 17:40:58 · 240 阅读 · 0 评论 -
css:块级格式化上下文——BFC
文章目录BFC简介BFC与流体布局最佳结界overflowBFC简介如果一个元素具有BFC,那么内部子元素再怎么翻江倒海也不会影响外部的元素。BFC元素也不会发生margin重叠,因为margin重叠是会影响外面的元素的;BFC元素可以用来清除浮动的影响,因为如果不清除,子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位。什么时候会触发BFC呢?常见情况如下:float:left...原创 2019-01-31 18:35:50 · 189 阅读 · 0 评论 -
css:float
文章目录float本质float特性1、包裹性2、自适应性3、块状化float本质float属性是非常早的一个属性,在当时的互联网带宽就那么一点,不可能出现大片大片的图片砖头布局。float的设计目的只是为了实现文字的环绕效果用float布局什么内联元素的间隙问题、margin合并问题都没有了,但是这种布局一旦某个列表高度变高了,则下面的列表就可能发生不愿意看到的布局错位,抑或是日后我们需求...原创 2019-01-31 15:15:14 · 1203 阅读 · 0 评论 -
css:选择器权重和层叠顺序
文章目录选择器优先级层叠顺序选择器优先级important > 内联 > ID > 类 >伪类 | 属性选择 | 标签> 伪元素 > 通配符 > 继承通配选择符的权值 0,0,0,0伪元素选择的权值为 0,0,0,1标签的权值为 0,0,0,1属性选择的权值为 0,0,1,0伪类选择的权值为 0,0,1,0类的权值为 0,0,1,0I...原创 2019-02-01 17:46:29 · 410 阅读 · 0 评论 -
CSS:用border来构建图形
border-style:dotted;这个属性在浏览器下是一个圆圈的边框无论是chrome还是firefox、ie,甚至ie7ie5都支持。原创 2019-01-30 16:16:54 · 533 阅读 · 0 评论 -
css深入理解
文章目录width:auto;width:auto;display:inline-block;块级元素的默认宽度是100%于包含块的;原创 2019-01-30 18:26:32 · 553 阅读 · 0 评论 -
伪元素解决float高度塌陷
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .outer{ border: red solid 2px;...原创 2019-03-25 12:58:50 · 513 阅读 · 0 评论 -
CSS父元素和包含块
父元素不一定是包含块,包含块也不一定是夫元素position为static包含块为最近的元素,也就是父元素;position为fixed包含块为body容器;position为relative | absolute的包含块为position!=static的祖先元素(可能是父元素,如果祖辈元素都没有relative和absolute则包含块为body)...原创 2018-12-26 20:32:14 · 707 阅读 · 1 评论