CSS
CSS
大佬,咋整啊
我也头圆顶天,足方履地,一般有九窍四肢,五脏六腑,何以比人不同?
展开
-
CSS:变量的声明和读取
一、变量的声明在变量名前面加个连接号--,这样就成功声明了一个css变量变量只能用作属性值,不能用作属性名。:root{ --color: #fff;}二、变量的读取var()函数用于读取变量。div{ color: var(--color);}var() 还有个可选参数,表示默认值,即不存在该变量时使用该值div{ color: var(--color, #000);}三、变量值的类型1、当变量值类型为字符串,可与其他字符串进行拼接body::after{ -原创 2020-10-28 16:40:41 · 1086 阅读 · 0 评论 -
css:Grid网格布局常用属性
1、指定容器使用网格布局: display: grid2、指定容器设为行内元素并使用网格布局: display: inline-grid3、定义每一列的列宽:grid-template-columns4、定义每一行的行高:grid-template-row5、重复赋值:repeat(次数,值)6、自动填充:如:repeat(auto-fill,30px)7、比例:fr(如 grid-template-columns: 1fr 2fr;意思是容器分为2列,二列的宽度是一列的2倍)8、长度范围:m原创 2020-10-23 12:02:12 · 716 阅读 · 0 评论 -
JS:网站loading界面实现
loading界面的样式写在</head>前,优先渲染这个界面<head> <title>loading</title> <style type="text/css"> #loader{ width: 100%;height: 100%;background: white; position: fixed;top: 0;left: 0;/*相对浏览器窗口定位*/ display: flex;align-items: cen原创 2020-10-13 15:40:38 · 1049 阅读 · 0 评论 -
css:动画实现文字无缝滚动详解
代码比较简单,不多赘述HTML 部分<div id="marquee"> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div></div>CSS 部分#marquee{ hei原创 2020-10-08 16:05:46 · 3523 阅读 · 0 评论 -
css:水平居中、垂直居中、居中
一、水平居中1、.parent{ text-align: center; /* 文本居中 */}.child{ display: inline-block; /* inline(宽高属性无效) */ }优点:CSS2属性浏览器兼容性好缺点:text-align具有继承性,会导致子级元素的文本居中显示,需要给每个子级元素设置text-align2、.child{ display:ta...原创 2020-05-06 14:16:26 · 103 阅读 · 0 评论 -
css:两列自适应布局
.left{ width: 100px; height: 100px; float: left; }.right{ height: 100px; margin-left :100px; }优点:实现简单缺点:1.自适应元素的margin值要与定宽元素的宽度保持一致2.定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好3.右DIV子元素清除浮动有影响.left{ width: 100...原创 2020-05-06 14:20:35 · 243 阅读 · 0 评论 -
css:三列布局——圣杯、双飞翼
圣杯布局左右定宽中间自适应.parent{margin-left : 300px; margin-right : 300px;height: 300px;}.center{float: left; width: 100%;height: 300px;background: #888888;}.left{float: left; margin-left: -100%;position: re...原创 2020-05-11 16:42:08 · 92 阅读 · 0 评论 -
css:响应式设计布局
概念:“Content is like water”。用技术使网页适应从小到到 超大的不同分辨率的屏幕。设置 Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport的参数:width:控制 viewport 的大小height:指定viewport 高度。initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。maximum-sc原创 2020-05-18 17:20:13 · 115 阅读 · 0 评论 -
css:绘制简易描边图形
在用html + css实现我的简历文档的时候,需要用到几个简单多边形,所以采用了css来描绘这是所需效果图的样子:我的思路:绘制描边图形,应该用多个div进行旋转、移动、设置边框的颜色宽度来实现以下是代码讲解:.six-side { width: 86.6px;height: 50px; position: relative;top: 40px; transform: scale(0.8,0.8);/*设置整个图形的缩放*/ display: inline-block;/*允许多个图形原创 2020-05-25 15:56:45 · 633 阅读 · 0 评论 -
css:伪元素:before和:after为什么需要指定一个content
在w3中是这样描述的:在元素上,content 的初始值为 ‘normal’。在:before和:after上,如果指定了 ‘normal’,则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。所以使用:before和:after才需要指定一个看似无意义的 content: ""; 来初始化content的值...原创 2020-05-25 16:12:39 · 1063 阅读 · 0 评论 -
css:margin为负数的情况
虽然margin可以应用到所有元素,但display属性不同时,表现也不同【1】block元素可以使用四个方向的margin值【2】inline元素使用上下方向的margin值无效【3】inline-block使用上下方向的margin负值看上去无效(inline-block使用上下方向的margin负值只是看上去无效,这与其默认的vertical-align:baseline有关系,当垂直对齐的属性值为其他值时,则会显示不同的视觉效果) 以下以display:block的div标签作为示原创 2020-06-15 15:22:32 · 2360 阅读 · 1 评论 -
css:link 和@import 的区别
1、link 是HTML标签;@import 是css语法2、link 在加载DOM时一同加载渲染;而@import在加载完DOM后再加载3、link可以通过js 改变所加载的样式;@import 不行4、link是HTML自带的标签,不存在兼容性问题;@import只有在IE5以上才能被识别...原创 2020-06-29 10:21:09 · 93 阅读 · 0 评论 -
css:scss基本使用
SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件目录 一、变量 二、嵌套 三、引入 四、混合 五、继承 六、操作符 一、变量1、变量以 $ 开头,用来存储一些在css中需要复用的参数;2、变量存在作用域,内部声明的变量无法在外面使用,外部如需引用内部的变量,可在变量值的后面添加!global声明;3、变量名中,中划线等同下划线,值会被第二次定义的原创 2020-07-15 18:33:26 · 1735 阅读 · 0 评论