前端学习笔记
关注
分享
扫一扫
theSunAndSnow
雕栏玉砌应犹在，只是朱颜改。
展开
-
HTML中高度塌陷及其解决办法
高度塌陷产生原因 父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法再撑起父元素的高度，也就会导致父元素的高度塌陷当子元素脱离文档流，比如说position（除relative）、float操作，若这个子元素原本是撑起父元素的高度，因为现在已经脱离文档流，也就是不与起父元素在一个层级了，那么就会造成父元素高度塌陷，不仅如此，还会使父元素的兄弟元素，也就图中的蓝色框框的位...原创 2020-04-08 19:56:17 · 2584 阅读 · 0 评论 -
伸缩布局
伸缩布局伸缩布局技术主要用在移动端。在PC端的高版本浏览器支持，低版本不支持。在PC端一般不用伸缩布局的方式。注意嗷：伸缩布局应该在父盒子的样式中设置，设置完后是对子盒子产生影响。Flex布局常用属性flex-direction作用：控制主轴方向，水平？垂直？从左往右？从右往左？从上到下？从下到上？？主轴的概念：一个盒子里如果所有子盒子都是从上往下排列。则认为从上往下的线条称为 ...原创 2020-04-18 10:38:56 · 184 阅读 · 0 评论 -
如何去除子元素从父元素“继承”的下划线
如何去除子元素从父元素“继承”的下划线问题描述text-decoration 有着自己不同寻常的一面。在 CSS 文档中，我们发现，text-decoration 属性不可被继承。当时，在视觉上，我们惊讶地发现似乎可以继承！实例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2020-06-26 18:19:16 · 944 阅读 · 1 评论 -
vertical-align 各个属性值的含义
vertical-align 各个属性值的含义注意：vertical-align 属性不继承有关基线、行内框、行框、内容区、行距的 定义vertical-align: baselinevertical-align: baseline 强制元素的基线与父元素的基线对齐。（多数浏览器的默认值）vertical-align: supervertical-align: super 使元素基线高于父元素基线，但是高多少规范中没有要求，由用户代理（浏览器）自己决定，不同浏览器可能不同。<sty原创 2020-06-24 16:38:47 · 4770 阅读 · 0 评论 -
a 标签的四个伪类样式优先级
a 标签的四个伪类样式优先级a:link定义链接样式，针对尚未访问的链接。a:visited定义鼠标点击后的链接样式。也就是已访问过的链接的样式。:focus 定义标签获得鼠标焦点（游标）时的样式。a:hover定义鼠标移入 a 标签时的链接样式。a:active定义鼠标点击瞬间的链接样式，active 当然可以用在其它标签上**提示：**在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。**提示：**在 CSS 定义中，a:active原创 2020-06-23 19:44:33 · 815 阅读 · 0 评论 -
关于网页显示[object HTML标签名Element]的问题
关于网页显示[object HTML标签名Element]的问题今天学习在 JS红宝书上的 10.1.8 节关于 DocumentFragment 类型时，按照实例，大致上敲了一遍代码想要看看效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia原创 2020-06-21 11:00:16 · 3729 阅读 · 0 评论 -
在JS中使用dataset获取自定义属性注意事项
在JS中获取自定义属性的注意事项参考链接HTML5 中添加了 data-* 的方式来自定义属性，实际上就是在自定义属性名前加上前缀data- 即可，使用这样的结构可以进行数据存放。使用data-* 可以解决自定义属性混乱无管理的现状。一个自定义一旦加上了前缀 data- ，那么在 JS 中就可以通过 elementNodeObject.dataset拿到这个属性，显然 dataset 是 attribute 集合的一个子集。使用 dataset 获得自定义属性值注意事项直接使用 .操作符即原创 2020-06-20 09:40:08 · 3900 阅读 · 0 评论 -
圣杯布局
两种 CSS 布局圣杯布局与双飞翼布局是需要掌握的两种重要的布局方式。两种的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。常见于电商平台。淘宝圣杯布局来源于国外文章In Search of The Holy Grail，双飞翼布局来源于淘宝 UED遵循特点：两侧宽度固定，中间宽度自适应中间部分在 DOM 结构上优先，以便先行渲染（因为一般情况下中间部分的...原创 2020-04-18 13:39:29 · 986 阅读 · 0 评论