css
FIND方式
这个作者很懒,什么都没留下…
展开
-
移动端:弹性盒子 / 多列 / 适配方案
多列colum-count 5列数colum-gap 50px列间距colum-rule dashed 3px pink间距线弹性盒子(浏览器适应性差,手机端用得多)父元素{display:flex; display:-webkit-flex;}父元素添加justify-content子元素水平排列justify-c...原创 2019-11-18 21:16:49 · 410 阅读 · 0 评论 -
CSS命名规范——BEM思想(非常赞的规范)
CSS命名规范——BEM思想(非常赞的规范)人们问我最多的问题之一是在CSS类名中“–”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher…BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目...转载 2021-07-12 18:27:46 · 110 阅读 · 0 评论 -
link @import 区别
这两种方式都是为了加载css文件,但还是存在细微的差别。加载内容link标签除了可以加载css外,还可以做很多其他的事情;@import只能加载CSS。加载顺序的差别页面加载时,link文件同时加载;@import引用的文件等待页面下载完再加载兼容性@import只有在IE5以上的才能识别dom控制样式用JS控制dom去改变样式的时候,只能使用link标签...原创 2020-08-04 16:50:31 · 114 阅读 · 0 评论 -
CSS --- 样式继承
文章目录常用继承样式内联元素可以继承的属性块级元素可以继承的属性继承规则CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。css属性一旦继承了不能被取消,只能重新定义样式常用继承样式继承虽然减少了重复定义的麻烦,但是,有些属性是不能继承的,例如border(边框)、margin(边距)、padding(补白)和背景等。font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义原创 2020-08-02 18:21:33 · 270 阅读 · 0 评论 -
Less Sass
less变量 可运算对常用的值进行定义,然后应用到样式中,这样只要改变你定义的变量参数值就可以达到改变全局的效果.border{ border:1px solid red;}@color :blue; //定义变量 @blue : 'color' ;@height:10px; @width:100px; #header { .border //混入class height: @height; width: @width; color: @@blue;转载 2020-06-15 17:29:17 · 164 阅读 · 0 评论 -
Scoped CSS
Scoped CSS当 <style scoped >标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素混用本地和全局样式你可以在一个组件中同时使用有 scoped 和非 scoped 样式<style>/* 全局样式 */</style><style scoped>/* 本地样式 */</style>深选择器如果想对设置了scoped的子组件里的元素进行控制可以使用’>>>’或者’de转载 2020-06-10 09:39:49 · 167 阅读 · 0 评论 -
CSS 两种盒模型box-sizing
盒模型:设置同样宽高二者的盒子的宽度是否包含元素的边框和内边距。content-box(默认):不包含padding borderborder-box:包含padding border原创 2020-05-28 18:14:16 · 129 阅读 · 0 评论 -
CSS 文本溢出隐藏
单行文本溢出隐藏overflow: hidden; /**溢出隐藏 显示省略号**/white-space: nowrap;text-overflow: ellipsis;多行文本溢出隐藏overflow: hidden;text-overflow: -o-ellipsis-lastline;text-overflow: ellipsis;display: -webkit-bo...原创 2020-04-22 19:40:35 · 150 阅读 · 0 评论 -
子元素浮动后、父元素坍塌
父元素设置overflow:hidden,同时height不设置或者100%或者auto父级元素内中的最下面新增一个标签,设置clear:both;父元素用伪类:after (推荐) ul>liul:after{ content:""; display: block; clear:both; }li{ float:left;}...原创 2020-04-18 11:15:27 · 107 阅读 · 0 评论 -
Bootstrap CSS
文章目录流式栅格系统列类型预定义类响应式工具 显示隐藏列表表格表单按钮状态类 添加颜色图片制作响应式网站:PC端、移动端内容:内置css、字体、js移动设备优先<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">增强跨浏览...原创 2020-03-20 20:50:38 · 146 阅读 · 0 评论 -
隐藏元素display visible hidden
display:none网页上不可见,元素不占空间visible:hidden网页上不可见,但元素占空间<input type="hidden">创建隐藏的表单这个不可见的表单元素的value属性保存了一个要提交给Web服务器的任意字符串。如果要提交并非用户直接输入的数据,就是用这种类型的元素。...原创 2020-03-02 20:40:49 · 304 阅读 · 0 评论 -
CSS3 背景+渐变
CSS3 背景属性Descripitionbackground-image不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张background-size指定背景图像的大小lenth percentage cover containbackground-origin指定了背景图像的位置区域 border-box(default),paddi...原创 2019-12-11 20:09:30 · 72 阅读 · 0 评论 -
CSS3动画-transform-@keyframes 规则
2D转换transform过渡效果 transition:transform .3s linear属性translate(x,y)translateX(n)translateY(n)沿着 X 和 Y 轴移动元素沿着 X 轴移动元素沿着 Y 轴移动元素rotate(30deg)顺时针旋转旋转角度,负值是元素逆时针旋转transform-origin旋转参考点...原创 2019-11-19 20:28:33 · 336 阅读 · 0 评论 -
CSS3 animate使用
Animate.css动画演示 下载需要的css文件引入文件<link rel="stylesheet" href="animate.min.css">HTML 及使用 <div class="animated bounce" id="dowebok"></div>animated 类似于全局变量,它定义了动画的持续时间bounce 是动画具体的动画效...原创 2019-11-19 20:27:54 · 184 阅读 · 0 评论 -
CSS3-多媒体查询
媒体查询-针对不同媒体类型可以定制不同的样式规则viewport(视窗) 的宽度与高度设备的宽度与高度朝向 (智能手机横屏,竖屏)分辨率多媒体查询语法<link rel=”styleSheet” media=”all and (min-width:980px)” href=””>@media mediatype and (min-width:750px) and (...原创 2019-11-18 21:25:05 · 131 阅读 · 0 评论 -
CSS --- 选择器类型 / 优先权 /继承
基本选择器选择器 类型功能描述* 通配选择器选择文档中所有HTML元素E 元素选择器选择指定类型的HTML元素#id ID选择器选择指定ID属性值为“id”的任意类型元素.class 类选择器选择指定class属性值为“class”的任意类型的任意多个元素selector1,selectorN 群组选择器将每一个选择器匹配的元素集合并...原创 2019-11-18 20:55:22 · 88 阅读 · 0 评论 -
CSS样式-2
渐变色垂直渐变 linear-graient(color1,color2)水平渐变 linear-graient((270deg,)color1,color2)原创 2019-11-04 22:00:29 · 111 阅读 · 0 评论 -
CSS-button-滑动按钮
<button class="btn1"> < </button><button class="btn2"> < </button>.show-center ul button{ width:25px; height:35px; background: rgba(0,0,0,.15); color:...原创 2019-11-04 21:23:37 · 911 阅读 · 1 评论 -
WEB布局
布局大→小 div 宽高排版再html+css填充盒子模型浮动流标准流混合流 = 浮动+标准流原创 2019-10-22 15:55:26 · 156 阅读 · 0 评论 -
CSS基本样式
CSS样式表和选择调用CSS样式英文标点符号:;边框*{margin:0;padding:0;} *通配符内部填充 //多属性padding:值padding-toppadding-leftpadding-rightpadding-bottom外部填充 //多属性margin:值margin:a; /一个值表示四边相同的填充margin:a b; /两个值表示上下是a...原创 2019-10-21 22:11:33 · 319 阅读 · 0 评论 -
CSS-样式表-iconfont
CSS 层叠样式表行内样式表<any style="样式名:样式值;"></any>页内样式表 <head> <style> 标签名{样式名:样式值;外部样式 } </style></head>外部样式表<head> <link rel="stylesheet" t...原创 2019-10-19 21:33:16 · 420 阅读 · 0 评论 -
CSS-border 实现三角
border-style 值none: 默认无边框dotted: 定义一个点线框dashed: 定义一个虚线框solid: 定义实线边界double: 定义两个边界。 两个边界的宽度和border-width的值相同groove: 定义3D沟槽边界。效果取决于边界的颜色值ridge: 定义3D脊边界。效果取决于边界的颜色值inset:定义一个3D的嵌入边框。效果取决于边界的颜色值...原创 2019-10-19 21:10:46 · 99 阅读 · 0 评论