摘要: 页面布局 layout 文档流(normal flow) 网页是一个多层结构,一层叠着一层。通过CSS可以分别为每一层设置样式,而我们作为用户之只看到最上面这层 在这些层中,最底下的一层被称为文档流,文档流是网页的基础。我们所创建的元素默认都是在文档流中的。 元素在页面中主要有两个状态: 1、在文档 阅读全文
posted @ 2020-09-03 15:27 Cloud% 阅读(391) 评论(0) 推荐(1) 编辑
摘要: 样式的继承 样式的继承:为一个元素设置的样式,同时也会应用到它的后代元素上去。 继承是发生在祖先元素和后代元素上面 继承的设计是为了方便开发,利用继承可以将一些通用的样式统一设置到共同的祖先元素上面,这样只需要设置一次就可以让所有的元素都有该样式。 注意: 并不是所有的样式都会被继承,常见的有背景、 阅读全文
posted @ 2020-08-27 14:58 Cloud% 阅读(1040) 评论(0) 推荐(0) 编辑
摘要: 下载地址:https://github.com/flukeout/css-diner 通过CSS餐厅来练习一些常用的选择器 第一关:元素选择器 plate plate元素 select the plates 第二关:元素选择器 bento bento元素 select the bento plate 阅读全文
posted @ 2020-08-25 12:16 Cloud% 阅读(6901) 评论(0) 推荐(0) 编辑
摘要: 在ES6中使用 const 来声明常量 首先什么是常量,常量就是相对于变量而言不可变动的量,111、'qqq' 这样都是常量。 const nub = 1; console.log(nub); //1 在使用 const 的时候有以下几点需要注意: 1、使用const声明常量一定要赋初始值,否则会产 阅读全文
posted @ 2020-08-10 17:22 Cloud% 阅读(804) 评论(0) 推荐(0) 编辑
摘要: 在ES6中新增加了 let,let 和 var 的用法类似,都是用以声明变量。 let声明变量的方式也和var类似,声明变量或是声明变量并附初始值。 let a; let b,c,d; let e = 100; let f = 251;g = 'qq',h = []; let的特性: 变量不可重复声 阅读全文
posted @ 2020-08-08 16:47 Cloud% 阅读(611) 评论(0) 推荐(1) 编辑
摘要: ECMAScript 相关介绍 1、什么是ECMA ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会。这个协会的目标是评估、开发以及认可电信的计算机的标准。1994年后该组织正式改名为Ecma 国际 2、ECMAScri 阅读全文
posted @ 2020-08-01 16:04 Cloud% 阅读(858) 评论(0) 推荐(0) 编辑
摘要: 盒子的水平布局(横向布局) 元素在其父元素中水平方向的布局由以下的几个属性共同决定 margin-left 左外边距 border-left 左边框 padding-left 左内边距 width 内容区宽度 padding-right 右内边距 border-right 右边框 margin-ri 阅读全文
posted @ 2020-05-10 22:06 Cloud% 阅读(1214) 评论(0) 推荐(0) 编辑
摘要: flex 布局原理 flex 是 flexible box 的缩写,即为 ‘ 弹性布局 ’ ,用来为盒子模型提供最大的灵活性,任何容器后可以指定为 flex 布局 无论是块元素还是行内元素 1、当为父元素盒子设置为 flex 布局之后,子元素的 float、clear 和 vertical-alig 阅读全文
posted @ 2020-05-10 21:23 Cloud% 阅读(1478) 评论(0) 推荐(0) 编辑
摘要: 在网页中 HTML负责结构,CSS负责表现 所以在使用 html标签的时候,因当关注的是标签的语义,而不是标签的表现样式 块元素 (block element)在网页中使用块元素进行布局 行内元素(inline element)行内元素主要用来包裹文字 会在块元素中放行内元素,但是不会在行内元素中放 阅读全文
posted @ 2020-04-29 14:27 Cloud% 阅读(680) 评论(1) 推荐(1) 编辑
摘要: 优先级 运算符 顺序 1 小括号 () 2 一元运算符 ++ -- ! 3 算术运算符 先* / % 后+ - 4 关系运算符 > >= < <= 5 相等运算符 == != !== 6 逻辑运算符 先&& 后|| 7 赋值运算符 = 8 逗号运算符 , 注意: 一元运算符里面的逻辑非优先级很高 逻 阅读全文
posted @ 2020-04-02 13:32 Cloud% 阅读(438) 评论(0) 推荐(1) 编辑
摘要: 超链接可以让我们从一个页面跳转到另一个页面,或者是当前页面的某个指定位置 超链接也是一个行内元素,但是在a 标签中可以嵌套除了它自身之外任何的元素,div也可以放 注意: 1、<a> 标签文本颜色不能继承;2、<a>下划线颜色跟随文本颜色变化进行变化;3、<a>标签不可嵌套a标签 补充:(在编辑器中 阅读全文
posted @ 2020-03-09 13:38 Cloud% 阅读(472) 评论(1) 推荐(1) 编辑
摘要: 图片标签 图片标签 <img> 用于向当前页面中引入一个外部图片 使用 <img> 标签来引入外部图片,img标签是一个自结束标签 img 属于替换元素(基于行内元素和块元素之间)行内块元素inline-block 图片标签。 属性: 【src】:属性指定的是外部图片的路径(路径规则和超链接是一样的 阅读全文
posted @ 2020-03-09 09:39 Cloud% 阅读(628) 评论(0) 推荐(1) 编辑
摘要: HTML <head>元素 head 元素包含了 所有头部标签元素。 可以在头部标签添加的元素包括:<title>、<style>、<link>、<script>、<noscript>、<base>、<script> HTML <title>元素 title 标签定义了不同文档的标题 title 标 阅读全文
posted @ 2020-03-08 22:13 Cloud% 阅读(1119) 评论(0) 推荐(1) 编辑
摘要: DTD(文档类型定义)是一组机器可读的规则,定义XML或HTML特定版本中可以出现哪些东西。 解析网页的时候,浏览器将使用这些规则检查页面的有效性并采取相应的措施。 浏览器通过解析页面的DOCTYPE 声明来了解使用那个DTD,以及使用的是HTML的哪个版本。 DOCTYPE 声明是指 HTML 文 阅读全文
posted @ 2020-03-08 15:11 Cloud% 阅读(331) 评论(0) 推荐(0) 编辑
摘要: 网页简史 世界上第一个网站的创建者 —— 蒂姆.博纳斯-李。1991 年 8 月 6日,世界上第一个服务器和第一个网站在欧洲核子研究中心上线。 世界上第一个网站的网址 http://info.cern.ch/hypertext/WWW/TheProject.html 浏览器是访问网站的工具,前端工程 阅读全文
posted @ 2020-03-08 15:09 Cloud% 阅读(205) 评论(0) 推荐(0) 编辑
摘要: CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1、做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px solid #2e8e9a; 2、使环形转动 animation 动画的实现使用 animation, 阅读全文
posted @ 2020-03-02 22:37 Cloud% 阅读(5575) 评论(0) 推荐(1) 编辑
摘要: 文字覆盖悬停效果: transtion 属性可以被指定为一个或是多个CSS属性的过渡效果,多个属性之间用逗号进行分隔。 每个单属性转换都描述了应该用于单个属性的转换(或特殊值 all 和 none)包括: 1、0或1个值,表示转换适用的属性,包括以下几种情况: 关键字none 关键字all 命名CS 阅读全文
posted @ 2020-03-02 18:50 Cloud% 阅读(1713) 评论(0) 推荐(2) 编辑
摘要: 过度约束 什么是CSS 样式过度约束呢? 一、CSS代码不够精简 代码不够精简,添加过多不必要的约束 例如: 相对定位元素(position: relative; )的垂直位置由 top 和 bottom 决定,一般来说使用其中一个属性即可。 HTML <div> 我是相对定位元素 <div> CS 阅读全文
posted @ 2020-03-02 13:31 Cloud% 阅读(1085) 评论(0) 推荐(1) 编辑
摘要: 传统的项目开发中,我们只会用到 px、%、em这几个单位,可以适用于大部分的项目开发,并且拥有比较好的兼容性。 从CSS3开始,浏览器对于逻辑单位的支持已经提升到了另一个境界,新增了 rem、vh、vw、vm等新的长度单位,利用这些新的单位可以开发出比较好的响应式页面,随之覆盖多种不同分辨路的终端。 阅读全文
posted @ 2020-02-04 19:22 Cloud% 阅读(1408) 评论(0) 推荐(1) 编辑
摘要: 逻辑运算符(布尔运算符)用于将表达式转换为布尔值 运算符 语法 详解 逻辑与 ,AND(&&) 表达式1 && 表达式2 如果表达式1可以转换为 true,就返回表达式2;否则,返回表达式1 逻辑或,OR(||) 表达式1 || 表达式`2 如果表达式1可以转换为 true,则返回表达式1; 否则, 阅读全文
posted @ 2020-02-03 00:11 Cloud% 阅读(317) 评论(0) 推荐(1) 编辑