随笔分类 - 前端
摘要：字面量：数字和字符串 “字面量”即常量，是固定值，不可改变。 字面量有3种： 数字 字符串 布尔字面量 （1）数值的字面量非常简单，写上去就行了，不需要任何的符号。 alert(886); //886是数字，所以不需要加引号。 （2）字符串的字面量也很简单，但一定要加上引号。可以是单词、句子等。例如
阅读全文
摘要：Web前端有三层： HTML：从语义的角度，描述页面结构 CSS：从审美的角度，描述样式（美化页面） JavaScript：从交互的角度，描述行为（实现业务逻辑和页面控制） 浏览器的介绍 浏览器是网页运行的平台，常用的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge
阅读全文
摘要：你是如何理解 HTML 语义化的？ 语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 举例：段落用 p，边栏用 aside，主要内容用 main 标签。 好处： 便于开发者阅读和维护 有利于SEO：让浏览器的爬虫和辅助技术更好的解析， 语义化标签介绍： 在HTML5出来
阅读全文
摘要：如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。 如何让一个行内元素（文字、图片等）水平垂直居中 行内元素水平居中 给父容器设置： text-align: center; 行内元素垂直居中 让文字的行高 等于 盒子的高度，可以让单行文本垂直居中。比如： .fath
阅读全文
摘要：常见的布局属性 （1）display 确定元素的显示类型： block：块级元素。 inline：行内元素。 inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。 （2）positon 确定元素的位置： static：默认属性值。 relative：
阅读全文
摘要：CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。 flex 初体验 我们先来看看下面这个最简单的布局： 上面这张图中的布局是我们都熟悉的：默认文档流中，在一个父容器里放置多个
阅读全文
摘要：本文主要内容： 过渡：transition 2D 转换 transform 3D 转换 transform 动画：animation 过渡：transition transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画
阅读全文
摘要：我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。 本文主要内容： 文本 盒模型中的 box-sizing 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 文本 text-shadow：设置文本的阴影 格式举例： text-shadow: 20px 27px 22px
阅读全文
摘要：CSS3介绍 CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的现状 浏览器支持程度不够好，有些需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛 应对的策略：渐进增强 （1）坚持渐进增强的原则：让低版本浏览器
阅读全文
摘要：CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 相对定位 相对定位：让元素相对于自己原来
阅读全文
摘要：文本主要内容 标准文档流 标准文档流的特性 行内元素和块级元素 行内元素和块级元素的相互转换 浮动的性质 浮动的清除 浏览器的兼容性问题 浮动中margin相关 关于margin的IE6兼容问题 标准文档流 标准文档流的特性 （1）空白折叠现象： 无论多少个空格、换行、tab，都会折叠为一个空格。
阅读全文
摘要：盒子模型 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个： width和height：内容的宽度、高度（不
阅读全文
摘要：本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签，携带了多个类名 !important标记 CSS的继承性 我们给div标签增加红色属性，却发现，div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论： 有一些属性，
阅读全文
摘要：伪类（伪类选择器） 伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 静态伪类和动态伪类 伪类选择器分为两种。 （1）静态伪类：只能用于超链接的样式。如下： :link 超链接点击之前 :visited 链接被访问过之后 PS：以上两种样式，只能用于超链接。
阅读全文
摘要：本文主要内容 CSS概述 CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表 CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器 CSS几种扩展选择器：后代选择器、交集选择器、并集选择器 CSS样式优先级 CSS 概述 CSS：Cascading Style Shee
阅读全文
摘要：background 的常见背景属性 css2.1 中，常见的背景属性有以下几种：（经常用到，要记住） background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。 background-repe
阅读全文
摘要：本文重要内容 CSS的单位 字体属性 文本属性 定位属性：position、float、overflow等 CSS的单位 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。 绝对单位 1 in=2.54cm=25.
阅读全文
摘要：本文主要内容 html 的常见元素 html 元素的分类 html 元素的嵌套关系 html 元素的默认样式和 CSS Reset html 常见面试题 html 的常见元素 html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。 1、head 区域的 htm
阅读全文
摘要：Web 存储 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
阅读全文
摘要：本文主要内容 拖拽 历史 地理位置 全屏 拖拽 如上图所示，我们可以拖拽博客园网站里的图片和超链接。 在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 1、拖拽元素 页面中设置了 draggable="
阅读全文