2020 年 7月随笔档案 - unfetteredman

Vue数组常用操作

摘要：Vue 变异方法 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 pop() 方法用于删除并返回数组的最后一个元素。 shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 spl 阅读全文

posted @ 2020-07-27 10:22 unfetteredman 阅读(472) 评论(0) 推荐(0) 编辑

CSS3 transition 属性

摘要：语法 transition: property duration timing-function delay; 值描述 transition-property 指定CSS属性的name，transition效果 transition-duration transition效果需要指定多少秒或毫秒才能阅读全文

posted @ 2020-07-22 14:16 unfetteredman 阅读(119) 评论(0) 推荐(0) 编辑

使用 calc() 函数计算 <div> 元素的宽度:

摘要：实例使用 calc() 函数计算 <div> 元素的宽度: #div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; p 阅读全文

posted @ 2020-07-21 15:09 unfetteredman 阅读(282) 评论(0) 推荐(0) 编辑

CSS3 filter(滤镜) 属性

posted @ 2020-07-21 14:10 unfetteredman 阅读(117) 评论(0) 推荐(0) 编辑

CSS3 box-sizing 属性

摘要：语法 box-sizing: content-box|border-box|inherit: 值说明 content-box 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 border-box 阅读全文

posted @ 2020-07-21 13:59 unfetteredman 阅读(117) 评论(0) 推荐(0) 编辑

CSS3 :nth-child() / :nth-of-type(n)选择器

摘要：实例 1 奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。在这里，我们为奇数和偶数p元素指定两个不同的背景颜色： p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { backgr 阅读全文

posted @ 2020-07-21 11:28 unfetteredman 阅读(135) 评论(0) 推荐(0) 编辑

CSS 选择器

摘要：类选择器和属性选择器，伪类选择器权重都是10 input[type="text"]{ width:150px;} 选择器示例示例说明CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 阅读全文

posted @ 2020-07-21 10:50 unfetteredman 阅读(97) 评论(0) 推荐(0) 编辑

HTML <input> 标签

摘要：属性属性值描述 accept audio/* video/* image/* MIME_type 规定通过文件上传来提交的文件的类型。 (只针对type="file") align left right top middle bottom HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 ( 阅读全文

posted @ 2020-07-21 09:54 unfetteredman 阅读(110) 评论(0) 推荐(0) 编辑

HTML5 <input> type 属性

摘要：带有两种不同输入类型的 HTML 表单，text 和 submit： <form action="demo-form.php"> 用户名: <input type="text" name="usrname"><br> <input type="submit" value="提交"> HTML 4.0 阅读全文

posted @ 2020-07-21 09:44 unfetteredman 阅读(188) 评论(0) 推荐(0) 编辑

HTML 音频(Audio)

摘要：实例 <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio form 阅读全文

posted @ 2020-07-21 09:39 unfetteredman 阅读(203) 评论(0) 推荐(0) 编辑

HTML 视频（Video）

摘要：使用 HTML5 <video> 元素 HTML5 <video> 标签定义了一个视频或者影片. <video> 元素在所有现代浏览器中都支持。以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：实例 <video width="320" height="240" 阅读全文

posted @ 2020-07-21 09:33 unfetteredman 阅读(2119) 评论(0) 推荐(0) 编辑

直角三角形

摘要：阅读全文

posted @ 2020-07-21 09:13 unfetteredman 阅读(178) 评论(0) 推荐(0) 编辑

直角三角形

摘要：1，只保留右边的边框有颜色； border-left： transparent red transparent transparent； 2，样式都是solid border-style：solid； 3，上边框宽度要大，右边框宽度稍小，其余边框为0 border-width：100px 50px 阅读全文

posted @ 2020-07-21 09:05 unfetteredman 阅读(298) 评论(0) 推荐(0) 编辑

去掉相邻盒子边线

摘要：只需要添加 ·1，margin-left：-1px； 2，如果盒子没有定位，则鼠标经过添加相对定位即可； position：relative；如果都有定位，则利用z-index提高层级； z-index：1；阅读全文

posted @ 2020-07-21 08:49 unfetteredman 阅读(159) 评论(0) 推荐(0) 编辑

多行文本溢出显示省略号

摘要：多行文本溢出显示省略号多行文本溢出显示略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核） overflow:hidden; text-overflow:ellipsis; /*弹性伸缩盒子模型显示 display：-webkit-box; /*限制在一个块元阅读全文

posted @ 2020-07-20 17:31 unfetteredman 阅读(112) 评论(0) 推荐(0) 编辑

单行文本溢出显示省略号

摘要：1.单行文本溢出显示省略号-必须满足三个条件 /*1.先强制一行内显示文本*/ hite- space:nowrap；（默认 norma1自动换行） /*2.超出的部分隐*/ verflow:hidden； /*3.文字用省略号替代超出的部分*/ text-overflow:ellipsis 阅读全文

posted @ 2020-07-20 17:25 unfetteredman 阅读(163) 评论(0) 推荐(0) 编辑

CSS vertical-align 元素的垂直对齐方式

摘要：属性定义及使用说明 vertical-align 属性设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。属性值值描述 baseline 默认阅读全文

posted @ 2020-07-20 17:17 unfetteredman 阅读(259) 评论(0) 推荐(0) 编辑

轮廓线outline

摘要：属性定义及使用说明 outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 outline简写属性在一个声明中设置所有的轮廓属性。可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width 如果不设置其阅读全文

posted @ 2020-07-20 17:11 unfetteredman 阅读(292) 评论(0) 推荐(0) 编辑

CSS cursor 属性

摘要：属性值值描述 url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针阅读全文

posted @ 2020-07-20 17:09 unfetteredman 阅读(123) 评论(0) 推荐(0) 编辑

CSS overflow 隐藏属性

摘要：CSS overflow 属性 overflow属性指定如果内容溢出一个元素的框，会发生什么。属性值值描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。不阅读全文

posted @ 2020-07-20 15:22 unfetteredman 阅读(164) 评论(0) 推荐(0) 编辑

CSS visibility 隐藏属性

摘要：CSS visibility 属性 visibility属性指定一个元素是否是可见的。提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。注意：隐藏元素后，继续占有原来的位置；属性值值描述 visible 默认值。元素是可见的。 hi 阅读全文

posted @ 2020-07-20 15:16 unfetteredman 阅读(172) 评论(0) 推荐(0) 编辑

CSS display 属性

摘要：CSS display 属性属性值注意：display被隐藏元素后，不再占有原来位置；值描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（阅读全文

posted @ 2020-07-20 15:14 unfetteredman 阅读(128) 评论(0) 推荐(0) 编辑

定位问题拓展

摘要：1.绝对定位（固定定位）会完全压住盒子浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标隹流盒子里面的文字（图片）但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素 2.定位特殊特性绝对定位和固阅读全文

posted @ 2020-07-20 15:07 unfetteredman 阅读(120) 评论(0) 推荐(0) 编辑

CSS z-index 属性

摘要：CSS z-index 属性只有定位盒子才有z-index属性）属性定义及使用说明 z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注意： z-index 进行定位元素(position:absolute, position:relativ 阅读全文

posted @ 2020-07-20 13:52 unfetteredman 阅读(139) 评论(0) 推荐(0) 编辑

定位（position）

摘要：CSS Position(定位) position 属性指定了元素的定位类型。定位=定位模式+边偏移（top,bottom,left,right属性值） position 属性的五个值： static 静态定位 relative 相对定位 fixed 固定定位 absolute 绝对定位 stic 阅读全文

posted @ 2020-07-20 13:47 unfetteredman 阅读(501) 评论(0) 推荐(0) 编辑

清除浮动

摘要：清除浮动方法： 1，额外标签法（隔墙法）w3c推荐做法；会在浮动元素末尾添加空的标签，<div style="clear:both"></div> 注意：新的标签必须是块级元素。 clearn:both; 2，父级添加overflow属性；给父级元素添加属性：overflow：hidden；（au 阅读全文

posted @ 2020-07-20 10:05 unfetteredman 阅读(107) 评论(0) 推荐(0) 编辑

文字阴影（text-shadow）

摘要：语法 text-shadow: h-shadow v-shadow blur color; 注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。值描述 h-shadow 必需。水平阴影的位置。允许负值。阅读全文

posted @ 2020-07-18 16:13 unfetteredman 阅读(476) 评论(0) 推荐(0) 编辑

盒子阴影（box-shadow）

摘要：语法 box-shadow: h-shadow v-shadow blur spread color inset; 注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省阅读全文

posted @ 2020-07-18 16:10 unfetteredman 阅读(373) 评论(0) 推荐(0) 编辑

盒模型（外边距合并）

摘要：嵌套块元素垂直外边距的塌陷解决方案： 1，为父元素定义边框 2，为父元素定义内边距 3，为父元素添加overflow：hidden。阅读全文

posted @ 2020-07-18 15:08 unfetteredman 阅读(157) 评论(0) 推荐(0) 编辑

盒模型（水平居中）

摘要：外边距可以让块级盒子水平居中，必须满足两个条件： 1，盒子必须有宽度； 2，盒子左右边距设置为auto；常见写法： * margin-left:auto; margin-right: auto; * margin:auto; * margin: 0 auto;(推荐写法）行内块元素添加text- 阅读全文

posted @ 2020-07-18 15:04 unfetteredman 阅读(327) 评论(0) 推荐(0) 编辑

盒模型（外边距）

摘要：外边距：margin margin-top： margin-right: margin-bottom: margin-left: 简写方式： margin：30px；（上下左右都30px） margin：30px 50px；（上下，左右） margin：上右下左；阅读全文

posted @ 2020-07-18 14:49 unfetteredman 阅读(146) 评论(0) 推荐(0) 编辑

盒子模型（内边距）

摘要：内边距：padding padding-top: padding-right: padding-bottom: padding-left: 简写方式： padding：上右下左； padding：10px 10px；（上下，左右）注意：padding会撑大盒子宽度阅读全文

posted @ 2020-07-18 14:45 unfetteredman 阅读(250) 评论(0) 推荐(0) 编辑

盒子模型（边框）

posted @ 2020-07-18 14:19 unfetteredman 阅读(116) 评论(0) 推荐(0) 编辑

css背景

摘要：css背景： background-image: none|url(url) background-repeat:repeat|no-repeat|repeat-x|repeat-y background-position:x y;（可以是混合使用，精确单位和方位名词，但第一个是x，第二个是y） x 阅读全文

posted @ 2020-07-18 11:15 unfetteredman 阅读(106) 评论(0) 推荐(0) 编辑

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (204)

随笔档案 (196)

阅读排行榜

评论排行榜

推荐排行榜

最新评论