随笔分类 -  HTML

总结那些有默认margin,padding值的html标签
摘要：一.h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值。 在chrome中：16,15,14,16,17,19; 在firefox中：16,15,14,16,17,20; 在safari中：16,15,14,16,17,19; 在opera中：16,15,1 阅读全文
posted @ 2019-10-08 13:54 shansally 阅读(1281) 评论(0) 推荐(1)
三栏布局（二）——上下宽高固定，中间自适应
摘要：上下宽高固定，中间自适应的几种布局方式， 有4种布局方式： position; flex; table; grid。 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>上下固定，中间自适应</title> </head> <st 阅读全文
posted @ 2019-10-02 15:18 shansally 阅读(453) 评论(0) 推荐(0)
三栏布局的5种解决方案及优缺点
摘要：三栏布局的5种解决方案及优缺点 假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。 这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题，就没有那么简单了。看似简单的一道题，想把它答好是不简单的。往往越简单的题越不好答。如果看到 阅读全文
posted @ 2019-10-02 14:11 shansally 阅读(916) 评论(0) 推荐(0)
Table布局的优缺点
摘要：总结 Table布局的缺点是比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效，优点就是用table做表格是完全正确的 Tables的缺点1、Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)2、Tablle会阻挡浏 阅读全文
posted @ 2019-10-02 13:54 shansally 阅读(4163) 评论(0) 推荐(0)
有几张高度不一样的小图片，如何用html+css实现在同一行垂直居中对齐？
摘要：方法一 ：使用弹性布局 方法二 ：CSS3 transform 属性 父级元素定位 子集元素加属性： position: absolute; top: 50%; transform: translateY(-50%); 方法三： 使用伪元素和vertical-align: middle; .pare 阅读全文
posted @ 2019-09-25 23:37 shansally 阅读(1187) 评论(0) 推荐(1)
自定义动画播放完后恢复到初始状态的问题
摘要：animation-fill-mode 属性 属性规定动画在播放之前或之后，其动画效果是否可见。 js语法：object.style.animationFillMode=none animation-fill-mode : none | forwards | backwards | both;non 阅读全文
posted @ 2019-09-25 22:52 shansally 阅读(904) 评论(0) 推荐(1)
对语义化的理解
摘要：1、什么是HTML语义化？ <基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等> 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 2、为什么要语义化？ 为了在没有CS 阅读全文
posted @ 2019-09-10 15:40 shansally 阅读(2390) 评论(0) 推荐(0)
html lang="en"
摘要：<html lang="en">向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english你的页面如果是中文页面，可将其改为<html lang="zh">zh即表示中文 <html lang=""en">可以输出 阅读全文
posted @ 2019-09-08 00:07 shansally 阅读(5185) 评论(0) 推荐(1)
html为什么用雪碧图的优缺点
摘要：CSS Sprite(雪碧图/精灵图) 1 概念解释 将小图标和背景图像合并到一张图片上，然后利用css的背景/定位来显示需要显示的图片部分。 2 优点 ① 减少加载网页图片时对服务器的请求次数 因为我们在使用雪碧图之后，本来需要多次请求的图片，我们可以一次请求过来，然后使用background-p 阅读全文
posted @ 2019-09-07 15:12 shansally 阅读(932) 评论(0) 推荐(0)
html,将元素水平，垂直居中的四种方式
摘要：将元素垂直，水平居中分两种情况：一个是元素尺寸固定，二是元素尺寸不固定 一.尺寸固定 方法1：定位 ，50%，margin负距 .box{ width: 400px; height: 300px; border: 2px solid black; /* 把元素变成定位元素 */ position: 阅读全文
posted @ 2019-09-07 14:34 shansally 阅读(44553) 评论(0) 推荐(1)
什么是BFC？
摘要：本文总结自饥人谷—方方老师：CSS深入浅出 什么是BFC？为什么这个概念一直被提起？？为什么每一个人都解释不清BFC？？？ 什么是BFC？ BFC 全称为 块格式化上下文 (Block Formatting Context) 。 从这个概念里你能看出来什么吗？ 这个名字给我们的信息只有 “块” “格 阅读全文
posted @ 2019-09-06 00:01 shansally 阅读(291) 评论(0) 推荐(0)
清除浮动的方法（最常用的4种）
摘要：版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/h_qingyi/article/details/81269667为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部 阅读全文
posted @ 2019-09-05 23:36 shansally 阅读(24062) 评论(0) 推荐(2)