随笔分类 -  H5+CSS

日常学习记录
Grid 网格布局（子项）
摘要：grid-column-start（起始）grid-column-end（结束，span 属性，数值前加 span 表示的是网格大小） 水平方向上占据的起始位置和结束位置（最左边的线是1，最上边的线是1） 简写：grid-column：1 / 1； grid-row-start（起始）grid-co 阅读全文
posted @ 2021-01-30 12:01 小_小白 阅读(215) 评论(0) 推荐(0)
Gird 网格布局（父容器）
摘要：grid-template-colimns（列） 和 grid-template-rows（行） 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及 fr 单位（网格剩余空间比例单位）。 有时候，我们网格的划分是很规律的，如果需要添加多个纵横网格时，可以利用 repeat()语法进 阅读全文
posted @ 2021-01-29 08:35 小_小白 阅读(134) 评论(0) 推荐(0)
Flex 弹性盒模型（子项）
摘要：作用在 flex 子项上的CSS属性 取值 含义 order 可以通过设置 order 改变某一个 flex 子项的排序位置。所有 flex 子项的默认 order 属性值是0. （对当前子项进行排序处理） flex-grow 属性中的 grow 是扩展的意思，扩展的就是 flex 子项所占据的宽度 阅读全文
posted @ 2021-01-24 10:43 小_小白 阅读(147) 评论(0) 推荐(0)
Flex 弹性盒模型（父容器）
摘要：display：flex（转变为弹性盒模型） flex-direction： flex-direction 用来控制子项整体布局方向，是从左往右还是从右往左， 是从上往下还是从下往上 取值： row：默认值，显示为行，方向为当前文档水平流方向，默认情况下是从左往右 row-reverse：显示为行， 阅读全文
posted @ 2021-01-23 20:09 小_小白 阅读(135) 评论(0) 推荐(0)
双飞翼布局
摘要：利用 float 和 margin 实现两边固定中间自适应布局 阅读全文
posted @ 2021-01-16 16:16 小_小白 阅读(71) 评论(0) 推荐(0)
等高布局
摘要：利用 margin 和 padding 达到左边右边容器大小一起变化 容器1没有高度，容器2高度发生变化，容器1的高度跟着发生变化 阅读全文
posted @ 2021-01-16 15:57 小_小白 阅读(53) 评论(0) 推荐(0)
CSS Hack
摘要：CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写 不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。 Hack分类： 1、CSS属性前缀法 属性前缀法是在CSS样式属性名前加上一些只有特定浏览器 才能识别的hack前缀，以达到预期的页面展现效果 前缀标识 阅读全文
posted @ 2021-01-16 15:18 小_小白 阅读(110) 评论(0) 推荐(0)
shadow 阴影、mask 遮罩、reflect 倒影、blur 模糊、calc 计算
摘要：text-shadow： 文字阴影 x y 模糊值 color 注意：阴影的默认颜色和设置的颜色相同 可以通过逗号隔开设置多阴影 box-shadow： 盒子阴影 x y 模糊值 范围 颜色 inset（内阴影） 多阴影 注意：默认颜色是黑色， 默认是外阴影，如果设置不起作用，可选的值只有 inse 阅读全文
posted @ 2021-01-16 11:24 小_小白 阅读(296) 评论(0) 推荐(0)
字体图标
摘要：font-face 是CSS3中的一个模块，他主要是把自己定义的 web 字体嵌入到你的网页中。 好处： 1.可以非常方便的改变大小和颜色 2.放大后不会失真 3.减少请求次数和提高加载速度 4.简化网页布局 5.减少设计师和前端工程师的工作量 6.可使用计算机没有提供的字体 用法： @font-f 阅读全文
posted @ 2021-01-11 18:52 小_小白 阅读(68) 评论(0) 推荐(0)
链接集合
摘要：CSS3动画库：https://animate.style/ 页面取色工具下载地址：https://www.baidufe.com/fehelper reset.css 初始化设置网站：https://blog.csdn.net/brain_bo/article/details/81560444 外 阅读全文
posted @ 2021-01-11 18:37 小_小白 阅读(159) 评论(0) 推荐(0)
transform 3D效果
摘要：transform： rotateX（）：正值向上翻转 rotateY（）：正值向右翻转 translateZ（）：正值向前，负值向后 scaleZ（）：立体元素的厚度 3D写法： scale3d（）：三个值 X Y Z translate3d（）：三个值 X Y Z rotate3d（）：四个值 阅读全文
posted @ 2021-01-08 19:19 小_小白 阅读(179) 评论(0) 推荐(0)
animation 动画
摘要：animation-name：自定义动画名字 animation-duration：动画的持续时间 animation-delay：动画的延迟时间 animation-iteration-count：动画的重复次数，默认值是1，infinite 无限次数 animation-timing-funct 阅读全文
posted @ 2021-01-08 17:26 小_小白 阅读(683) 评论(0) 推荐(0)
transform 变形与注意事项
摘要：translate：位移（值是像素） tranform：translateX（） 两个值宽高，不设置的话写0 scale：缩放 （值是一个比例值，正常大小就是1） 也分为X、Y、Z 两个值、宽高 一个值宽高 rotate：旋转（值是角度 deg ） 也分为X、Y、Z（X和Y是3d） Z和rotate 阅读全文
posted @ 2021-01-03 18:15 小_小白 阅读(238) 评论(0) 推荐(0)
transition 过渡
摘要：transition-property： 规定设置过渡效果的CSS属性的名称 transition-duration： 规定完成过渡效果需要多少秒或多少毫秒 transition-delay： 定义过渡效果何时开始 transition-timing-function： 规定速度效果的速度曲线 li 阅读全文
posted @ 2021-01-03 16:57 小_小白 阅读(67) 评论(0) 推荐(0)
BFC规范、BFC触发元素、BFC能解决的一些常见问题
摘要：Formatting context（格式化上下文）是W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位， 以及和其他元素的关系和相互作用。 BFC 即 Block Formatting context（块级格式化上下文），它属于上述 阅读全文
posted @ 2021-01-02 18:09 小_小白 阅读(166) 评论(0) 推荐(0)
盒子模型
摘要：盒子模型的组成 content（物品）>padding（填充物）>border（包装盒）>margin（盒子与盒子之间的间距） content：内容区域 width 和 height 组成的 padding：内边距（内填充） 直接设置数值 padding：10px 10px 10px 10px 上 阅读全文
posted @ 2021-01-02 16:32 小_小白 阅读(77) 评论(0) 推荐(0)
HTML 标签分类
摘要：按类型 block：块 div、p、ul、li、h1…… 独占一行 支持所有样式 不写宽的时候，与父元素的宽相同 所占区域是一个矩形 inline：内联 span、 a、em、strong、img……（img可以设置宽高，因为他还是一个替换元素） 挨在一起的 有些样式不支持，例如width、heig 阅读全文
posted @ 2021-01-02 16:27 小_小白 阅读(220) 评论(0) 推荐(0)
position 定位
摘要：position 特性 css position 属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。 position取值 static（默认） relative（相对定位） 如果没有定位偏移量，对元素本身没有任何影响 不使元素脱离文档 阅读全文
posted @ 2021-01-02 14:31 小_小白 阅读(73) 评论(0) 推荐(0)
H5 部分新语义化标签
摘要：1、header 页眉 2、footer 页脚 3、main 主体 4、hgroup 标题组合 5、nav 导航 注：以上标签结构中只能出现一次 6、article 独立的内容 7、aside 辅助信息的内容 8、section 区域 9、figure 描述图像或视频 10、figcaption 描 阅读全文
posted @ 2021-01-02 11:48 小_小白 阅读(122) 评论(0) 推荐(0)