随笔分类 - HTML+css
1、块级元素eg: div、p、h1-h6、ul、li
特点：可以设置width、height
独占一行显示
2、行内元素eg:em、a、i、span
特点：不可以设置width、height
多个在一行显示
3、行内块元素eg:img、input、textarea
特点：可以设置width、height
多个在一行显示
摘要：设置行间距： css：grid-row-gap：像素； css代码： <style> .box{ width: 300px; height: 300px; border:1px solid #000; margin: 50px auto; display: grid; grid-template-r
阅读全文
摘要：## 概念 将一个盒子划分成多个单元格，指定内容放在指定的单元格中，实现一种比较整齐的布局方式。例如：9宫格 css代码： .box{ width: 300px; height: 300px; border: 1px solid #000; /* 网格布局 */ display: grid; gri
阅读全文
摘要：渐变：渐变指的是颜色的渐变，从一个颜色慢慢过渡到另一个颜色。渐变分两种，一种是沿着一条直线发生渐变，另一种围绕一个圆心发生渐变。 线性渐变 语法： ```cssbackground-image: linear-gradient(to 上/下/左/右, 颜色, 颜色, ....); 方向可以是左上，右
阅读全文
摘要：定义动画： @keyframes 动画名称{ 关键帧： 百分比： {样式} } 使用动画： 复合写法 ： animation: 动画名称 动画需要的时长 速度方式 延迟时间 infinite/次数 是否反向运动 动画结束是否停留在结束位置; 单一写法： animation-name：动画名称 ani
阅读全文
摘要：父标签： transform-style: preserve-3d; perspective: 1200px; perspective-origin: 50% 50%; 子标签： 轴平移，正数距离眼睛更近 transform: rotateX() rotateY() rotateZ() 围绕x轴旋转
阅读全文
摘要：3d： 俗称3d变换，指基于3d立体的角度来设置盒子。例如，将盒子设置为立方体。3d的效果跟2d是一样的，有平移和旋转，不同点在于，2d只有x轴和y轴，3d会多一个z轴，用于表示立体。3d的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2d效果，这就需要在设置3d变换效果之
阅读全文
摘要：css样式代码： .big{ width: 1000px; height: 300px; border: 1px solid #000; margin: 100px auto; } .small{ width: 100px; height: 100px; margin-top: 100px; bac
阅读全文
摘要：css样式代码： .big{ width: 500px; height: 500px; border: 3px solid #000; margin: 100px auto; position: relative; } .small{ width: 98px; height: 146px; posi
阅读全文
摘要：属性：属性值； position：fixed; 1、定位参考坐标为浏览器窗口 2、配合top/left/right/bottom属性使用 3、会脱离文档流，不占位
阅读全文
摘要：第一种相对定位 position：relative； 第二种绝对定位 position：absolute； top:0; left:0; right:0; bottom:0; margin:0auto; 第三种弹性盒模型 变成容器 display:flex; 主轴方向居中（默认为水平方向） just
阅读全文
摘要：属性：属性值； position:absolute 1、定位参考对象为有定位的父级元素,如果父级元素没有定位则参考根元素 2、配合方向属性top/left/right/bottom使用 3、绝对定位会脱离文档流，不占位 4、子绝父相 5、层级顺序z-index：number；数字越大在上层显示，默认
阅读全文
摘要：属性：属性值； position:relative; 1、相对自身位置定位，不会脱离文档流 2、配合top/left/right/bottom属性使用
阅读全文
摘要：属性：display 属性值：block块元素（显示元素） inline行内元素 inline-block行内块元素 none隐藏不占位 补充：行内元素添加浮动后可以写width、height并且多个在一行显示
阅读全文
摘要：根据css显示分类，XHTML元素被分为 三种类型： 块状元素，内联（行内）元素，可变元素 && 三种类型： 块状元素，内联（行内）元素，内联”（行内）块元素（css2.1增加） 块元素的特点： A：块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域； B：默认情况下，块元素都会占据
阅读全文
