搜索到
9
篇与
CSS
的结果
-
CSS弹性盒 目录：弹性盒<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; list-style: none; } ul{ width: 500px; border: 10px solid red; 将ul设置为弹性容器 display: flex; flex(弹性盒，伸缩盒) - flex 可以使元素具有弹性，让元素可以随页面的大小的改变而改变 - 弹性容器 -要使用弹性盒，必须先将一个元素设置为弹性容器 - 我们通过display 来设置弹性容器 display:flex; 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器 -弹性元素 -弹性容器的子元素是弹性元素 -弹性元素可以同时是弹性容器 /* flex-direction: row; */ flex-direction 指定容器中弹性元素的排列方式 可选值： row 默认值，弹性元素在容器中水平排列（左向右） - 主轴 自左向右 row-reverse 弹性元素在容器中反向水平排列（右向左） - 主轴 自右向左 column 弹性元素纵向排列（自上向下） column-reverse 弹性元素方向纵向排列（自下向上） 主轴： 弹性元素的排列方向称为主轴 侧轴 与主轴垂直方向的称为侧轴 } li{ width: 100px; height: 100px; background-color: #bfa; text-align: center; line-height: 100px; font-size: 20px; /* flex-grow: 1; */ /* flex-shrink: 1; */ 弹性属性 flex-grow 指定弹性元素的伸展的系数 - 当父元素有多余空间的时，子元素如何伸展 - 父元素的剩余空间，会按照比例进行分配 flex-shrink 指定弹性元素的收缩系数 -当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩 } li:nth-child(2){ background-color: orange; } li:nth-child(3){ background-color: blue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>弹性盒样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; list-style: none; } ul{ width: 500px; border: 10px solid red; /* 将ul设置为弹性容器*/ display: flex; /* flex-wrap:nowrap */ flex-wrap : 设置弹性元素是否在弹性容器中自动换行 可选值： nopwrap 默认值，元素不会自动换行 wrap 元素沿者辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行 flex-flow: wrap 和 direction 的简写属性 flex-flow；row wrap justify-content: space-between; justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列） -可选值： flex-start 元素沿着主轴起边排列 flex-end 元素沿着主轴终边排列 center 元素居中排列 space-around 空白分布到元素两侧 space-between 空白均匀分布到两个元素之间 space-evenly 空白分布到元素的单侧 align-items: flex-start; align-items 元素在辅轴上对齐 可选值： stretch ，默认值 ，将元素的长度设置为相同的值 flex-start 元素不会拉伸，沿者辅轴起边对齐 flex-end 沿者辅轴的终边对齐 center 居中对齐 baseline 基线对齐 垂直水平居中: align-items: center; justify-content: center; align-content : 辅路空白空间的分布 align-content: space-between; } li{ width: 100px; height: 100px; background-color: #bfa; text-align: center; line-height: 100px; font-size: 20px; } li:nth-child(2){ background-color: orange; align-self ： 用来覆盖当前弹性元素上的align-items align-self: stretch; } li:nth-child(3){ background-color: blue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>弹性元素的样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; list-style: none; } ul{ width: 500px; border: 10px solid red; /* 将ul设置为弹性容器*/ display: flex; } li{ width: 100px; height: 100px; background-color: #bfa; text-align: center; line-height: 100px; font-size: 20px; flex-grow:1; 弹性的增长系数 flex-shrink:1; 弹性元素的缩减系数 -缩减系数的计算方式比较复杂 -缩减多少是根据 缩减系数 和 元素大小来计算 元素基础长度 flex-basis 指定的是元素在主轴上的基础长度 如果主轴 是横向的则该值指定的元素的宽度 如果主轴 纵向的 则该值指定是就是元素的高度 -默认值是auto，表示参考元素自身的高度和宽度 -如果传递了一个具体的数值，则以该值为准 flex 可以设置弹性元素的三个样式 flex 增长 缩减1 基础 initial "flex:0 1 auto" auto "flex:1 1 auto " none "flex: 0 0 auto" 弹性元素没有弹性 flex: initial; } li:nth-child(1){ order 决定弹性元素的排列顺序 order: 3; } li:nth-child(2){ background-color: orange; order: 1; } li:nth-child(3){ background-color: blue; order: 2; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> -
CSS实现动画效果 目录：一.过渡效果过渡 transition-property: 过渡效果 transition-duration: 指定过渡效果的持续时间 时间单位：s 和ms 过渡(trannsition) -通过过渡可以指定一个属性发生变化时的切换方式 -通过过渡可以创建一些非常好的效果，提升用户的体验 transition-property : 指定过渡的属性,多个属性见使用，隔开,如果所有属性过渡，则使用all关键字 transition-duration: 指定过渡效果的持续时间 单位：s和ms transition-timing-function: 过渡的时序函数 指定过渡的执行的方式 可选值： ease 默认值，慢速开始，先加速，再减速 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速，后减速 cubic-bezier() 来指定时序函数 https://cubic-bezier.com steps() 分布执行过渡效果 可以设置一个第二个值： end，在时间结束时，执行过渡(默认) start 在时间开始时执行过渡 使用方法： transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); transition-timing-function: steps(2,start); transition-delay:过渡效果的延迟，等待一段时间后执行过渡 transition-delay: 2s; 动画效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px; } .box1{ width: 800px; height: 800px; background-color: silver; overflow: hidden; } .box1 div{ width: 100px; height: 100px; margin-top: 20px; } .box1:hover div{ animation-play-state: paused; } .box2{ background-color: #bfa; 设置动画 必须设置关键帧 animation-nam : 要对当前元素生效的关键帧的名 animation-name: text; animation-duration : 动画的执行时间 animation-duration: 4s; 动画的延时 animation-delay: 2s; animation-timing-function:ease-in-out; 动画执行次数 animation-iteration-count 动画执行的次数 可选值： 次数 infinite 无线执行 animation-iteration-count: infinite; animation-direction：指定动画运行的方向 可选值： normal 默认值 从from 向 to 运行 每次都是这样 reverse 从 to 运行 from 每次都是这样 alternate 从from 向to 运行 重复执行动画反向执行 alternate-reverse 从to 向from运行 重复执行动画时方向执行 animation-direction: alternate; animation-fill-mode: 动画填充模式 可选值： none 默认值 动画执行完毕回到原来位置 forwards 动画执行完毕元素会停止在动画结束的位置 backwards 动画延迟等待时，元素就会处于开始位置 both 结合 forward 和backwards animation-play-state: 设置动画的执行状态 可选值： running 默认值 动画执行 paused 动画暂停 } 动画 动画和过渡类似，都可以实现一些动态效果 不同的是过渡需要在某个属性发生变化时才会触发 动画可以自动触发动态效果 设置动画效果，必须要设置一个关键帧，关键帧设置了动画执行的每一个步骤 @keyframes text { from{ margin-left: 0px; } to{ margin-left: 700px; } } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>三.变形transform 用来设置变形效果 -平移： translateX() 沿者x轴方向平移 translateY() 沿者y轴方向平移 translateZ() 沿者z轴方向平移 -平移元素，百分比是相对于自身计算的 z轴变形，旋转以及缩放<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> 设置当前网页的视距为800px 人眼距离网页的距离 body{ perspective: 800px; } .box1{ width: 200px; height: 200px; background-color: #fba; margin: 200px auto; transition: 2s; } z轴平移：调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离 距离越大，元素离人越近 z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视的， 如果需要看见效果必须需设置网页的视距 */ body{ border: 1px solid red; } body:hover .box1{ /*transform: translateZ(800px) translateX(500px); */ 旋转可以使元素沿者x y 或 z 旋转指定的角度 rotateX() rotateY() rotateZ() /* transform: rotateZ(180deg) translateZ(400px); */ transform: rotateY(180deg); 是否显示元素的背面 backface-visibility visible 显示 hidden 不显示 */ backface-visibility: visible; } 缩放：scale() 对元素进行缩放的函数 scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scale() 双方向缩放 transform:scale(2) 缩放两倍 变形原点默认值center transform-origin:20px 20px; </style> </head> <body> <div class="box1"></div> </body> </html>
-
CSS中字体和背景(font && background) 目录：图标字体图标字体（inconfont） -在网页中经常需要使用一些图标，可以通过图片引入图标，但是图片大小本身比较大，并且非常的不灵活 -所以在使用图标时，我们还可以将图标直接设置为字体 通过font-face的形式来对字体进行引入fontawesome 使用步骤 1.官网https://fontawesome.com/ 2.解压 3.将css和webfonts引入到项目中 4.将all.css引入到网页中 5.使用图标字体-直接通过类名来使用图标字体 class="fas fa-bell" fas和fab是固定格式 class="fab ......"通过伪元素来设置图标字体 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab font-family:'Font Awsesome 5 Free'; font-weight:900;字体<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> texte-decoration 设置文本样式 可选值 none underline 下划线 line-through 删除线 overline 上划线 white-space 设置网页如何处理空白 可选值： normal 正常 nowrap 不换行 pre 保留空白 .box1{ width: 100px; white-space: nowrap; overflow: hidden; /*text-overflow:ellipsis将文字多余的显示为省略号，这几项缺一不可*/ text-overflow: ellipsis; } </style> </head> <body> <div class="box1"> ajklsdhaSDFHJddosssssspofsidfu9hjdasoifkjaioekdfjasiodgjhguspfdghjkfvmaf </div> </body> </html>行高行高（line-hight） -行高指的是文字占有的实际高度 -可以通过line-height来设置行高 行高可以指定一个大小（px em） 也可以直接为行高设置一个整数 -行高经常还用来设置文字的行间距 可以将行高设置为何高度一样的值，使单行文字在一个元素中垂直居中背景background-image设置背景图片 语法： background-image: url("图片路径");background-repeat 用来设置背景的重复方式 语法：background-repeat:no-repeat; 可选值： repeat 默认值，背景会沿着x轴和y轴重复 repeat-x 沿者x轴方向重复 repeat-y 沿者y轴方向重复 no-repeat 背景图片不重复background-position 用来设置背景图片的位置 设置方式： 通过top left right bottom center 使用方位词同时必须要指定两个值 通过偏移量来指定背景图片的位置 水平方向偏移量 垂直方向偏移量 background-position:center center; background-position:-100px 300px;设置背景的范围 background-clip 可选值： boder-box 默认值，背景会出现在边框的下边 padding-box 背景不会出现在边框，只出现在内容区和内边距 content-box 背景只会出现在内容区 background-origin 背景图片的偏移量计算的原点 padding-box 默认值，background-position从内边距处开始时计算 content-box 背景图片的偏移量从内容区开始计算 border-box 背景图片的偏移量从边框开始计算 background-origin:border-box; background-clip:content-box; background-size 设置背景图片的大小 第一个值表示宽度 第二个值表示高度 -如果只写一个，则第二个值默认为auto cover 图片的比例不变，将元素铺满 contain 图片比例不变，将图片在元素中完整显示 background-size:contain 了解： background-attachment -背景图片是否跟随元素移动 -可选值： scroll 默认值 背景图片会跟随元素移动 fixed 背景会固定在页面中，不会随元素移动 background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment -background背景相关的简写属性，所有的样式都可以通过改样式来设置,并且该样式没有顺序要求，也没有哪个属性是必须写的 注意： background-size必须写在background-position的后边，使用/隔开 background-position/background-size bakcgroud-origin background-clip 两个样式，orgin要在clip前面 线性渐变<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; 渐变： 通过渐变来设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 ！！渐变是图片，需要通过background-image来设置 线性渐变，颜色沿者一条直线发生变化 linear-gradient() linear-gradient(red,yellow)从红色开头，黄色结尾，中间是过渡区域 -线性渐变的开头，可以指定一个渐变的方向 to left to right to bottom to top xxxdeg deg表示度数 turn turn表示圈 -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布， 也可以手动指定渐变的分布情况 background-image: repeating-linear-gradient() 可以平铺的线性渐变 background-image: linear-gradient( red 50px,yellow 100px); */ background-image: linear-gradient(red,yellow,#bfa); */ background-image: repeating-linear-gradient(red 50px,yellow 100px); } </style> </head> <body> <div class="box1"></div> </body> </html>
-
CSS-定位的简介-相对定位-绝对定位 top bottom left right 绝对定位 -position:absolute -绝对定位的特点 1.不设置偏移量不会发现变化 2.开启绝对定位后，元素会从文档流脱离 3.绝对定位会使元素提示一个层次 4.绝对定位会改变元素的性质，内行变成块，块的宽高被内容撑开 5.绝对定位元素是相对于其包含块进行定位的 包含块 -正常情况下 包含块就是离当前元素最近的祖先元素-绝对定位的包含块 包含块就是离它最近的开启了定位的祖先元素 如果所有的祖先元素都没有开启定位则根元素就是它的包含块 -html（根元素，初始包含块）绝对定位的居中 水平居中 left + margin-left + border-left + padding-left + width + padding-right +border-right + marght-right +right 当我们开启了绝对定位后 水平方向的布局等式就需要添加left 和right 两个值 此时规则和之前一样只是多添加了两个值： 当发生过渡约束： 如果9个值中没有auto 则自动调整right值以使等式满足 如果有auto，则调整auto的值以使等式满足可设置auto值 margin width left right-因为left 和right 的默认值为auto，所以如果不指定left 和right 则等式不满足时，会自动调整这两个值所以是需要设置 left:0; right:0;margin:auto;垂直方向布局的等式也必须要满足 top + margin-top/bottom + padding-top/bottom + border-top/bottom + height +right top:0; buttom:0;margin:auto
-
盒子模型--水平方向布局--垂直方向布局 水平方向布局元素的水平方向的布局 元素在其父元素中水平方向的位置由以下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中，水平居中必须满足以下的等式 margin-left 加 border-left 加 padding-left 加 width 加 padding-right 加 border-right 加 margin-right = 父元素内容区的宽度（必须满足） width为200px 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 0 + 0 + 0 + 200 + 0 + 0 + 600=800 margin-left和width都为200，没有auto 200 + 0 + 0 +200 + 0 + 0 + 0 =800 200 + 0 + 0 +200 + 0 + 0 + 400 =800 以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整 -调整的情况 -如果这七个值中没有 auto 的情况，则浏览器会自动调整margin-right值以使等式 -这七个值中有三个值和设置为auto width margin-left margin-right - 如果某个值为auto，则为自动调整auto的那个值以使等式成立0 + 0 + 0 + auto + 0 + 0 + 0 =800 auto=800 width : auto 0 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=600 width : auto 200 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=400 width :auto auto + 0 + 0 + 200 + 0 + 0 + auto =800 auto=300 margin-left 和 margin-right为auto - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置auto的外边距会自动为0 - 如果将三个值都设置为auto，则外边距都是0，宽度最大 - 如果将两个外边距设置auto，宽度固定值，则会将外边距设置为相同的值 所以我们经常利用这个特点来使一个元素在其父元素中水平居中 示例： width：xxxpx； margin:0 auto;垂直方向布局 使用overflow属性来设置子元素溢出问题 可选值：visible：默认值，正常溢出scroll：生成两个滚动条，通过滚动条来查看完整的你内容auto：根据需要生成滚动条 display 用来设置元素显示类型 可选值inline 将元素设置为行内元素block 将元素设置为块元素inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行table 将元素设置为一个表格none 元素不在页面中显示visibility 用来设置元的显示状态 可选值：visible 默认值，元素在页面中正常显示hidden 元素在页面中隐藏 不显示,但是依然占据页面位置