![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
-恰饭第一名-
流水不争先,争的是滔滔不绝(重补基础中)
展开
-
定位
定位=定位模式+边偏移为什么需要定位:1)浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子2)定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子相对定位relative相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)相对定位的特点:1)它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)2)原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)因此,相对定位并没原创 2021-02-13 23:36:19 · 78 阅读 · 0 评论 -
css3之3D转换
越靠近我们是正的,越远离我们是负的1.translateZ 沿着Z轴移动2.translateZ后面的单位我们一般跟px3.translateZ(100px)向外移动100px(向我们的眼睛来移动的)4.3D移动有简写的方法:transform:translate3d(x,y,z)transform:translate3d(100px,100px,100px)透视perspective透视越小,图像越大透视越大,图像越大透视写在被观察元素的父盒子上面的d:就是视距,视距就是一.原创 2021-02-13 23:35:59 · 84 阅读 · 0 评论 -
动画之css3
动画的基本使用:制作动画分为两步:1.先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称{0%{width:100px;}100%{width:200px;}}2.怎么使用动画调用时间:animation-name:动画名称持续时间:animation-duration:持续时间动画序列1.0%是动画的开始,100%是动画的完成2.在 @keyframes关键帧 中规定某项css样式就能创建由当前样原创 2020-12-15 21:00:37 · 86 阅读 · 0 评论 -
css3之2d转换
translate移动扩展:移动盒子的位置1.定位2.盒子的外边距margin3.2d转换移动语法transform:translate(x,y)重点:1.定义2D转换中的移动,沿着X和Y轴移动2.translate最大的优点是不会影响到其他元素的位置3.translate中的百分比单位是相对于自身元素的translate:(50%,50%)参数是%时,移动的距离是盒子自身的宽度或者高度来对比的4.对行内标签没有效果通过定位让盒子居中现在通过transformrotat原创 2020-12-13 17:05:47 · 120 阅读 · 0 评论 -
弹性盒子css3
CSS3 弹性盒一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间弹性盒子由弹性容器和弹性子元素组成1.弹性盒子通过设置display属性的值为flex或inline-flex将其定义为弹性容器2.弹性容器内包含一个或多个弹性子元素注意弹性容器外以及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每原创 2020-12-08 23:23:05 · 165 阅读 · 0 评论 -
web页面开发13
css3背景background-repeat属性<style>body{ background-image:url('paper.gif'); background-repeat:repeat-y;}</style></head><body><p>repeat-y 设置只有垂直方向重复 background-image</p></body>background-position属性&原创 2020-11-01 10:00:36 · 172 阅读 · 0 评论 -
web页面开发12
border-collapse属性设置表格的边框是否被合并为一个单一的边框<style>table { border-collapse: collapse;}table, td, th { border: 1px solid black;}</style><style>table { border-collapse: separate;}table, td, th { border: 1px solid b原创 2020-10-31 09:25:17 · 232 阅读 · 0 评论 -
淘宝静态页面一
line-height的属性值例如h3{ line-height: normal; line-height: 1.5; /* 相对单位 1.5*16px */ line-height: 200%; /* 相对单位 2*16px */ line-height: 50px; line-height: 5em; /* 相对单位 5*16px */}例如<style> body { fo原创 2020-08-06 00:13:55 · 233 阅读 · 0 评论 -
渡一css8
<div class="wrapper"> <div class="content"></div></div>.wrapper { height: 40px; background-color: aquamarine;}.content { margin: 0 auto; width: 1000px; height: 40px; background-color: coral;}原创 2020-07-28 16:10:14 · 180 阅读 · 0 评论 -
渡一css7
溢出容器,要打点展示1.单行文本<p>微微温暖融化昨夜的冰雪,就像是每一秒都称为岁月</p>p { width: 300px; height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}2.多行文本多行只做截断,不做打点<p>微微温暖融化昨夜的冰雪,就像是每一秒都称为岁月原创 2020-07-28 11:01:41 · 115 阅读 · 0 评论 -
渡一css6
伪元素span::before { content: "杰伦"; position: absolute; left: 0; top: 100px; display: inline-block; width: 100px; height: 100px; background-color: red;}span::after { content: ",是的,的确是这样";}下面是用伪元素选择器解决前面的清除浮动问题而不改动ht原创 2020-07-27 15:17:15 · 166 阅读 · 0 评论 -
渡一css5
两栏布局<div class="right"></div><div class="left"></div>right跟left的顺序不可调换.right { position: absolute; right: 0; width: 100px; height: 100px; background-color: #ffaaaa; opacity: 0.5;}.left { margin-ri原创 2020-07-26 17:11:43 · 147 阅读 · 0 评论 -
css简易版五环
* { margin: 0; padding: 0;}.wrapper { position: relative; border: 2px solid#fff; border-radius: 50%; top: 20%; left: 30%;}.demo { position: absolute; border: 2px solid pink; border-radius: 50%; padding: 10p原创 2020-07-14 06:40:09 · 128 阅读 · 0 评论 -
渡一css4
<1>行级元素(inline)feature:内容决定元素所占位置不可以通过css改变宽高<del><strong><a><del><em><2>块级元素(block)feature:独占一行可以通过css改变宽高<div><p><ul><li><ol><form><address><3>行块级原创 2020-07-13 19:51:56 · 198 阅读 · 0 评论 -
渡一css3
使用一行文字垂直居中显示的方式可以为height=line-height原创 2020-07-10 11:34:32 · 199 阅读 · 0 评论 -
渡一css2
复杂选择器1)父子选择器/派生选择器语法格式:最外面的结构 外面的结构 里面的结构{ }注意:父子选择器中,每一个层级,都不一定要是标签选择器,写 class 选择器也行, 重要的是表达出来父子关系。而且这种父子关系可以是间接地,也有可以是直接 的<div class="wrapper"> <strong class="box"> <span>1234212</span> </strong>原创 2020-07-04 16:54:45 · 205 阅读 · 0 评论