![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
CSS介绍
前端-小鑫
这个作者很懒,什么都没留下…
展开
-
sass使用教程
SassSass与Scss区别:Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。Sass语法例子:$font-stack: sans-serif $primary-color: #123 body font: 100% $font-stack color: $primary-colorSass语法例子:$font-stack: sans-serif;$primary-col..原创 2021-08-01 11:42:14 · 164 阅读 · 0 评论 -
CSS Gird布局用法
容器属性 grid-template-columns 列 grid-template-rows 行 row-gap 行间距 grid-auto-flow 排列方向 默认row行 排列排版 justify-content 水平 align-content垂直 设置多余的设置大小 grid-auto 容器属性 一个区域由单个或多个组成grid-template-areas 列grid-template-columns grid-temp原创 2021-08-01 11:37:26 · 728 阅读 · 0 评论 -
css 左右固定中间自适应
浮动写法:<div class="box_float"> <style type="text/css"> .box_float { min-height: 100px; } .left { float: left; background: black; width: 300px; } .middl原创 2021-08-01 11:35:39 · 114 阅读 · 0 评论 -
CSS选择器介绍
css三大特性:1.继承性2.优先级3.层叠性优先级等级选择器 权值 权级 !important 10000 5 内联 1000 4 id 100 3 class 10 2 元素选择器 1 1 通配符 0 0 伪类与为元素伪类 :hover :first-child...伪元素 ::before ::after区分伪类是操作对象中档中有的元素,伪元素是没有的原创 2021-07-31 19:54:17 · 90 阅读 · 0 评论 -
css 盒子模型介绍
块盒 display:block 常见标签 div p h1-h6 宽度占整个一行 高度默认为0,可根据内容自行撑开 设置高度有效 行盒 display:inline 常见标签 span a 默认宽度 auto 根据内容展示宽度 有空格会自动默认合并成一个空格 设置高度无效 行块盒 display:inline-block 常见标签input 高度随内容撑开 可设置高度有效原创 2021-07-31 19:53:30 · 92 阅读 · 0 评论 -
CSS 浮动介绍
浮动添加浮动后 默认值宽度将会是0 ,宽度由内容决定 占用的空间将会腾出 元素高度为auto将会自适应内容高度 前面元素浮动后 后面元素如果是块级盒子将会显示在前面元素的底部背景,如果是行盒将会避开,文本都将会跟在前面浮动盒子旁边 盒子里面的内容浮动后,外面包裹的盒子高度坍塌问题 第一种 盒子里面最后添加一个div 属性设置clear:both 第二种 伪元素 盒子属性 clear::after{content:"";clear:both;disp原创 2021-07-31 19:52:07 · 92 阅读 · 0 评论 -
CSS 动画介绍
过渡transitiontransition: property duration timing-function delay; 过渡效果属性,运行时间,运行速度,何时开始默认执行时间是0transition:1s 如果只填写时间则默认全部all过渡属性transition-property 单个或多个属性,多个用逗号隔开 none 没有属性过渡效果 all 所有 耗性能 过渡时间 transition-duration 默认0 没有过渡效果 单原创 2021-07-31 19:51:14 · 90 阅读 · 0 评论 -
css 定位介绍
相对定位 position: relative; 不会脱离文本流 相对自身进行,且偏移后不影响任何元素 margin偏移超出范围则不会超过父级容器,而使用相对定位后 left right等调整可超出父级盒子 left与right冲突 优先left top与bottom冲突优先top 绝对定位 position:absolute 宽高为auto 自适应文本 根据包含块 父级的一个定位元素(相对定位、绝对定位、固定定位) 如果设置了absolut原创 2021-07-31 19:49:34 · 116 阅读 · 0 评论 -
css 垂直水平居中解决方案(6种)
第一种:<html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> .box{ width: 300px; height: 300px; background:...原创 2021-07-31 19:48:39 · 92 阅读 · 0 评论 -
css 弹性布局flex介绍
父级使用弹窗布局 display: flex横向对齐方式justify-content : flex-start //默认靠左 : center //居中 : flex-end //靠右 : space-around //分布对齐 : space-between //两端对齐纵向对齐方式align-items :center //垂居中 :flex-start //顶部默认 :flex-end //底部排列方式flex-direction :row //横向 默认 :r原创 2021-07-31 19:47:03 · 180 阅读 · 0 评论