HTML\CSS
关注
分享
扫一扫
文章平均质量分 50
学习过程中遇到的一些知识点
Anita-Sun
一只热衷于分享前端知识的奶牛猫~ ️
展开
-
TailWind 使用指南
TailWind 使用指南原创 2022-08-30 21:17:44 · 2582 阅读 · 0 评论 -
如何封装 svg
封装 svg原创 2022-08-02 15:14:14 · 362 阅读 · 0 评论 -
懒加载的实现
一、什么是懒加载？懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载二.为什么要懒加载？减少无用资源的加载提升用户体验防止加载过多图片而影响其它资源文件的加载三.懒加载的实现原理？图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性原创 2022-01-31 17:45:27 · 6420 阅读 · 6 评论 -
emmmmm 一个简单的HTML切换图片Demo
前提最近正在复习 html，作为一个前端程序员，竟然不太会写html，实在是惭愧…刚才做一个简单的Demo，发现了一个很有意思的错误，话不多说，让咱们来看代码请检查以下代码，为什么点击图片无法实现切换呢？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=原创 2021-11-13 16:44:53 · 707 阅读 · 0 评论 -
HTML-script标签异步加载
HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。<script src=".原创 2021-03-14 22:01:41 · 1182 阅读 · 0 评论 -
深入解析CSS第六章网页布局开启新纪元——读书笔记
6.1网页布局开启新纪元构建基础网格display: grid定义一个网格容器grid-template-columns/grid-template-rows：定义了网格每行每列的大小（fr：代表每一列(或每一行)的分数单位）grid-template-columns: 300px 1fr定义了一个固定宽度为300px的列，后面跟着一个会填满剩余可用空间的列。2fr的列宽是1fr的两倍grid-gap：定义了每个网格单元之间的间距（grid-gap:0.5em 1em 指定垂直和水平方向的原创 2021-01-28 20:26:59 · 152 阅读 · 0 评论 -
深入解析CSS第五章对齐、间距等问题——读书笔记
5.4 对齐、间距等细节实现对齐属性原创 2021-01-26 17:38:34 · 140 阅读 · 0 评论 -
深入解析CSS第五章弹性方向——读书笔记
5.3 弹性方向实现下面这种布局可以让右边区域随着左边区域高度的增加而对应的增加，而不是下面这种5.3.1 改变弹性方向在右侧创建一个弹性列5.3.2 登录表单的样式原创 2021-01-26 17:21:02 · 146 阅读 · 0 评论 -
深入解析CSS第五章弹性子元素的大小——读书笔记
5.2 弹性子元素的大小flex属性控制弹性子元素在主轴方向上的大小将主容器设置为Flexbox使用flex属性设置列宽5.2.1 使用flex-basis属性它的初始值是auto，此时浏览器会检查元素是否设置了width属性值。如果有，则使用width的值作为flex-basis的值；如果没有，则用元素内容自身的大小。如果flex-basis的值不是auto, width属性会被忽略5.2.2 使用flex-grow属性5.2.3 使用flex-shrink属性以上属性原创 2021-01-26 16:50:43 · 160 阅读 · 2 评论 -
深入解析CSS第五章Flexbox的原则——读书笔记
5.1 Flexbox的原则给元素添加display:flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）弹性子元素高度相等，该高度由它们的内容决定一个弹性容器能控制内部元素的布局使用flex布局简单实现一个网页网页的基础样式5.1.1 创建一个基础的Flexbox菜单—————————————————浏览器前缀旧版Safari实现的是display:-webkit-flex属性名之前也要加原创 2021-01-26 15:52:12 · 136 阅读 · 0 评论 -
深入解析CSS第四章网格系统——读书笔记
4.5 网格系统借助网格系统可以提高代码的可复用性网格系统提供了一系列的类名，可添加到标记中，将网页的一部分构造成行和列。它应该只给容器设置宽度和定位，不给网页提供视觉样式，比如颜色和边框。大部分流行的CSS框架包含了自己的网格系统。它们的实现细节各不相同，但是设计思想相同：在一个行容器里放置一个或多个列容器。列容器的类决定每列的宽度。4.5.1 理解网格系统通常网格系统的每行被划分为特定数量的列，一般是12个，但也可以是其他数。选取12作为列数是因为它能够被2、3、4、6整除，组合起来足原创 2021-01-26 00:01:02 · 175 阅读 · 0 评论 -
深入解析CSS第四章媒体对象和BFC——读书笔记
一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能原创 2021-01-25 22:34:21 · 178 阅读 · 0 评论 -
深入解析CSS第四章出乎意料的“浮动陷阱“——读书笔记
4.3 出乎意料的"浮动陷阱"第三个盒子出现在了右边，导致第一个盒子下面出现了一片非常大的空白。 这是因为浏览器会将浮动元素尽可能地放在靠上的地方。如果每个浮动盒子的高度不一样，最后的布局可能千变万化。同理，改变浏览器的宽度也会造成相同的结果，因为它会导致换行，从而改变元素高度。而我们真正想要的是每行有两个浮动盒子。解决方案：清除每行的第一个元素上面的浮动。由于已知每行有两个盒子，因此只需要清除每行的第奇数个元素上面那行的浮动即可给媒体元素添加外边距前面的猫头鹰选择器也会给第一原创 2021-01-25 17:39:44 · 148 阅读 · 0 评论 -
深入解析CSS第四章容器折叠和清除浮动——读书笔记
4.2.1 理解容器折叠将四个媒体盒子浮动到左侧，可以看到本来应该出现在四个媒体盒子底部的白色背景仅仅出现在了Running tips下面原因：浮动是为了实现文字围绕浮动元素排列的效果。如果图片比段落文字高，下一会直接从上一段的文字下面开始，两段文字都会围绕浮动的图片排列。解决方案1容器向下扩展，直到包含清除浮动元素clear: both; 让该元素移动到浮动元素的下面clear: left(right); 这样只会相应地清除向左或者向右浮动的元素因为div本身没有浮动，所以原创 2021-01-25 17:08:07 · 176 阅读 · 2 评论 -
深入解析CSS第四章浮动的设计初衷——读书笔记
4.1 浮动的设计初衷浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。如果让多个元素向同侧浮动，它们就会挨着排列之所以这样做是因为它是那个年代唯一的选择。后来，display: inline-block和display: table的问世才让我们有了别的方案，尽管二者可替代的场景有限。Flexbox和网格布局最近几年才出现，在它们出现之前，浮动一直承担着页面布局的重任双容器模式body是外层容器。默认是100%的网页宽度。在body内部放置了一个<di原创 2021-01-25 16:02:16 · 175 阅读 · 0 评论 -
深入解析CSS第三章容器内的元素间距——读书笔记
容器内的元素间距给侧边栏加上，两个社交按钮设置侧边栏按钮的大小、字体、颜色此时，没有外边距的它们直接上下堆叠在一起。现在有两个选择，分别或同时指定他们的上下外边距，两个按钮之间会发生外边距折叠然而不管选择哪种方式，都会遇到一个问题：侧边栏的内边距需要跟按钮的外边距接触。如果加上margin-top: 1.5em，最终效果如图3-20所示。有以下几种方法解决上述问题——————————————相邻的兄弟组合器——————————————使用相邻兄弟组合给按钮之间加上一个外边距原创 2021-01-25 14:53:02 · 848 阅读 · 0 评论 -
深入解析CSS第三章外边距折叠——读书笔记
3.4 外边距折叠当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。这种现象被称作折叠3.4.1 文字折叠段落（<p>）默认有1em的上外边距和1em的下外边距。由于会折叠，只产生1em的间隔标题的下方有19.92px的外边距（24px字号× 0.83em外边距），段落顶部有16px的外边距（16px字号×1em外边距）。它们中的较大者是19.92px，也就是最终渲染的两个元素之间的间距。3.4.2 多个外边距折叠包裹在div里的段落也会产生外边距折叠<原创 2021-01-25 00:08:27 · 212 阅读 · 0 评论 -
深入解析CSS第三章负外边距——读书笔记
3.3 负外边距负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来如果不给一个块级元素指定宽度，它会自然地填充容器的宽度。但如果在右边加上负外边距，则会把它拉出容器。如果在左边再加上相等的负外边距，元素的两边都会扩展到容器外面负外边距并不常用，但是在某些场景下很实用，尤其是当创建列布局的时候。不过应当避免频繁使用，不然网页的样式就会失控。...原创 2021-01-24 23:38:05 · 182 阅读 · 0 评论 -
深入解析CSS第三章元素高度问题——读书笔记
3.2 元素高度的问题最好避免给元素指定明确的高度，因为子元素可以撑大父元素盒子。普通文档流：指的是网页元素的默认布局行为。行内元素跟随文字的方向从左到右排列，当到达容器边缘时会换行。块级元素会占据完整的一行，前后都有换行。3.2.1 控制溢出行为当明确设置一个元素的高度时，内容可能会溢出容器。使用overflow属性可以控制溢出内容的行为❑ visible（默认值）——所有内容可见，即使溢出容器边缘。❑ hidden——溢出容器内边距边缘的内容被裁剪，无法看见。❑ scroll——原创 2021-01-24 23:10:09 · 485 阅读 · 0 评论 -
深入解析CSS第三章元素宽度问题——读书笔记
3.1 元素宽度的问题如何构建下面这个简单的网页呢？先写好HTML写好基本样式的CSS代码说明因为IE有一个bug，它会默认将<main>元素渲染成行内元素，而不是块级元素，所以代码中我们用声明display: block来纠正。使用浮动布局结果：出现这种结果的原因是因为盒模型的模型。当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。侧边栏的宽度等于30%宽度加上各1.5em的左右内边距，主容器的宽度只占70%。两列宽原创 2021-01-24 21:51:47 · 313 阅读 · 0 评论 -
深入解析CSS第二章自定义属性——读书笔记
自定义属性声明一个变量，为它赋一个值，然后在样式表的其它地方可以引用这个值，这样做可以减少样式表中的重复例：定义一个自定义属性变量名前面必须有两个连字符–；变量必须在一个声明块内声明，这里使用了：root选择器，因此该变量可以在整个网页使用使用自定义属性提供备用值var()函数接受第二个参数，它指定了备用值。如果第一个参数指定的变量未定义，那么就会使用第二个值。注意：如果var()函数算出来的是一个非法值，对应的属性就会设置为其初始值。比如，如果在padding: var(原创 2021-01-23 15:29:12 · 122 阅读 · 0 评论 -
深入解析CSS第二章无单位的数值和行高——读书笔记
2.5 无单位的数值和行高允许无单位值的属性：line-height、z-index、font-weight任何单位长度（px、em、rem）都可以用无单位的值的0，但是不能用于角度值，比如度，或者时间相关的值，比如秒。line-height属性比较特殊，它的值既可以有单位也可以无单位。通常我们应该使用无单位的数值。line-height的有单位和无单位无单位：行高 = line-height * 文字大小这个段落继承了行高1.2。因为段落字号是32px（2em × 16px，浏览器默认原创 2021-01-23 14:33:14 · 264 阅读 · 0 评论 -
深入解析CSS第二章视口的相对单位——读书笔记
2.4 视口的相对单位相对于浏览器视口定义长度的视口的相对单位视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。vh：视口高度的1/100。vw：视口宽度的1/100。vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏原创 2021-01-23 12:05:52 · 260 阅读 · 0 评论 -
深入解析CSS第二章停止像素思维——读书笔记
2.3 停止像素思维反模式：全局重置font-size为10px（从默认字号16px缩小为10px，便于计算rem的值）缺点：需要写很多重复的代码，因为10px对大部分字体来说太小了这种做法的本质还是像素思维。在响应式网页中，需要习惯“模糊”值。em的值是多少像素不重要，重要的是在页面上的效果合适就行。设置一个合理的默认字号设置真正的默认字号使用相对单位构造响应式面板媒体查询：即@media规则，可以指定某种屏幕尺寸或者媒体类型（比如，打印机或者屏幕）下的样式。在不同原创 2021-01-23 11:21:44 · 150 阅读 · 0 评论 -
深入解析CSS第二章em和rem——读书笔记
2.2 em和remem当前元素的px = 当前元素的字号（如果当前元素没有设置字号的大小，就设置为继承的字号）* 当前元素的em对于大多数浏览器来说，默认的字号是16px当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放改变字号就可以整体缩放元素可能出现的问题声明值和计算值不一致（padding是基于刚算出来的slogan类里的font-size，原创 2021-01-23 09:57:33 · 156 阅读 · 0 评论 -
深入解析CSS第一章简写属性——读书笔记
简写属性font: font-style、font-weight、font-size、font-height以及font-family。background: background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip以及background-attachment。border: border-width、border原创 2021-01-22 11:43:58 · 237 阅读 · 0 评论 -
深入解析CSS第一章特殊值——读书笔记
使用inherit关键字可以该元素继承父元素的值例：给网页加上一个浅灰色的页脚这么做的好处是，如果页脚发生任何样式改变的话（比如修改第二个规则集，或者被别的样式覆盖），页脚链接的颜色就会跟着页脚其他内容一起改变。比如，当页脚文本变为更深的灰色时，其中的链接也会跟着改变。使用initial关键字撤销某个元素的样式例：在大多数浏览器中，黑色是color属性的初始值如果想删除一个元素的边框，设置border: initial即可。如果想让一个元素恢复到默认宽度，设置widt.原创 2021-01-22 11:24:23 · 185 阅读 · 0 评论 -
深入解析CSS第一章继承——读书笔记
如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值可以被继承的属性跟文本相关的属性color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。列表属性list-style、list-style-type、list-style.原创 2021-01-22 10:38:30 · 108 阅读 · 0 评论 -
深入解析CSS第一章层叠——读书笔记
盒模型和border-box当指定一个元素的宽度或高度时，便设置了元素内容的尺寸——任何内边距（padding）、边框（border）、外边距（margin）都会基于它叠加。给元素设置box-sizing: border-box会改变盒模型，使其获得更好的可预测性。指定宽度或高度时，会设置整个元素尺寸，包括内边距和边框第一章 层叠、优先级和继承1.1 层叠概念//包含在大括号内的一组声明被称作一个声明块//声明块前面有一个选择器//选择器和声明块组成了规则集body {原创 2021-01-22 10:25:40 · 276 阅读 · 0 评论 -
复习day2-web开发
background-size移动端主流方案单独制作移动端页面响应式兼容PC移动端移动端浏览器CSS初始化normalize.css特殊样式移动端常见布局流式布局（百分比布局）flex布局常见的父项属性flex-direction: 设置主轴的方向justify-content: 设置主轴上子元素的排列方式flex-wrap: 设置子元素是否换行align-content: 设置侧轴上子元素的排列方式（多行）align.原创 2021-01-21 11:26:48 · 91 阅读 · 0 评论 -
回顾HTML\CSS小案例
padding影响盒子好处固定定位小技巧：固定在版心右侧的位置土豆遮罩层轮播图css中的三角形溢出的文字省略号显示文字围绕浮动元素css三角强化伪元素选择器伪元素使用场景1：伪元素字体图标伪元素使用场景2-仿土豆网显示遮罩层案例伪元素使用场景3：伪元素清除浮动进度条旋转的三角（设置transform相对于不加transform的状态）图片放大案例热点图步长 + 奔跑的熊大两面翻转的盒子..原创 2021-01-20 23:20:21 · 174 阅读 · 0 评论