07 2022 档案
摘要：因为我本人学过的计算机语言到倒还是蛮多的，所有在这里就简单的说一下JS的基本内容，基本很多计算机语言都是公用的。 什么是JS？ JS是一种运行在客户端（浏览器）的一种计算机语言，主要作用是实现人机交互（告诉计算机我想要做什么操作，类比其他计算机语言，因为语言的存在就是为了大家相互联系、沟通，计算机语
阅读全文
摘要：这次使用空间转换来完成立体图形，需要用到定位，旋转，位移。 首先需要六个高宽200px的平面，每个颜色不一样。可以清除的看到六个平面是一种平铺的状态 给父元素设置相对定位，子元素设置绝对定位，这样六个平面压在一起。 这里div1,2,3,4是上下左右四个面，div1,2绕X轴旋转90度，并在Z轴分别
阅读全文
摘要：前一个内容是平面转化，这次是空间转换，唯一不同的就是平面转换是以X和Y轴，空间转换就是加了一个Z轴，使得更立体。 老规矩！位移、旋转、缩放！ 位移（transform：translateZ（）） 由于在空间中物体在Z轴上进行位移时，我们肉眼在电脑中是看不出来的，因为屏幕是平面的。这里有个连写的方式（
阅读全文
摘要：元素透明（opacity） 元素透明会让元素整体透明，包括里面的内容，文字或者子元素等。 属性名：opacity 属性值：0~1（透明到不透明） 表格边框合并（border-collapse） ！这里有个问题就是我使用CSS里面的border添加边框的时候，因为border属性是不能继承的，所以需要
阅读全文
摘要：垂直居中对齐问题（vertical-align） 我们在实际使用的时候，会遇到一些问题，比如两个元素在居中时总是对不齐，这是因为在元素里面，每个元素都有自己的基线。 什么叫做基线，通常是他们居中的线，而元素之间基线不同就会导致我们在居中对齐的时候失败，样子就会很丑。 通常这个问题，我们只要设置一下即
阅读全文
摘要：在网页中，也有一些需要移动的东西，这时我们可以使用CSS中的平面转换的相关内容。 平面转换言简意赅就是在一个平面上对一个东西进行转换，既然是平面，那么我们猜一下在平面上能干嘛呢？ 第一：上下移动 上下移动就是比较简单，属性名+属性值 属性名：transform 属性值：translate（*），向右
阅读全文
摘要：不同布局方式的层级关系：普通<浮动<定位 定位布局后的层级关系：相对定位、绝对定位、固定定位等级相同，谁最后写谁显示在最上面，但可以通过z-inden属性进更改，属性值：0-10，越大显示等级越大。 在CSS中定位是压在标签上面的！所以才会有层级关系，注意区分标签的嵌套关系！
阅读全文
摘要：咱就是说！牛逼啊这个定位，再也不能担心垂直居中的问题了。 绝对定位：position：absolute 偏移量（水平居中）：left：50%；margin-left：-（自己宽度的一半） 偏移量（垂直居中）：top：50%；margin-top：-（自己高度的一半） 但有的时候，像素大小不是合理，这
阅读全文
摘要：定位的作用？ 1.可以解决盒子与盒子的之间的层叠问题 定位之后的元素层级更高，可以层叠在其他盒子上面 2.可以让盒子始终固定在页面某个位置（比如导航栏在页面滚动时不动） 怎么使用定位? 属性名+属性值 属性名：position 属性值：静态定位（static）、相对定位（relative）、绝对定位
阅读全文
摘要：因为在上一节中介绍了，浮动的标签是需要嵌套一个普通的父div标签中的，那么问题就是出现在这里。 如果父元素没有设置高度，他就会随着子元素高度而变化，但是由于子元素已经浮动脱离标准的文档流，父元素在某种方面来说是没有子元素来把她撑开的。这时父元素就会因为本身没有设置高度，子元素又不能撑开而变成没有高度
阅读全文
摘要：浮动，就是浮起来动起来。 之前我有在论坛上问过别人这样一个问题，怎么让两个块元素层叠在一起，结果他们说嵌套起来不就可以了吗？答案是确实是可以。 但是我想要的并不是那个，我问的是浮动。 同一级的块元素（这里指div），同一级div只能使用浮动的方式来实现。而嵌套的话不需要浮动，也可以让他们层叠。 方法
阅读全文
摘要：凡是都有规矩，俗话说无规矩不成方圆！所以在浏览器中也有规则，那就是浏览器在渲染页面时所采用的规则，第一自上而下，自左向右。 很简单，但这就是标准流的终极奥义！ 举例：块元素就是不能设置高度，独占一行；行元素不能设置高宽，但他能一行多个行内元素，这就是规矩！ 一个萝卜一个坑，每个标签、元素在标准流上都
阅读全文
摘要：我就搞不懂为什么CSS会有这么多的选择器，第一次学习的有id选择器、class选择器、标签选择器、通配符选择器，第二次的选择器是复合选择器：后代选择器、子代选择器、并集选择器、交集选择器，上面两次学习都是通过HTML标签。 这次是通过HTML中的结构，常用语查找某父级选择器中的子元素。 除了伪类选择
阅读全文
摘要：在实际使用中，我们在给盒子设置水平距离的时候是没有问题的，但是在设置垂直距离时会出现，距离嵌套的问题。 这里分别设置上下的margin，但是在页面效果展示的时候，只会展示最大值的那个也就是margin-top：20px，但是margin-botton：10px并不会失效，只不过包含在了20px里面了
阅读全文
摘要：CSS中盒子 在html中每一个标签基本都能看作是一个盒子，而这个盒子和我们生活中的使用的纸箱子差不多，纸箱子里面就是内容区域，有的箱子里面装的东西比较重要，那么他就会往里面添加海绵什么的，那这个就是内边距（padding），每个纸箱子都有厚度，这个就是盒子的边框（border），当两个纸箱子放在一
阅读全文
摘要：CSS的特性，这不就是说这个玩意有什么不一样的地方吗？ 好吧，她确实有！ 第一个就是他的继承性，儿子跟着她老子姓，这个大家都能理解吧，但是儿子整个名字又不能都和她老子的一样。 所以在ＣＳＳ她的特性就是，凡是有关字的东西，比如字的大小（font-size） 颜色（color） 样式（font-styl
阅读全文
摘要：在HTML中一共右三种元素显示方式，每个显示模式都有自己的CSS样式，分别是块元素、行元素、行内块元素 块元素 独占一行，宽度默认是父元素的宽度，高度是随着内容不断变化。 代表标签：div、p、h系列、ul 行元素 不独占一行，高宽默认随着内容变化 代表标签：a、span 行内快元素 不独占一行，可
阅读全文
摘要：我觉得这个和字体差不多，我们可以自己想一下，背景里面有什么？ 第一就是背景是照片还是颜色，所以背景里面肯定有color和img，还有如果是颜色那么肯定是整个背景，而图片万一大小不是和背景一样大呢？这就是要设置照片在背景中的位置，还有呈现方式，这就是另外两个属性repeat和position． 背景颜
阅读全文
摘要：在CSS中除了一些比较基本的选择器，比如class（类名）选择器、标签选择器、id选择器、通配符选择器之外还有一些根据CSS的嵌套关系产生的选择器。 这类选择器是根据CSS标签的嵌套关系使用。有后代选择器、子代选择器、并集选择器、交集选择器、伪类（这个类似于鼠标经过绑定效果） 后代选择器 根据CSS
阅读全文
摘要：重新更新！！！ 在CSS中由于我还没复习到定位，暂且就用三个居中。 第一个是垂直居中，这个我觉得是最重要的一个方法。主要有以下几个问题。 这个居中到底是给谁居中？ 答：垂直居中不是给标签使用的，而是标签里面的内容，垂直居中是在父元素中使用属性：line-height:父元素的高度，在下面中，我给父元
阅读全文
摘要：在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距。所以行高指的是文字的高度+上下间距 属性名：line-height 属性值：数字+px 数字+em（这里em似乎都是当前文字的倍数） 使用小技巧：如果需要让单行文本垂直居中，可以给他的父元素设置line-height:父元素的高度
阅读全文
摘要：CSS中的文本格式，我个人感觉就是word中段落格式是一样 1.文本缩进（text-indent） 2.文本对齐（text-align） 3.文本修饰（text-decoraton） 1.文本缩进（text-indent） 文本缩进就是一个段落首行缩进，这个在CSS中的属性名时text-indent
阅读全文
摘要：今天大家来一起学习CSS中的关于文字格式和文本格式，这里我们直接使用CSS选择器选中对应的标签进行字体和文本的样式设置即可。 文字的格式主要有“文字的大小”、“文字的粗细”、“文字的倾斜”、“文字的字体”、 font-size:数值+px font-weight:数值+px font-style:
阅读全文
摘要：在CSS中有三个方便快捷的选择器，还有一个煞笔的选择器。 三个快捷选择分别是不能重复ID名的ID选择器，可重复类名的Class选择器，选择标签名的标签选择器。 ID选择器 在HTML标签中，每个HTML标签都可以指定一个叫ID的属性和他的值。这个ID可以被javascript和CSS选中，比如jav
阅读全文
摘要：CSS有三种引入方式！！！ 第一种创建CSS文件，通过HTML中的link标签引入，（<link ref="stylesheet" type="text/css" href="需要引入的CSS文件的相对路径">） 第二种在HTML标签结构中引入，在<head></head>标签中写入，(style=
阅读全文
摘要：大家好，我们来复习下移动Web开发的内容。 在移动移动Web开发中，我们可以借助别人的力量来帮助我们更高效的开发！ 这次字体图标我选择的是第三方库（阿里矢量图标库：https://www.iconfont.cn/collections/index?spm=a313x.7781069.19989104
阅读全文
