内联元素 | 易学教程

CSS 引入方式选择器

阅读更多关于 CSS 引入方式选择器

---恢复内容开始--- CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。步骤：　　A.找到标签 B.操作标签一 CSS四种引入方式 1.行内式 <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3.链接式 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下： <style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>　注意：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷

css排版常用样式、三种不同html类型、css布局盒模型介绍

阅读更多关于 css排版常用样式、三种不同html类型、css布局盒模型介绍

把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合，实现出设计效果。字体：div{font-family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意：第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了？通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定义字体类型*/ 字号、颜色：div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素，并把字体颜色设置为#f90；此外颜色分为3种表现形式：a.rgb（255,255,255）b.英文单词c.16进制，如#f90，具体参考 css基本概念与css核心语法介绍中有关颜色介绍粗体：如果想为文字设置粗体除了使用h1-h6或strong标签

第二十七节内联块属性

阅读更多关于第二十七节内联块属性

1 <!DOCTYPE html> 2  8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <title>内联块实例</title> 12 <style type="text/css"> 13 14 .box{ 15 width:600px; 16 height:600px; 17 border:1px solid #000; 18 font-size:0; 19 } 20 .box a{ 21 width:60px; 22 height:60px; 23 background-color:red; 24 display: inline-block; /* 设置为内联模块 */ 25 font-size: 16px; 26 27 } 28 29 </style> 30 <

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="fill:lime;stroke:purple

内联框架（iframe元素）

阅读更多关于内联框架（iframe元素）

iframe元素允许网页设计者在一个网页文本块中插入和显示另一个网页，这也被称为内联框架。使用html框架可以在多个视图窗口中展示网页，视图可以是独立窗口或者子窗口。多视图模式提供给网页设计者一个方法，使用该方法，可以实现保持某一个视图始终可视，而其它视图可以滚动或者也可以被替换掉。 1.使用iframe元素的src属性可以定义框架所指向的文档资源，这是框架窗口的初始内容，可以是一个html文档，也可以是一个图片。当浏览器加载网页文档完成时。就会加载框架窗口的初始文档。 <iframe scr="index.html" width="300" height="50"> </iframe> <iframe scr="images/dog.png" width="300" height="50"> </iframe> 如上面代码，可以使用width和height属性指定框架的宽度和高度。当然也可以使用srcdoc属性直接指定要显示的html文本。属性值是html语法的字符串、例如下面代码，使用srcdoc属性定义内容： <iframe srcdoc="<p>这是一副小狗图片</p>"scr="images/dog.png" width="300" height="50"> </iframe> 不过目前没有浏览器支持该属性。来源： https://www.cnblogs.com

开始学习HTML,并记下笔记

阅读更多关于开始学习HTML,并记下笔记

开始学习HTML,并记下笔记。外边距（不影响可见框大小，影像盒子位置） margin-top(上) right（右） bottom（下） left（左） “外边距也可以为一个负值，元素会反方向移动” margin还可以设置为auto，auto一般只设置给水平方向的margin. 如果只指定，左边距或右边距的margin为auto则会将外边距设置为最大值如果两侧同时设置，则两侧的外边距会设置为相同的值。就可以使元素自动在父元素中居中，所以通常左右同事设置auto,以使子元素在父元素中水平居中。（垂直方向设置auto，则外边距默认就是0） margin-left:auto; 垂直外边距的重叠在网页中相邻的垂直方向的外边距会发生外边距的重叠（指兄弟元素之间的相邻外边距会取最大值而不是取和）！可在两个元素间加一个a而使他们外边距相加如果父子元素的垂直边距相邻了，则子元素的外边距会设置给父元素。（可在两个元素间加一个a而使他们外边距相加“不建议使用”）！可谓子元素设置一个上边框:设置Padding-top:1px; !可谓父元素设置一个上边距Padding-top:100px;（将父元素的高降低100px）浏览器默认样式浏览器为了在页面没有样式时，也可以有一个比较好的显示效果，所以为很多元素都设置了一些默认的margin和padding，（不需要使用

两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法

阅读更多关于两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法

一个盒子里有两个行内块，其中一个设置了margin，另一个不设置，也会下沉，而且更低；如图：第二个也有上边距，出现该问题的本质原因是：内联元素的默认垂直对齐方式是和基线对齐，并不是和底部对齐。即默认vertical-align：baseline。解决办法： 1.修改父级元素行高：line-height:0； 2.修改父级元素字体尺寸：font-size:0;　 3.修改内联元素对齐属性：vertical-align：xxx; vertical-align可能的值值描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。这里我用的是vertical-align：top; 而横向间隙的问题原因是行内块标签之间的换行带来的影响；解决办法： HTML中标签不换行，父元素设置：font

为什么宽度各为50%的内联块（inline-blocks）不能并排显示

阅读更多关于为什么宽度各为50%的内联块（inline-blocks）不能并排显示

调CSS时有一件事是我们非常困惑，有两个连续的inline-block的元素，没有margin，没有padding，也没有border。如果这两个元素各自width都设置成50%，那么他们应该并排显示，对吗？ <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> body { padding: 0; margin: 0; } div { height: 300px; margin: 0; border: 0; display: inline-block; } .half { width: 50%; } .left { background-color: blue; } .right { background-color: red; } </style> </head> <body> <div class="half left"></div> <div class="half right"></div> </body> </html> 但实际呢？第二个元素跑到第二行去了，不是我们想要的并排显示。当我们把width设置成49%就成了我们想要的并排显示。在StackOverflow的帮助下，我找到了这个原因。

css中块级元素和内联元素

阅读更多关于 css中块级元素和内联元素

块级元素和内联元素 “块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>, <p>, <ul>, <table> 内联元素在显示时通常不会以新行开始。例子：<b>, <td>, <a>, <img> HTML 分组标签 <div> 定义文档中的分区或节（division/section）。 HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 <span> 定义 span，用来组合文档中的行内元素。 HTML <span> 元素是内联元素，可用作文本的容器。 <span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。块级元素 (block) 特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素 (inline) 特性：和相邻的内联元素在同一行; 宽度

css样式

阅读更多关于 css样式

今天我们进入了css的学习，css称层叠样式，被定义为HTML元素的显示元素，是一种格式化网页内容的技术，可以美化网页提高页面浏览速度。 css样式分为三种：内联、内部、外联内联（在开始标签定义）： <h1 style="color:red"></h1> 内部:嵌入式（在网页head部分）：<style type="text/css"> .class{'color':red} </style> 外联（写在css页面里面）：<link rel="stylesheet" type="text/css" href="外联"> 选择器分类：元素选择器任何标签都可定义为 h，p，div，span 类选择器 class （id name） .p{} ID选择器 #p{} 通配选择器 *{} 属性 title，target 伪类（伪元素）first-line， first-letter h1：hover｛｝权重值内联 style=“” 权值为1000 最大 ID选择器伪类 #content，权值为0010 元素选择器 div，p 权值为0001 长度单位绝对长度：cm厘米，mm毫米，pt点相对长度：em倍（响应式，移动端），px像素（最常用）常用样式 body｛｝来源： https://www.cnblogs.com/hlicns/p/5172054.html

订阅内联元素