Cloud% - 博客园

2020年9月3日

摘要：页面布局 layout 文档流（normal flow）网页是一个多层结构，一层叠着一层。通过CSS可以分别为每一层设置样式，而我们作为用户之只看到最上面这层在这些层中，最底下的一层被称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中的。元素在页面中主要有两个状态： 1、在文档阅读全文

posted @ 2020-09-03 15:27 Cloud% 阅读(405) 评论(0) 推荐(1) 编辑

2020年8月27日

CSS样式继承和样式权重

摘要：样式的继承样式的继承：为一个元素设置的样式，同时也会应用到它的后代元素上去。继承是发生在祖先元素和后代元素上面继承的设计是为了方便开发，利用继承可以将一些通用的样式统一设置到共同的祖先元素上面，这样只需要设置一次就可以让所有的元素都有该样式。注意：并不是所有的样式都会被继承，常见的有背景、阅读全文

posted @ 2020-08-27 14:58 Cloud% 阅读(1067) 评论(0) 推荐(0) 编辑

2020年8月25日

CSS选择器餐厅练习

摘要：下载地址：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% 阅读(7118) 评论(0) 推荐(0) 编辑

2020年8月10日

const声明常量以及特点

摘要：在ES6中使用 const 来声明常量首先什么是常量，常量就是相对于变量而言不可变动的量，111、'qqq' 这样都是常量。 const nub = 1； console.log(nub); //1 在使用 const 的时候有以下几点需要注意： 1、使用const声明常量一定要赋初始值，否则会产阅读全文

posted @ 2020-08-10 17:22 Cloud% 阅读(856) 评论(0) 推荐(0) 编辑

2020年8月8日

ES6：let声明以及声明特性

摘要：在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% 阅读(647) 评论(0) 推荐(1) 编辑

2020年8月1日

ECMAScript 简介

摘要： ECMAScript 相关介绍 1、什么是ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会。这个协会的目标是评估、开发以及认可电信的计算机的标准。1994年后该组织正式改名为Ecma 国际 2、ECMAScri 阅读全文

posted @ 2020-08-01 16:04 Cloud% 阅读(892) 评论(0) 推荐(0) 编辑

2020年5月10日

CSS 盒子模型水平垂直方向布局

摘要：盒子的水平布局（横向布局）元素在其父元素中水平方向的布局由以下的几个属性共同决定 margin-left 左外边距 border-left 左边框 padding-left 左内边距 width 内容区宽度 padding-right 右内边距 border-right 右边框 margin-ri 阅读全文

posted @ 2020-05-10 22:06 Cloud% 阅读(1256) 评论(0) 推荐(0) 编辑

弹性布局 flex

摘要： flex 布局原理 flex 是 flexible box 的缩写，即为 ‘ 弹性布局 ’ ，用来为盒子模型提供最大的灵活性，任何容器后可以指定为 flex 布局无论是块元素还是行内元素 1、当为父元素盒子设置为 flex 布局之后，子元素的 float、clear 和 vertical-alig 阅读全文

posted @ 2020-05-10 21:23 Cloud% 阅读(1588) 评论(0) 推荐(0) 编辑

2020年4月29日

HTML语义化标签

摘要：在网页中 HTML负责结构，CSS负责表现所以在使用 html标签的时候，因当关注的是标签的语义，而不是标签的表现样式块元素（block element）在网页中使用块元素进行布局行内元素（inline element）行内元素主要用来包裹文字会在块元素中放行内元素，但是不会在行内元素中放阅读全文

posted @ 2020-04-29 14:27 Cloud% 阅读(696) 评论(1) 推荐(1) 编辑

2020年4月2日

运算符优先级

摘要：优先级运算符顺序 1 小括号（） 2 一元运算符 ++ -- ！ 3 算术运算符先* / % 后+ - 4 关系运算符 > >= < <= 5 相等运算符 == != !== 6 逻辑运算符先&& 后|| 7 赋值运算符 = 8 逗号运算符 , 注意：一元运算符里面的逻辑非优先级很高逻阅读全文

posted @ 2020-04-02 13:32 Cloud% 阅读(470) 评论(0) 推荐(1) 编辑

2020年3月9日

HTML 超链接

摘要：超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的某个指定位置超链接也是一个行内元素，但是在a 标签中可以嵌套除了它自身之外任何的元素，div也可以放注意： 1、<a> 标签文本颜色不能继承；2、<a>下划线颜色跟随文本颜色变化进行变化；3、<a>标签不可嵌套a标签补充：（在编辑器中阅读全文

posted @ 2020-03-09 13:38 Cloud% 阅读(532) 评论(1) 推荐(1) 编辑

HTML 图片标签

摘要：图片标签图片标签 <img> 用于向当前页面中引入一个外部图片使用 <img> 标签来引入外部图片，img标签是一个自结束标签 img 属于替换元素（基于行内元素和块元素之间）行内块元素inline-block 图片标签。属性：【src】：属性指定的是外部图片的路径（路径规则和超链接是一样的阅读全文

posted @ 2020-03-09 09:39 Cloud% 阅读(684) 评论(0) 推荐(1) 编辑

2020年3月8日

HTML 头部标签

摘要： HTML <head>元素 head 元素包含了所有头部标签元素。可以在头部标签添加的元素包括：<title>、<style>、<link>、<script>、<noscript>、<base>、<script> HTML <title>元素 title 标签定义了不同文档的标题 title 标阅读全文

posted @ 2020-03-08 22:13 Cloud% 阅读(1294) 评论(0) 推荐(1) 编辑

HTML 文档声明

摘要： DTD（文档类型定义）是一组机器可读的规则，定义XML或HTML特定版本中可以出现哪些东西。解析网页的时候，浏览器将使用这些规则检查页面的有效性并采取相应的措施。浏览器通过解析页面的DOCTYPE 声明来了解使用那个DTD，以及使用的是HTML的哪个版本。 DOCTYPE 声明是指 HTML 文阅读全文

posted @ 2020-03-08 15:11 Cloud% 阅读(341) 评论(0) 推荐(0) 编辑

HTML 基础

摘要：网页简史世界上第一个网站的创建者 —— 蒂姆.博纳斯-李。1991 年 8 月 6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。世界上第一个网站的网址 http://info.cern.ch/hypertext/WWW/TheProject.html 浏览器是访问网站的工具，前端工程阅读全文

posted @ 2020-03-08 15:09 Cloud% 阅读(214) 评论(0) 推荐(0) 编辑

2020年3月2日

CSS 加载动画

摘要： CSS加载动画实现加载动画效果，需要的两个关键步骤： 1、做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px solid #2e8e9a; 2、使环形转动 animation 动画的实现使用 animation，阅读全文

posted @ 2020-03-02 22:37 Cloud% 阅读(5618) 评论(0) 推荐(1) 编辑

CSS 文字覆盖图像悬停效果

摘要：文字覆盖悬停效果： transtion 属性可以被指定为一个或是多个CSS属性的过渡效果，多个属性之间用逗号进行分隔。每个单属性转换都描述了应该用于单个属性的转换（或特殊值 all 和 none）包括： 1、0或1个值，表示转换适用的属性，包括以下几种情况：关键字none 关键字all 命名CS 阅读全文

posted @ 2020-03-02 18:50 Cloud% 阅读(1840) 评论(0) 推荐(2) 编辑

CSS样式过度约束

摘要：过度约束什么是CSS 样式过度约束呢？一、CSS代码不够精简代码不够精简，添加过多不必要的约束例如：相对定位元素（position: relative; ）的垂直位置由 top 和 bottom 决定，一般来说使用其中一个属性即可。 HTML <div> 我是相对定位元素 <div> CS 阅读全文

posted @ 2020-03-02 13:31 Cloud% 阅读(1104) 评论(0) 推荐(1) 编辑

2020年2月4日

px、em、rem、vh、vw、vm等CSS单位

摘要：传统的项目开发中，我们只会用到 px、%、em这几个单位，可以适用于大部分的项目开发，并且拥有比较好的兼容性。从CSS3开始，浏览器对于逻辑单位的支持已经提升到了另一个境界，新增了 rem、vh、vw、vm等新的长度单位，利用这些新的单位可以开发出比较好的响应式页面，随之覆盖多种不同分辨路的终端。阅读全文

posted @ 2020-02-04 19:22 Cloud% 阅读(1729) 评论(0) 推荐(1) 编辑

2020年2月3日

JavaScript 逻辑运算符

摘要：逻辑运算符（布尔运算符）用于将表达式转换为布尔值运算符语法详解逻辑与，AND（&&）表达式1 && 表达式2 如果表达式1可以转换为 true，就返回表达式2；否则，返回表达式1 逻辑或，OR（||）表达式1 || 表达式`2 如果表达式1可以转换为 true，则返回表达式1；否则，阅读全文

posted @ 2020-02-03 00:11 Cloud% 阅读(347) 评论(0) 推荐(1) 编辑