css
css
栗栗子~
这个人很懒,什么也没写。
展开
-
面试-三栏布局方式两边固定中间自适应
1. margin负值法:左右两栏均左浮动,左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来2. 自身浮动法:左栏左浮动,右栏右浮动,中间栏放最后3. 绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。4.flex 左右固定宽 中间flex:15.网格布局6. table布局...原创 2022-03-01 18:01:10 · 127 阅读 · 0 评论 -
面试-行内元素/块级元素有哪些?
行内元素/块级元素有哪些?行内元素:相邻的行内元素会排列在同一行,不会独占一行 设置宽高无效 span块级元素:会独占一行 可以设置宽高等属性div可变元素:根据上下文预警决定该元素为块元素还是内联元素块级元素:div h1-h6 hr p ul ol table address blockquote dir from menu行内元素:a br I em img input select span sub sup u textarea可变元素:button del iframe i原创 2022-03-01 17:45:08 · 44 阅读 · 0 评论 -
子元素如何在父元素中居中
水平居中:1.子父元素宽度固定,子元素设置margin:auto,并且子元素不能设置浮动,否则居中失效2.子父元素宽度固定,父元素设置text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动,否则居中失效水平垂直居中:子元素相对于父元素绝对定位,子元素top,left设置50%,子元素margin-top和margin-left减去各自宽高的一半子元素相对于父元素绝对定位,子元素上下左右全为0,然后设置子元素margin:aut..原创 2022-03-01 17:38:11 · 1413 阅读 · 0 评论 -
css清除浮动方法集合
高度塌陷:当所有的子元素浮动的时候,且父元素没有设置高度,这时候父元素就会产生高度塌陷。清除浮动方式1:给父元素单独定义高度优点:快速简单,代码少 缺点:无法进行响应式布局清除浮动方式2:父级定义overflow:hidden;zoom:1(针对ie6的兼容)优点:简单快速、代码少,兼容性较高 缺点:超出部分被隐藏,布局时要注意清除浮动方式3:在浮动元素后面加一个空标签,clear:both;height:0;overflow:hidden优点:简单快速、代码少,兼容性较高。原创 2022-03-01 17:31:33 · 117 阅读 · 0 评论 -
自定义自适应display.css代码
调用element-ui的display.css出现bug,索性自己写一个 ,留档保存/* hidden-xs-only - 当视口在 xs 尺寸时隐藏hidden-sm-only - 当视口在 sm 尺寸时隐藏hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏hidden-md-only - 当视口在 md 尺寸时隐藏hidden-md-and-down - 当视口在 m...原创 2022-01-05 16:30:48 · 923 阅读 · 0 评论 -
flex布局中flex-grow 和justify-content
1.实现弹性布局并超出自动换行 #goods-list2 { display: flex; flex-wrap: wrap;//超出换行 } #goods-list2 .list2-item { width: 240px; }2.item之间留空隙原创 2021-01-05 23:09:50 · 238 阅读 · 0 评论 -
自定义滚动条样式
CSS3自定义浏览器滚动条样式一个完整滚动条右以下部分组成: ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border;::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片;::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的部分;::-webkit-scrollbar-track-piece track去掉拖拽剩下的部原创 2020-11-15 13:09:12 · 85 阅读 · 0 评论 -
animate.css 没有反应的总结
前言:animate.css没反应多半的版本问题昨天 在vue3中正常的安装使用animate.css,cnpm install animate.css --save引入import animated from 'animate.css'Vue.use(animated)使用<transition name="fade" enter-active-class="animated bounce"原创 2020-11-15 11:34:13 · 5102 阅读 · 0 评论 -
vue3中animate.css+ wow.js的使用
animate.cssanimate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。animate.css中文网wow.js滚动时显示动画。wow.js官网1、通过cnpm安装wow.js和animate.csscnpm install wowjs --save-devcnpm install animate.css --save2.在main.js里配置animateimport animated from 'ani原创 2020-11-14 12:00:28 · 2311 阅读 · 8 评论 -
sass scss的详解
Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的Web应用时,容易造成选择器、层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量、嵌套、混合、继承等特性,让CSS的书写更加有趣与程式化。变量变量用来存储需要在CSS中复用的信息,例如颜色和字体。SASS通过$符号去声明一个变量。$font-stack: Helvetica,.原创 2020-11-14 12:28:22 · 279 阅读 · 0 评论