web - 随笔分类 - by1314

CSS3

摘要：私有前缀，浏览器测试使用的 chrome：-webkit- Safari：-webkit- Firefox：-moz- Edge：-webkit- 查询网站：https://caniuse.com/ 阅读全文

posted @ 2024-05-15 15:49 by1314 阅读(12) 评论(0) 推荐(0)

摘要：添加辕信息，让浏览器处于最优渲染 1）设置 IE 总是使用最新的文档模式进行渲染 <meta http-equiv="X-UA-Compatible" content="IE-Edge"> 2）优先使用webkit（chromeium）内核进行渲染，针对360等浏览器使用html5shiv让低版本阅读全文

posted @ 2024-05-15 15:41 by1314 阅读(20) 评论(0) 推荐(0)

H5 新增的全局属性

摘要：属性名功能 contenteditable 表示元素可否被用户编辑，可选值：true、false draggable 表示元素可以拖动，可选值：true、false hidden 隐藏元素和CSS display none的是一样的 spelicheck 拼写检查，可选值：true、false c 阅读全文

posted @ 2024-05-15 15:26 by1314 阅读(9) 评论(0) 推荐(0)

H5_新增的列表标签

摘要：标签名语义单/双标签 datalist 用于搜索框的关键字提示双 datalis 用于展示问题和答案，或对专有名词进行解释双 summary 写在details的里面，用于指定问题或专有名词双 datalist案例 <form action="#"> <input type="text" 阅读全文

posted @ 2024-04-11 11:18 by1314 阅读(17) 评论(0) 推荐(0)

H5_状态标签

摘要：meter 标签属性值描述 high 数值规定高值 low 数值规定低值 max 数值规定最大值 min 数值规定最小值 optimum 数值规定最优值 value 数值规定当前值 progress 标签语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作阅读全文

posted @ 2024-04-10 16:31 by1314 阅读(46) 评论(0) 推荐(0)

H5_新增的布局标签

摘要：标签名语义单/双标签 header 整个页面，或部分区域的头部双 footer 整个页面，或部分区域的底部双 nav 导航双 article 文章，帖子，新闻，评论等双 section 页面中的某段文字，或文章中某段文字（文字通常包含标题）双 aside 侧边栏双 main 主要内容阅读全文

posted @ 2024-04-09 11:10 by1314 阅读(8) 评论(0) 推荐(0)

粘性定位练习

摘要：ps: .item>.first{B}+h2{B$}*8 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial 阅读全文

posted @ 2024-04-02 16:10 by1314 阅读(7) 评论(0) 推荐(0)

浮动练习

摘要：验证给父元素加上border，不会出现 margin 塌陷问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init 阅读全文

posted @ 2024-04-02 16:09 by1314 阅读(31) 评论(0) 推荐(0)

CSS 定位

摘要：相对定位相对定位相对的是自己原来的位置，开启相对定位的元素并没有脱离文档流，可以超出父容器的大小，与 float 区分有四个属性值：left、bottom、right、top 左和右不能同时用，同时用时左生效；当一个元素右定位属性，这个元素的层级高于普通的元素；当两个元素都开启定位时，采用后阅读全文

posted @ 2024-04-02 16:09 by1314 阅读(27) 评论(0) 推荐(0)

7. CSS 的浮动

摘要：浮动文字环绕图片 imag{float: left;} 文字环绕文字使用伪元素选择器选出第一个元素，然后加一个float属性浮动特点：元素浮动之后脱离了原规则浮动之后，宽与高默认被内容撑开，可以自己设置浮动后与其他元素共用一行，按照 3D 角度想，浮动的元素是飘起来的浮动的元素可以设置阅读全文

posted @ 2024-03-30 23:50 by1314 阅读(23) 评论(0) 推荐(0)

CSS 空白问题汇总

摘要：元素之间的空白问题行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符去除换行和空格给父元素 font-size: 0 再给需要显示的元素单独设置大小行内块元素的空白问题行内块元素与文本的基线对齐，基线不是最底端，故有一定的距离解决：给行内元素设置vertical，值不为b 阅读全文

posted @ 2024-03-28 22:54 by1314 阅读(29) 评论(0) 推荐(0)

使用 CSS 布局小技巧

摘要：行内元素、行内块元素，可以被父元素当作文本处理例如：下列可以用于上述元素，text-align,line-height,text-indent 如何让子元素，在父亲中水平居中若子元素是块元素，给父元素加上margin:0 auto; 若子元素是行内元素、行内块元素给父元素加上text-align 阅读全文

posted @ 2024-03-28 22:53 by1314 阅读(19) 评论(0) 推荐(0)

隐藏元素两种方式

摘要：display 属性 display: none 不占用位置 visability 属性 visability: hidden 会占用位置阅读全文

posted @ 2024-03-28 00:23 by1314 阅读(17) 评论(0) 推荐(0)

6. 盒子模型 margin，boder，padding，content

摘要：盒子模型：margin，boder，padding，content content min-width：底线宽度 max-width：最大宽度，看浏览器 min-height：底线高度 max-height：最大高度默认宽度：当没有给 width 属性时候内容区=父的content-自身的左右m 阅读全文

posted @ 2024-03-28 00:19 by1314 阅读(15) 评论(0) 推荐(0)

5. 各类元素总结

摘要：块元素页面独占一行，默认宽度撑满父级元素，默认高度由内容撑开，可以设置 CSS 主体结构标签：<html>,<body> 排版元素：<h1>-<h6>，<hr>，<pr>，<pre>，<div> 列表元素：<ul>，<ol>，<li>，<dl>，<dt>，<dd>、表格相关标签：<table>，阅读全文

posted @ 2024-03-27 20:42 by1314 阅读(14) 评论(0) 推荐(0)

CSS 常用单位

摘要：像素：px em：相当于当前元素 font-size 的倍数,1em = 1 * font-size 可以用于缩进，固定 2em rem：相当于标签元素 font-size 的倍数 %：相对于父元素的百分比阅读全文

posted @ 2024-03-26 15:11 by1314 阅读(11) 评论(0) 推荐(0)

4. CSS 背景和鼠标属性

摘要：背景相关属性背景颜色：backgroup-color: transparent; 默认值是透明背景图片：backgroud-image: url(路径) 设置背景图片的重复方式：background-repeat: repeat-x no-repeat：不重复 repeat-y：垂直铺满 rep 阅读全文

posted @ 2024-03-25 23:59 by1314 阅读(19) 评论(0) 推荐(0)

3. CSS 列表和表格相关属性

摘要：列表相关属性 ul、ol、li标签中使用 <style> ul{ list-style-type: lower-roman; /*列表符号，常用值：none*/ list-style-position: inside; /*列表符号位置*/ list-style-image: url("路径");/ 阅读全文

posted @ 2024-03-25 22:49 by1314 阅读(20) 评论(0) 推荐(0)

2. CSS 颜色与字体

摘要：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_colors rgb 或 rgba color:rgb(255,255,255); color:rgba(255,255,255,0.7); rgba作用：具有透明效果，0完全透明，1不透明三阅读全文

posted @ 2024-03-25 21:29 by1314 阅读(28) 评论(0) 推荐(0)

1. CSS 常用文本属性

摘要：文本间距 div.hello1{letter-spacing: 90px;} 字母间距 div.hello1{word-spacing: 90px;} 单词间距（根据空格来识别的）文本修饰 div.hello1{text-decoration: 线的位置线的类型线的颜色} 例子：上划线：di 阅读全文

posted @ 2024-03-24 00:28 by1314 阅读(21) 评论(0) 推荐(0)

by1314

随笔分类 - web