2023 年 1月随笔档案 - Mikasa-Ackerman

CSS - 弹性布局弹性布局的特性，父元素上的弹性布局，当父元素为弹性布局子元素上的弹性布局

摘要：1.弹性布局的特性 (1)任何一个容器都可以指定为弹性布局 (2)当我们为父盒子设置为弹性布局之后，子元素的float，clear，vertical-align属性将失效 (3)通过给父元素设置flex属性，来控制子盒子的排列方式与位置 2.父元素上的弹性布局 (1) 设置为弹性布局 display 阅读全文

posted @ 2023-01-09 17:23 Mikasa-Ackerman 阅读(185) 评论(0) 推荐(0) 编辑

CSS - 动画，动画的定义，动画全部属性

摘要：1.动画的定义 <style> /*只定义起始与结束*/ @keyframes 动画名称1 { from { } to { } } /*用百分比定义动画*/ @keyframes 动画名称2 { 0% { } 10% { } 100% { } } </style> 2.使用动画 /*动画名称持续5 阅读全文

posted @ 2023-01-09 14:51 Mikasa-Ackerman 阅读(96) 评论(0) 推荐(0) 编辑

CSS - 2D转换，移动，旋转，缩放

摘要：1.移动 /*第一个参数控制左右，第二个参数控制上下*/ transform: translate(10px,20px); /*单独控制左右*/ transform: translateX(10px); /*单独控制上下*/ transform: translateY(10px); 参数值阅读全文

posted @ 2023-01-09 14:34 Mikasa-Ackerman 阅读(72) 评论(0) 推荐(0) 编辑

CSS - 字体图标网站，画三角形，设置鼠标样式，去除轮廓线，设置元素的垂直对齐方式，white-space 样式，text-overflow 样式，calc 计算函数，过度属性的使用

摘要：1.字体图标网站 https://icomoon.io/ https://www.iconfont.cn/ 推荐 2.画三角 div { width: 0; height:0; border: 10px solid transparent; border-top: 10px solid pink; 阅读全文

posted @ 2023-01-06 17:55 Mikasa-Ackerman 阅读(66) 评论(0) 推荐(0) 编辑

CSS - 元素的显示与隐藏 display，visibility，溢出显示与隐藏 overflow

摘要：1.元素的显示与隐藏 display 不会占有原来的位置 /*隐藏元素*/ display: none; /*显示元素并且设置为块级元素*/ display: block; 2.元素的显示与隐藏 visibility 会占有原来的位置 /*隐藏元素*/ visibility: hidden; /* 阅读全文

posted @ 2023-01-06 17:19 Mikasa-Ackerman 阅读(170) 评论(0) 推荐(0) 编辑

CSS - 定位，相对定位，绝对定位，子绝父相，固定定位，如果重叠设置盒子的显示顺序

摘要：1.相对定位移动的时候是依照自己原来的位置，原来标准流的位置继续占有，后面的盒子仍然以标准流的方式待他 /*设置定位模式*/ position: relative; /*上偏移*/ top: 10px; /*下偏移*/ bottom: 10px; /*左偏移*/ left: 10px; /* 阅读全文

posted @ 2023-01-06 16:56 Mikasa-Ackerman 阅读(199) 评论(0) 推荐(0) 编辑

CSS - 目录

摘要：CSS - 选择器标签选择器，id选择器，类选择器，后代选择器，子代选择器，兄弟选择器，通用选择器，组合选择器，属性选择器，伪类选择器，伪元素选择器 CSS - 字体属性设置字体，大小，粗细，类型，行高，复合属性与文本属性设置文本颜色，对齐方式，装饰，缩进 CSS - 块元素，行内元素，行内块阅读全文

posted @ 2023-01-06 12:24 Mikasa-Ackerman 阅读(30) 评论(0) 推荐(0) 编辑

CSS - 浮动与清除浮动

摘要：1.浮动 /*左浮动*/ float: left; /*右浮动*/ float: right; 脱离标准流，浮动的盒子不在保留原先的位置，如何元素都可以加浮动 2.清除浮动兄弟元素关系中，上元素没有设置高度，但是里面有许多盒子。这时下元素就会覆盖上元素里面的盒子，因为上元素没有高度这时想要解决这阅读全文

posted @ 2023-01-05 15:31 Mikasa-Ackerman 阅读(31) 评论(0) 推荐(0) 编辑

CSS - 设置内边距padding，复合写法，内边距会影响盒子大小的问题，设置内边距失效的情况，设置外边距margin，让盒子水平居中，外边距塌陷问题，解决父子关系外边距塌陷的问题

摘要：1.设置内边距 /*设置上内边距*/ padding-top: 20px; /*设置下内边距*/ padding-bottom: 20px; /*设置左内边距*/ padding-left: 20px; /*设置右内边距*/ padding-right: 20px; 属性值可以为：auto，px，% 阅读全文

posted @ 2023-01-05 13:38 Mikasa-Ackerman 阅读(688) 评论(0) 推荐(0) 编辑

CSS - 设置边框设置边框的宽度，类型，颜色，复合写法，设置边框是否占据额外的空间，圆角边框

摘要：1.设置边框的宽度 /*同时设置上下左右边框*/ border-width: 2px; /*设置上下左右边框*/ border-width: 2px 2px; /*设置上左右下边框*/ border-width: 2px 1px 2px; /*设置上下左右边框*/ border- 阅读全文

posted @ 2023-01-05 13:00 Mikasa-Ackerman 阅读(556) 评论(0) 推荐(0) 编辑

CSS - CSS的三大特性，层叠性，继承性，优先级

摘要：1.层叠性给一个元素设置两个相同的样式类型，样式冲突了，遵循的原则是就近原则，元素离哪个样式近就执行哪个样式 2.继承性后代元素会继承父元素的样式会产生继承性的样式： 1.文本相关属性font-family，font-size，font-style，font-weight，font，line- 阅读全文

posted @ 2023-01-04 18:20 Mikasa-Ackerman 阅读(45) 评论(0) 推荐(0) 编辑

CSS - 背景，设置背景颜色，背景图片，背景图片的显示方式，背景图片的起始位置，背景是否滚掉，背景大小

摘要：1.设置背景颜色 background-color: pink; background-color: rgb(255,192,203); /*第四个参数是设置透明度*/ background-color: rgba(255,192,203,0.5); 2.设置背景图片 background-imag 阅读全文

posted @ 2023-01-04 17:53 Mikasa-Ackerman 阅读(193) 评论(0) 推荐(0) 编辑

CSS - 块元素，行内元素，行内块元素与显示模式的转换

摘要：1.块元素 div，p，h1，ol，ul，dl，tabel，form 块元素的特点： 1.独占一行 2.宽度高度内外边距都可以控制 3.宽度默认是容器(父级容器)的100% 4.里面可以放块元素，行内元素，行内块元素 5.特殊的 p标签与h1~h6标签只能放文字 2.行内元素 span，a 阅读全文

posted @ 2023-01-04 17:02 Mikasa-Ackerman 阅读(104) 评论(0) 推荐(0) 编辑

CSS - 字体属性设置字体，大小，粗细，类型，行高，复合属性与文本属性设置文本颜色，对齐方式，装饰，缩进

摘要：1.设置字体 font-family: Arial,"Microsoft Yahei"; Windows默认支持的字体："Microsoft Yahei"，SimSun，Arial，Tahoma，Verdana 设置字体的时候，先英后中，保证中英字体兼容到。尽量设置系统中自带的字体 2.设置字体大小阅读全文

posted @ 2023-01-04 16:09 Mikasa-Ackerman 阅读(516) 评论(0) 推荐(0) 编辑

CSS - 选择器标签选择器，id选择器，类选择器，后代选择器，子代选择器，兄弟选择器，通用选择器，组合选择器，属性选择器，伪类选择器，伪元素选择器

摘要：1.标签选择器它可以选中页面中所有的元素，而不是某一个元素内容，所以选中的是页面中共有的属性标签 { css样式... } 2.ID选择器以#开头，ID的名称必须是唯一的，ID选择器选中的是页面中元素特有的属性 #标签ID { css代码... } 3.类选择器既然类可以重复添加，并且同一个阅读全文

posted @ 2023-01-03 18:45 Mikasa-Ackerman 阅读(251) 评论(0) 推荐(0) 编辑

Html - 目录

摘要：Html - 标题标签，段落标签，换行标签，文本格式化标签，盒子标签div，span，图像标签，超链接标签，表格，列表 Html - 表单form，input的type属性与其它属性 Html - lable增加用户体验，下拉框，文本域参考网站： W3SCHOOL 阅读全文

posted @ 2023-01-03 18:10 Mikasa-Ackerman 阅读(30) 评论(0) 推荐(0) 编辑

Html - lable增加用户体验，下拉框，文本域

摘要：1.lable 增加用户体验 <label for="username">用户：</label> <input type="text" id="username"> 2.下拉框 <select name="love"> <option value="游泳">游泳</option> <option v 阅读全文

posted @ 2023-01-03 18:02 Mikasa-Ackerman 阅读(36) 评论(0) 推荐(0) 编辑

Html - 表单form，input的type属性与其它属性

摘要：1.form属性 <form action="请求URL" method="请求方式" name="表单域的名称类似于注释"> </form> 2.表单 input <form action="请求URL" method="请求方式" name="表单域的名称类似于注释">  阅读全文

posted @ 2023-01-03 17:50 Mikasa-Ackerman 阅读(251) 评论(0) 推荐(0) 编辑

Html - 标题标签，段落标签，换行标签，文本格式化标签，盒子标签div，span，图像标签，超链接标签，表格，列表

摘要：1.标题标签 <h1~h6></h1~h6> 2.段落标签与换行标签 <p>我是一个段落 <br>我是换行标签 </p> <p>我是一条段落1</p> <br> <p>我是一条段落2</p> 3.文本格式化标签 <strong>文本加粗</strong> <em>文本倾斜</em> <del>删除线阅读全文

posted @ 2023-01-03 17:28 Mikasa-Ackerman 阅读(91) 评论(0) 推荐(0) 编辑

ErenYeager

01 2023 档案