02 2021 档案

背景
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-02-20 18:19 俗气小博 阅读(94) 评论(0) 推荐(0)
粘滞定位
摘要：position: sticky; 跟相对定位很像 可以使元素固定在某一个位置时将其固定 （一般不使用，容易不兼容） 阅读全文
posted @ 2021-02-19 23:03 俗气小博 阅读(117) 评论(0) 推荐(0)
固定定位
摘要：position: fixed; 脱离文档流，不设置文档流不变化 唯一不同的是： 固定定位永远参照与浏览器的视口进行定位 不会随着网页的滚动条滑动 阅读全文
posted @ 2021-02-19 22:58 俗气小博 阅读(132) 评论(0) 推荐(0)
绝对定位
摘要：特点： 1.开启了绝对定位，不设置偏移量则元素不发生移动 2.元素从文档流中脱离 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升一个层级 包含块：就是当前元素最近的祖先块元素 绝对定位的包含块：离他最近的开启了定位的祖先元素 如果所有的祖先元素都没有开启定位的 阅读全文
posted @ 2021-02-19 22:55 俗气小博 阅读(224) 评论(0) 推荐(0)
相对定位
摘要：定位，定位是一个更加高级的布局手段，通过定位可以将原始摆放到任意位置 position 可选值：static（默认值）,静止的没有开启定位 relative 相对定位 absolute 绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 相对定位的特点： 1.不设置偏移量，元 阅读全文
posted @ 2021-02-19 21:23 俗气小博 阅读(500) 评论(0) 推荐(0)
clear-clearfix
摘要：clear: both;清除两侧中最大影响的那侧 left/right 完美解决高度塌陷或者外边距重叠 .clearfix::after, .clearfix::before { content: ''; display: table; clear: both; } 阅读全文
posted @ 2021-02-18 23:51 俗气小博 阅读(102) 评论(0) 推荐(0)
高度塌陷-BFC
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-02-18 22:25 俗气小博 阅读(36) 评论(0) 推荐(0)
浮动的特点
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-02-18 11:34 俗气小博 阅读(130) 评论(0) 推荐(0)
浮动的简介
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-02-18 11:27 俗气小博 阅读(120) 评论(0) 推荐(0)
CSS练习
摘要：/* 让文字在父元素中垂直居中 */ line-height: 25px; /* 下划线消失 */ text-decoration: none; font-weight: bold;字体加粗 阅读全文
posted @ 2021-02-17 14:36 俗气小博 阅读(68) 评论(0) 推荐(0)
浏览器的默认样式
摘要：浏览器会自己给我们的代码设置默认样式，对开发不利，必须删除 <link rel="stylesheet" href="./reset.css">使用文件删除 下面为reset.css文件 /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/re 阅读全文
posted @ 2021-02-17 11:44 俗气小博 阅读(87) 评论(0) 推荐(0)
行内元素的盒模型
摘要：行内元素不支持设置width,height 可以设置padding，border,margin，但是不会影响页面元素的布局 <a href="javascript:;">222</a> display，用来设置元素显示的类型 可选值： inline: 元素为行内元素 block:元素设为块元素 in 阅读全文
posted @ 2021-02-17 11:36 俗气小博 阅读(87) 评论(0) 推荐(0)
外边距的折叠
摘要：相邻的垂直方向外边距会发生重叠 兄弟元素之间相邻的垂直方向谁大听谁的，一正一负去两者和，如果是两个负数，去绝对值大的 父子元素 父子元素之间的相邻外边距，子元素会传递给父元素。（上外边距） 父子外边距一个折叠，会影响页面的布局 解决方案：使用padding隔开，不是很完美的方式 <!DOCTYPE 阅读全文
posted @ 2021-02-17 11:27 俗气小博 阅读(82) 评论(0) 推荐(0)
垂直布局
摘要：垂直方向没有等式，比较简单，父元素多少就是多少 如果父元素不设置高度，则高度被子元素内容撑开 如果父元素Height已经设置了高度，子元素高度超过了父元素的高度，那么将会吐出来，溢出 可以使用overflow（在父元素中设置） overflow: visible; 默认值，溢出显示 overflow 阅读全文
posted @ 2021-02-15 01:29 俗气小博 阅读(72) 评论(0) 推荐(0)
水平方向布局
摘要：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-02-15 01:01 俗气小博 阅读(68) 评论(0) 推荐(0)
外边距
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-02-14 22:15 俗气小博 阅读(44) 评论(0) 推荐(0)
内边框
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-02-14 21:05 俗气小博 阅读(55) 评论(0) 推荐(0)
盒子-边框
摘要：border-width可以不写，浏览器会自己设置，可能为3PX <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> 阅读全文
posted @ 2021-02-14 20:53 俗气小博 阅读(61) 评论(0) 推荐(0)
盒子模型（重）
摘要：盒模型-盒子模型-框模型（box model） 必须知道元素的形状和大小 css将所有的元素设置为一个矩形的盒子 对页面的布局就等于将盒子拜访到不同的位置 每一个盒子都有几个部分组成： 1.内容区（content） 2.边框（border） 3.内边距（padding） 4.外边距（margin） 阅读全文
posted @ 2021-02-14 20:34 俗气小博 阅读(54) 评论(0) 推荐(0)
文档流
摘要：布局很重要 网页是多层的结构 一层压一层 通过css可以对每一层设置样式，用户只能看到最上面一层 最低层级叫文档流， 我创建的元素默认在文档流中进行排序 元素有两个状态：在文档流/不在文档流（脱离文档流） 元素在文档流中有什么特点（脱离肯定会变化）： 块元素：1.每一个占一行，肯定会独占一行，自上向 阅读全文
posted @ 2021-02-14 20:21 俗气小博 阅读(102) 评论(0) 推荐(0)
HSL值
摘要：HSL值（用的不会特别多） 在工业设计中用的多 H色相（0~360） S饱和度（0-100%）浓度 L亮度（颜色的亮度，0-100%） 阅读全文
posted @ 2021-02-14 20:06 俗气小博 阅读(174) 评论(0) 推荐(0)
RGB值
摘要：颜色名不方便，用RGB值 通过三种颜色的浓度来调配的颜色 RED GREED BLUE 每一种颜色在0~255之间 语法RGB（0,0,0） RGBA（0,0,0,0.5）0.5为不透明度，1为完全不透明，0为完全透明 十六进制值： 语法：#红色绿色蓝色 颜色浓度00-ff 如果两位两位重复，可以重 阅读全文
posted @ 2021-02-14 20:02 俗气小博 阅读(312) 评论(0) 推荐(0)
em和rem单位
摘要：1em=1font-size（相对于自身字体） 会根据字体大小变而变 1rem=相对根元素的字体大小（html） html { font-size: 10px; } 阅读全文
posted @ 2021-02-14 19:51 俗气小博 阅读(88) 评论(0) 推荐(0)
像素和百分比
摘要：不同屏幕的像素的大小是不同的。像素越小显示的效果越好。 所以200px在不同的设备下显示效果不同 屏幕可能会放大我们的像素显示效果。 一个像素就是一个小点 百分比：可以将属性设置为父元素属性的百分比 百分比可以跟随父元素改变而改变 阅读全文
posted @ 2021-02-14 19:47 俗气小博 阅读(618) 评论(0) 推荐(0)
选择器的权重
摘要：两种不同的方式找到同一个元素 由优先级决定 选择器的权重排行，越前越高（可以在某一个样式的后面加!important） 内联样式1000 id选择器100 类和伪类选择器10 元素选择器1 统配选择器为0 继承的样式，没有优先级 比较优先级时，需要将所有的选择器相加计算，累加不会超过一个数量级类相加 阅读全文
posted @ 2021-02-14 14:44 俗气小博 阅读(116) 评论(0) 推荐(0)
继承
摘要：p{ color: brown; } <p> 我是P元素 <span>我是p元素中的span</span> </p> span也会变红 继承对我们的开发有好处 我们可以将一些共用的属性写在祖先那里 并不是所有样式会继承 比如背景相关，布局相关等 阅读全文
posted @ 2021-02-14 14:26 俗气小博 阅读(32) 评论(0) 推荐(0)
CSS餐厅练习
摘要：餐厅选择器练习地址：http://flukeout.github.io/元素选择器第1关plate选中 plate 元素第2关bento选中 bento 元素id选择器第3关#fancy选中 id = “fancy” 的元素后代选择器第4关plate apple选中 plate 祖先元素下的 app 阅读全文
posted @ 2021-02-14 14:17 俗气小博 阅读(1191) 评论(0) 推荐(1)
伪元素
摘要：伪元素表示页面中一些特殊的并不存在元素 ::开头 p::first-letter/*第一个伪元素*/{ font-size: 50px; } p::first-line/*第一行元素*/ { color: khaki; } p::selection/*选中的内容*/ { background-col 阅读全文
posted @ 2021-02-14 13:20 俗气小博 阅读(62) 评论(0) 推荐(0)
超链接伪类
摘要：a:link/*没访问过的*/ { color: greenyellow; } a:visited/*访问过，visited只能设置颜色*/ { color: grey; } a:hover/*鼠标移入会变化*/ { color: hotpink; font-size: 50px; } a:acti 阅读全文
posted @ 2021-02-14 13:09 俗气小博 阅读(48) 评论(0) 推荐(0)
伪类选择器
摘要：ul>li*5 得到 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 伪类：一般情况下以:开头 第一个元素 ：first-child 最后一个元素 :last-child 选第三个元素 :nth-child(3) 全选:nth 阅读全文
posted @ 2021-02-14 12:52 俗气小博 阅读(54) 评论(0) 推荐(0)
属性选择器
摘要：<title>指鼠标放上去会显示title值 属性选择器 p[title]{ color: seagreen; } <p title="ooo">eee</p> 属性名=属性值 属性名^=属性值：以属性值开头的 属性名$=属性值：结尾 属性名*=属性值：含有就行 阅读全文
posted @ 2021-02-13 21:28 俗气小博 阅读(32) 评论(0) 推荐(0)
关系选择器
摘要：父元素 子元素 祖先元素 后代元素 兄弟元素 让div的子元素变色： div > span{ color: salmon; } 后代元素选择器：范围会更大 div span{ color: seagreen; } 兄弟元素选择器（下一个兄弟元素）： p+span{ color: seagreen; 阅读全文
posted @ 2021-02-13 18:26 俗气小博 阅读(66) 评论(0) 推荐(0)
常用选择器
摘要：元素选择器： p{ color: seagreen; font-size: 20px; } id选择器（只能选一个）： #red{ color: red; } 标签属性class，与id类似，但class可以重复，class="b1 b2"，class属性值可以为多个 类选择器：使用class,使用 阅读全文
posted @ 2021-02-13 18:07 俗气小博 阅读(57) 评论(0) 推荐(0)
css基本语法
摘要：包含： 选择器 和 声明快 选择器：通过选择器可以选中页面中的指定元素 声明块：通过声明块来指定元素设置的样式（名值对结构） 一个样式名对应一个样式值 阅读全文
posted @ 2021-02-13 17:51 俗气小博 阅读(54) 评论(0) 推荐(0)
CSS使用
摘要：style="" 后面的就是CSS，不过不推荐使用，属于内联样式，开发绝对不用 第二种方式：将样式写到head的style中，学习路上使用 （可以同时为多个标签设计样式，不能夸页面使用） 第三种方式：在多个网页中使用,最佳使用，还方便缓存（缓存机制，速度快） <link rel ="styleshe 阅读全文
posted @ 2021-02-13 17:38 俗气小博 阅读(43) 评论(0) 推荐(0)
网页组成
摘要：网页分成三部分： 结构（html） 表现（css） 行为（javascript） css 层叠样式表（网页可以有很多层，只能看到最上面一层） 网页实际是多层结构，通过CSS可以为每一层设计样式 总之：css可以给网页化妆 阅读全文
posted @ 2021-02-13 16:29 俗气小博 阅读(327) 评论(0) 推荐(0)
音视频播放
摘要：音频： <audio src="./音视频/03.flac" ></audio> 加入音乐. controls 控制台 autoplay 自动播放（大多浏览器不可以播放） loop 循环播放 <audio controls> 对不起，您的浏览器不支持 <source src="./音视频/03.fl 阅读全文
posted @ 2021-02-13 16:20 俗气小博 阅读(49) 评论(0) 推荐(0)
内联框架
摘要：<!-- 用于向当前页面引入一个其他页面 --> <iframe frameborder="0" src="http://www.baidu.com" width="1000" height="1000"></iframe> frameborder=0为无边框 基本不使用 阅读全文
posted @ 2021-02-13 15:43 俗气小博 阅读(48) 评论(0) 推荐(0)
图片
摘要：<img src="./图片/01.png" alt=""> img 替换元素 src 图片路径 alt 对图片的描述，默认情况下不显示，图片出不来（可以作为搜索引擎） width / height（指定一个，另外一个会按照比例变化） 移动端（通常大图缩小） 图片的格式： jpeg(jpg) 支持的 阅读全文
posted @ 2021-02-13 14:48 俗气小博 阅读(75) 评论(0) 推荐(0)
超链接
摘要：超链接是行内元素，a里面什么都能放 <a href="http://www.baidu.com">百度</a> br*3+Tab==三个br 当要跳转到服务器内部页面时，一般会使用相对路径 相对路径用./或者../ ./ 表示当前文件所在的目录 ../ 表示在上一级目录里 target:指定超链接打 阅读全文
posted @ 2021-02-13 14:19 俗气小博 阅读(58) 评论(0) 推荐(0)
列表
摘要：（list） 1.有序列表 <0l> 2.无序列表 <ul> 3.定义列表 <dl> dl中使用dt来表示定义的内容 用dd去解释说明 可以互相嵌套 阅读全文
posted @ 2021-02-13 14:07 俗气小博 阅读(52) 评论(0) 推荐(0)
块和行内
摘要：块：主要用于布局 <hgroup></hgroup>：块元素分组 行内元素：主要用于包裹文字 一般在块元素中放行内元素 <p>不能在P元素放任何块元素</p> 浏览器一定程度中会自动对内容修正，F12调出控制器，可以查看网页在内存中的代码 阅读全文
posted @ 2021-02-13 13:24 俗气小博 阅读(45) 评论(0) 推荐(0)
语义化标签
摘要：em:语音语义的加重 块元素： 在页面中独占一行的为块元素 行内元素：在页面显示中不会独占一行的 <h1></h1> 重要性 <strong></strong>: 表示强调 <blockquote></blockquote>表示长引用 <q></q>表示短引用 <br>换行 频率都不是很大： <he 阅读全文
posted @ 2021-02-13 13:16 俗气小博 阅读(72) 评论(0) 推荐(0)
实体（转义字符）
摘要：&nbsp; 空格 &gt; 大于号 &lt: 小于号 &copy; 版本符号 阅读全文
posted @ 2021-02-13 12:24 俗气小博 阅读(134) 评论(0) 推荐(0)
从键盘里获取数据
摘要：1.导入包： import java.util.Scanner; 2.实例化 3.调用Scanner的相关方法，获得指定类型的变量 nextInt() / next() 阅读全文
posted @ 2021-02-12 17:11 俗气小博 阅读(102) 评论(0) 推荐(0)
把60转换成16进制
摘要：class VariableTest2 { public static void main(String[] args) { String str1=Integer.toBinaryString(60); String str2=Integer.toHexString(60); System.out 阅读全文
posted @ 2021-02-12 16:53 俗气小博 阅读(541) 评论(0) 推荐(0)
流程控制（if-else-循环）
摘要： 阅读全文
posted @ 2021-02-12 16:41 俗气小博 阅读(41) 评论(0) 推荐(0)
三元运算符
摘要：（条件表达式）？ 表达式1 : 表达式2 ; 表达式为true，运行结果是表达式1 false，运行结果是表达式2 必须返回一个结果 表达式1和表达式2类型一致，要求一致。 能同时用if-else和三元运算符的，优先用三元运算符 阅读全文
posted @ 2021-02-12 16:33 俗气小博 阅读(57) 评论(0) 推荐(0)
位运算法
摘要：左移右移是对于此数的二进制而言 正整数左移一位相当于成2（通常，在一定范围内） 可能也会变成负数，当二进制数首位为1时 1.位操作操作的都是整型的数据 最高效的计算2*8 2<<3或者8<<1 & / | / ^ &:把数变成二进制，互相做运算，只有1&1时才是1，其余为0 | : 有1就为1，没有 阅读全文
posted @ 2021-02-12 15:42 俗气小博 阅读(132) 评论(0) 推荐(0)
逻辑运算法
摘要：逻辑运算都是boolean类型,开发使用双符号 单&，会往后面执行if(b1& (num1++>0)) 双&，遇到false不会往后执行，直接得出结论，不过单&与双&运算结果相同 //区分:|与||//相同点1: |与||的运算结果相同//相同点2:当符号左边是false时， 二者都会执行符号右边的 阅读全文
posted @ 2021-02-12 13:15 俗气小博 阅读(137) 评论(0) 推荐(0)
赋值运算-java
摘要：+=，-=，*= s1+= 2; 等于s1=s1+2 不会改变数据类型 阅读全文
posted @ 2021-02-12 13:10 俗气小博 阅读(68) 评论(0) 推荐(0)
进制-java学习
摘要：二进制：0,1，以0b或者0B开头 十进制：0-9, 八进制：0-7,以0开头 十六进制：以0x或者0X开头 阅读全文
posted @ 2021-02-12 12:59 俗气小博 阅读(75) 评论(0) 推荐(0)
String -java学习
摘要：1.String 属于引用数据类型，为字符串 2.声明String类型变量时，使用""; 3.String 与基本变量做运算，运算只能说+； 4.运算结果为String类型 阅读全文
posted @ 2021-02-12 12:52 俗气小博 阅读(60) 评论(0) 推荐(0)
类型转换 -java学习
摘要：1.自动类型提升：int+byte最后得用int接收，因为int范围大 低级+高级，需要用高级接收 byte\char\short => int => long=> flout =>double 当byte，char，short，三个变量做运算变成int类型 2.强制类型转换 （int）shu1 / 阅读全文
posted @ 2021-02-12 00:24 俗气小博 阅读(52) 评论(0) 推荐(0)
变量类型-java学习
摘要：变量类型 占内存空间大小 表数范围 备注 byte类型 1字节=8bit -128~127 int 4字节 开发中整数通常用int long变量 8字节 必须以L或l结尾 float 4字节 表示范围比long还大，变量末尾要以f或F结尾 double 8字节 通常浮点型用double char 1 阅读全文
posted @ 2021-02-11 23:30 俗气小博 阅读(66) 评论(0) 推荐(0)