内联元素 | 易学教程

文档流&文字&CSS常用命令

阅读更多关于文档流&文字&CSS常用命令

文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用css属性 /*想打断的内联元素*/{ word-break: break-all; display: inline-block; } 脱离文档流类似悬浮在页面上一样 position: fixed; position: absolute; 关于字体一般，页面默认字体大小 16px 字体一般都分为上部、中部、下部文字（汉字、西文）都相对基线（下部）对齐不同字体有自己规定的建议行高，可以自行 line-height 规定 CSS常用命令字体相关设定字体样式 /*各类选择器*/{ font-family: kai; } 字体加粗 /*各类选择器*/{ font-weight: bold; } 字体大写 /*各类选择器*/{ text-transform: uppercase; } 背景相关背景位置与自适应 /*各类选择器*/{ background-position: center center;/*水平方向*/ /*垂直方向*/ background-size: cover;/*背景自适应*/ background:

HTML学习

阅读更多关于 HTML学习

HTML 　　超文本标记语言：通过标签语言来标记要显示的网页的内容。扩展名：.html 或 .htm <!DOCTYPE html>：告诉浏览器使用什么样的html或者xhtml来解析 html文档。 <html></html>：文档的开始标记和结束标记。 <head></head>：元素出现在文档的开头部分。 <titele></title>：定义网页标题，在浏览器标题栏显示。 <body></body>：网页主题部分。基本标签：块级标签：独占一行；可设置长宽内联标签：只占内容部分；不可设置长宽标签嵌套：块级标签可以嵌套块级标签和内联标签；内联标签只能嵌套内联标签。 <h1></h1> ~ <h6></6> ：1 ~ 6 级标题 <hr>：分割线 <p></p>：换行　来源： https://www.cnblogs.com/weige007/p/11959608.html

CSS内联--与块级元素区别

阅读更多关于 CSS内联--与块级元素区别

内联元素： 1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。 2、内联元素不可以设置宽高 3、内联元素可以设置margin，padding，但只在水平方向有效。块状元素： 1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度 2、块级元素可以设置宽高 3、块级元素可以设置margin，padding 内联块状元素inline-block：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。 4.互相之间的区别区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。 (1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。 (2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。 (3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。 ———————————————— 版权声明：本文为CSDN博主「小奶狗」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接

记录CSS

阅读更多关于记录CSS

ID选择器：#id { } ID是独一无二的，不可重复类选择器： .class { } 标签选择器 h p input... 子选择器：.food>li 大于符号(>),仅用于选择指定标签元素的第一代子元素后代选择器：.food li 通用选择器：*{ } 匹配html中所有标签元素分组选择符：h1,span,li { } 伪类选择符：例： a:hover{color:red;}->鼠标滑过状态设置字体颜色变红; :link /*没有访问过的链接*/ :visited /*已经访问过的链接*/ input:focus{ } 选取获得焦点（光标）的表单标签的权值为1，类选择符的权值为10，ID选择符的权值为100；行内样式style权值1000；继承或者 * 权值0 改变样式权重：!important >> p{ color:red!important; } 权重叠加：复合选择器会权重叠加；权重会叠加，不会有进位 (相同权重值时)：层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。继承性：子标签会继承父标签的某些样式，text- font- line- color 标题标签不会继承父元素文字大小； a标签不会继承父元素的文字颜色；优先级：内联样式表

HTML5 内联 SVG

阅读更多关于 HTML5 内联 SVG

HTML5 支持内联 SVG。什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。把 SVG 直接嵌入 HTML 页面在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：实例 < ! DOCTYPE html > < html > < body > < svg xmlns = " http://www.w3.org/2000/svg " version = " 1.1 " height = " 190 " > < polygon points = " 100,10 40,180 190,60 10,60 160,180 " style =

vue 获取元素高度

阅读更多关于 vue 获取元素高度

1 、 html < div ref = "getheight" ></ div > <br><br> 2 、 JavaScript // 获取高度值（内容高+padding+边框） let height = this . $refs . getheight . offsetHeight ; // 获取元素样式值（存在单位） let height = window . getComputedStyle ( this . $refs . getheight ). height ; //获取元素内联样式值（非内联样式无法获取） let height = this . $refs . getheight . style . height ; // 注意：要在元素渲染出来才能获取元素的高度实例： mounted (){ this . $nextTick (()=>{ // 页面渲染完成后的回调 console . log ( this . $refs . getheight . offsetHeight ) }) } 来源：博客园作者：一半人生链接：https://www.cnblogs.com/xiaozhang666/p/11434492.html

HTML标签嵌套规则

阅读更多关于 HTML标签嵌套规则

看了网上有各种相关的总结，所以我就不再重复粘贴复制，只是把比较容易犯错的整理一下（内容越少越容易看到重点哈，想要看详细的，我下面有附链接）规则如下：内联元素不要嵌套块元素（虽然浏览器可能可以正常解析，但是尽量不要这样使用，一方面是遵守代码规范，另外可能会引起意想不到的错误）一些块元素不能嵌套块元素（h1、h2、h3、h4、h5、h6、p、dt不能包含块级元素）注意：p元素嵌套任何块级元素都一定会被浏览器错误解析 <a>元素不可以嵌套<a>元素（但a元素可以嵌套其他的内联元素）： a元素嵌套a元素会导致所有浏览器解析错误比如<a href="#"><a href="#">leo</a></a> 浏览器会解析成：<a href="#"></a><a href="#">leo</a> 内联元素可以包含内联元素（除了上面我们说的a标签不能在包含a标签）目前我知道的，除了p标签一定不能嵌套p标签，a标签一定不能嵌套a标签，其它的，貌似没有没有那么严格，但是我们尽量还是要遵守html代码嵌套规范，避免造成难以预料的错误（我知道的是react中如果p标签嵌套了块级元素浏览器是会报错的） HTML嵌套规范我看到的可以参考的链接地址有： http://www.softwhy.com/article-33-1.html https://www.cnblogs.com

CSS学习（3）样式表

阅读更多关于 CSS学习（3）样式表

CSS学习（3）样式表如何插入样式表1765243235 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： < head > 　　 < link rel = " stylesheet " type = " text/css " href = " mystyle.css " > </ head > 注：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样: < head > < style > hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </ style > </ head > 内联样式

css 基础2

阅读更多关于 css 基础2

css 基础2 一.margin相关技巧 1、设置元素水平居中： margin:x auto; 2、margin负值让元素位移及边框合并盒子重合现象：两个盒子margin垂直边距的高度等于两个发生合并的边距的高度中的较大者。解决方案如下： 1、使用这种特性（特殊布局用到） 2、设置一边的外边距，一般设置margin-top（布局常用） 3、将元素浮动或者定位代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin相关技巧</title> <style type="text/css"> body{margin: 0} .box{ width: 202px; height: 156px; background-color: gold; /* 设置元素水平居中： margin:x auto; */ margin: 50px auto 0; } .box div{ width: 202px; height: 30px; border: 1px solid green; background: pink; margin: -1px; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div>

内联 JavaScript 处理器

阅读更多关于内联 JavaScript 处理器

HTML 中存在着真实的 JavaScript 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>使用 JavaScript 的示例</title> <script> function createParagraph() { const para = document.createElement('p'); para.textContent = '你点击了这个按钮！'; document.body.appendChild(para); } </script> </head> <body> <button onclick="createParagraph()">点我呀</button> </body> </html> 在 <button> 元素中包含了一个内联的 onclick 处理器，使得函数在按钮被按下时运行。效率低下。对于每个需要应用 JavaScript 的按钮，你都得手动添加 onclick="createParagraph()" 属性。可以使用纯 JavaScript 结构来通过一个指令选取所有按钮 document.addEventListener("DOMContentLoaded", function() { . . . }); 这是一个事件监听器，它监听浏览器的

订阅内联元素