随笔分类 -  css

关于css中的子绝父相
摘要：刚开始学习css的时候一直认为只有父元素设置了position:relative子元素设置的position:absolute才会相对于父元素起效。否则就会向上一级搜寻设置了relative属性的元素并相对于其进行定位。 后来发现并不是 父元素设置了position:fixed属性的话子元素一样可以 阅读全文
posted @ 2021-01-18 08:35 echobbd 阅读(1344) 评论(0) 推荐(0)
轮播图的实现（自动和手动）
摘要：动画实现轮播图的自动播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti 阅读全文
posted @ 2020-11-24 20:09 echobbd 阅读(890) 评论(1) 推荐(1)
html5css3提高
摘要：html新增的特性 注意：这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持。 html5新增的语义化标签 <header>： 头部标签 <nav> :导航标签 <artile> ：内容标签 <section> ：定义文档某个区域 <aside> ：侧边栏标签 <footer> ：尾部标 阅读全文
posted @ 2020-09-30 16:41 echobbd 阅读(241) 评论(0) 推荐(0)
外边距塌陷问题的解决办法
摘要：会导致外边距塌陷的两种情况 情况一：两个兄弟盒子，上面的盒子设置了margin-bottom,下面的盒子设置了margin-top,实际中会取值较大的那个属性值显示在网页中。这种情况一般较为少见。这两个属性只设置一个即可解决。 情况二：嵌套盒子（父元素与子元素）间的外边距塌陷（发生在垂直方向上的外边 阅读全文
posted @ 2020-09-14 09:39 echobbd 阅读(1551) 评论(0) 推荐(0)
css background属性
摘要：background-origin 定义图片从哪儿开始定位，可选的属性有padding-box(默认图片从内边距开始),border-box（定义图片从边框开始）,content-box（定义从元素的内容部分为起始位置） background-clip 设置图片裁剪的区域 阅读全文
posted @ 2020-06-23 11:29 echobbd 阅读(127) 评论(0) 推荐(0)
css的hsla()函数
摘要：例如：background-color:hsla(120,100%,50%,0.3); hsla()函数（Hue,Saturation,Lightness,Alpha）使用色相，亮度，透明度来定义颜色 色相：色彩的基本属性，就是平常所说的颜色名称，如红色，黄色。 饱和度：是指色彩的纯度，越高色彩越纯 阅读全文
posted @ 2020-06-23 10:51 echobbd 阅读(360) 评论(0) 推荐(0)
css的自定义属性
摘要：自定义属性允许作者自由的选择名称，自由的为名称属性分配任意值。这些属性能够提供给var()函数使用，被var()函数引用的自定义属性又常被成为变量。 自定义属性：使用前缀'--'来声明自定义属性。使用var()函数来使用自定义属性。 例如： ul{ --accent-color:purple; } 阅读全文
posted @ 2020-06-23 10:04 echobbd 阅读(282) 评论(1) 推荐(0)
css 3D转换
摘要：3D转换我们主要学习工作中最常用的3D位移和3D旋转主要知识点●3D位移: translate3d(x,y,z)●3D旋转: rotate3d(x,y,z) D●透视: perspective●3D呈现transfrom-style 6.2 3D移动translate3d3D移动在2D移动的基础上多 阅读全文
posted @ 2020-05-12 13:09 echobbd 阅读(226) 评论(0) 推荐(0)
css3动画效果
摘要：5.1动画的基本使用制作动画分为两步:1. 先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器) @keyframes 动画名称{ 0%{ } 100%{ } } 动画序列●0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列。●在 @keyframes中 阅读全文
posted @ 2020-05-09 21:44 echobbd 阅读(267) 评论(0) 推荐(0)
css transform的2D转换
摘要：导读： ●转换transform我们简单理解就是变形有2D和3D之分 ●我们暂且学了三个分别是位移旋转和缩放 ●2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用% ,是相对于自身宽度和高度来计算的 ●可以分开写比如translateX(x)和translateY(y) ● 阅读全文
posted @ 2020-05-09 09:54 echobbd 阅读(389) 评论(0) 推荐(0)
css中的常见单位
摘要：css中的长度单位一共有8个，分别是px,em,pt,ex,pc,in,mm,cm; px:像素（pixel），相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。 em:相对长度单位，相对于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。 ex:相 阅读全文
posted @ 2020-05-08 09:54 echobbd 阅读(1055) 评论(0) 推荐(0)
css解决盒子水平排列边框叠加变粗的问题
摘要：问题： 解决： 对第一个和第二个盒子都添加margin-left:-mpx;(m表示边框的大小)，这样两个边框就重叠在了一起，就不会看起来有加粗的效果了。 疑问： 第一个盒子向左移动mpx，第二个盒子也向左移动mpx，两个盒子的相对位置并没有改变。 说明： 浏览器在渲染的时候，先对盒子1进行执行，完 阅读全文
posted @ 2020-04-19 09:17 echobbd 阅读(1669) 评论(0) 推荐(0)
css小三角的制作
摘要：小引： 思考：给定一个盒子，其宽度高度为0，给定上下左右各10px的边框，设置四个边框颜色不同，会是什么效果。 <style> div { width: 0; height: 0; border-left: 10px solid pink; border-top: 10px solid red; b 阅读全文
posted @ 2020-04-18 22:00 echobbd 阅读(208) 评论(0) 推荐(0)