内联元素

转载： http://hi.baidu.com/dingo826/blog/item/f69884f44f5394def3d38578.html 块对象默认宽度是100%（继承自父元素），如果没有采用“float:left/right;”样式，相邻的两个块对象就会分排在不同的两行上。 内联对象的宽度取决于其内部元素的宽度与padding样式值之和，不可直接指定其宽度与高度（“display:block;”、“float:left/right;”强行转换后可以定义），相邻的两个内联对象会排在同一行上。 什么是内联对象，什么是块对象？ 所有可视的文档对象都是块对象(block element)或者内联对象(inline element)。例如， div 是一个块对象，span 是一个内联对象。 块对象的特征是从新的一行开始且能包含其他块对象和内联对象。从新的一行开始：比如div就是前后断行； 内联对象被呈递时不会从新行开始，能够包含其他内联对象和数据。内联可以这样理解：不从新的一行开始，直接从内容里面，接着往后走。。。是指它能被别的对象内联。。。。 ========================== 相关信息参考：css display参数 block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 none : CSS1 隐藏对象。与

老徐WEB：有哪些常用的CSS块级元素和行内元素 块级元素：一般是其他元素的容器，可容纳内联元素和块级元素，块级元素独占一行，可以设置元素宽度、高度。 常见的有div，p。address，div，dl，dt，dd，fieldset，form，h1~h6，hr，menu，ol，p，pre，table，ul。 内联元素：内联元素只能容纳文本或其他内联元素，多个内联元素可以排放在一行，但元素宽度、高度不起作用。 常见的有a。a，b，big，br，code，em，font，i，img，input，label，q，s，select，small，span，strong，sub，sup，textarea，tt，u，var。 HTML嵌套规则： 1.块级元素可以包含内联元素和某些块级元素。但内联元素不能包含块级元素，它只能包含其他内联元素。 2.块级元素不能放在<p>里面。 3.有几个特殊的块级元素只能包含内联元素，不能再包含块级元素，这几个特殊的元素是h1~h6，p，dt。 4.li里可以包含div标签。 5.块级元素与块级元素并列，内联元素与内联元素并列。 来源： CSDN 作者： 老徐WEB 链接： https://blog.csdn.net/uvyoaa/article/details/104228885

一、position 属性 指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 1、static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 div.static { position: static; border: 3px solid #73AD21; } 尝试一下 » 2、fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： p.pos_fixed { position:fixed; top:30px; right:5px; } 尝试一下 » 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 3、relative 定位 相对定位元素的定位是相对其正常位置。 h2.pos_left { position:relative; left:-20px; } h2.pos_right {

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100% 盒子占据一行、即使设置了宽度 内联元素 内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为： 支持部分样式（不支持宽、高、margin上下、padding上下） 宽高由内容决定 盒子并在一行 代码换行，盒子之间会产生间距 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式 解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 内联块元素 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行

1 盒子 css在处理网页的时候，它认为每个元素都包含在一个不可见的盒子里。 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。 2 盒子模型 一个盒子可以分为以下几个部分： 内容区（content） 内边距（padding） 边框（border） 外边距（margin） 2.1 内容区 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。 通过width和height两个属性可以设置内容区的大小。 width和height属性只适用于块级元素。 2.2 内边距 顾名思义，内边距指的是元素内容区和边框以内的空间。 默认情况下width和height不包含padding的大小。 使用padding属性来设置元素的内边距。 例如： padding:10px 20px 30 px 40px;这样会设置元素的上右下左四个方向的内边距。　 padding:10px 20px 30px;分别指定上、左右、下四个方向的内边距。 padding:10px 20px;分别指定上下、左右四个方向的内边距。 padding:10px;同时指定上右下左四个方向的内边距。　

1、概念对比 块元素：所谓的块元素就是 独占一行 的元素，即使它再窄（占用的范围）， 内容再少 ，也会 独占一行 。 行内元素（内联元素）：只占用 本身大小 的元素， 不会占用一行 。内容越多，占用的范围越宽。如果有三个行内元素的占用的宽度加在一起不到一行的宽度，那么他们是可以排列在一行内，不用换行。 2、行内元素举例 < ! -- 行内元素 -- > < em > 床 < / em > & nbsp ; < strong > 前 < / strong > & nbsp ; < a href = "#" > 明月 < / a > < em > 光 < / em > 效果如下： 可以看见这一行文字里面用到了两个 em标签，一个strong标签，一个a标签。由于他们都是行内元素，所以是可以在一行内排列的。 3、块级元素举例 < ! -- 块级元素 -- > < p > 块级元素演示 < / p > < a href = "#" > 这是一个行内元素a标签 < / a > 效果如下： 可以看见p标签是一个块级元素，本身所包含的内容并没有达到一行的宽度，但是它后面的 a标签 就是不能排在它的后面。只能乖乖的排在它的下面一行去了。这就是块元素。 4、常见的行内元素与块元素 行内元素：a 、em、strong、img、font、iframe、span 块元素：p、div、（h1 ~ h6）

CSS基本语法以及页面引用 CSS基本语法 css的定义方法是： 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： /* css注释 ctrl+shift+"/" */ div{ width:100px; height:100px; color:red } CSS页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 <link rel="stylesheet" type="text/css" href="css/main.css">` 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 <style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style> 3、内联式：通过标签的style属性，在标签上直接写样式。 <div style="width:100px; height:100px; color:red ">......</div> CSS文本设置 常用的应用文本的css样式： color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font

HTML学习笔记 第一天 1.HTML中不区分大小写 2.注释不能嵌套 3.标签必须结构完整 4.XML 更加严谨 5.浏览器尽最大努力正确加些页面，自动修正，但有些情况会错误修正 6.HTML标签可以嵌套，但是不能交叉嵌套 7.使用内联框架***iframe***可以引入一个外部的页面 使用iftrame来创建一个内联框架 现实开发中不推荐使用内联框架，内联框架中的内容不会被搜索引擎所检索 8.超链接：从一个页面跳转到另一个见面 用标签 来创建一个超链接 属性： href：指向链接跳转的目标地址， 相对路径or完整地址 a标签中的target属性可以用来指定打开链接的位置 _self：默认值 在当前窗口打开 _blank:在一个新的窗口中打开链接 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开 用#代表空链接 默认为页面的顶部 HTML中有一个属性作为标签的唯一标识：id 9.center标签中的内容会默认在页面中居显示 10.发送电子邮件的超链接，自动打开计算机中默认的邮件客户端 联系我们 <!-- SRC属性: 相对路径： 返回路径：../ 返回上一级目录 --> <!-- 图片格式 JPEG：多颜色，可以压缩，但是不支持透明 一般用来保存照片 GIF： 支持的颜色较少，只支持简单透明，支持动态图 PNG：支持的颜色多，支持复杂透明 图片使用原则： --

将父级元素的font-size属性设置为0，在重新设置内联块元素的font-size属性就可以解决内联块元素代码换行盒子之间产生间距的问题。 来源： CSDN 作者： 专职 链接： https://blog.csdn.net/weixin_42289273/article/details/104010674

标题中的 Cascading 亦可以理解为级联。 进入正文，这是一个很有意思的现象。可以直接跳到 总结一下 部分，看完再回过头来阅读本文。 引子 假设我们有如下结构： <p class="txt" style="color:red">123456789</p> 上面的 p 标签只有一个内联 CSS，很明显，在没有其他样式的干预下，文本 .txt 的颜色肯定就是红色的。 如果此时，我们希望改变 .txt p 标签元素的内容文字的颜色，但是不能去修改内联 CSS，只能通过样式文件去实现，像是这样： .txt { color: green; } 嗯。稍微对 CSS 有点了解的同学都会知道，上面的 CSS 文件设置的样式不会生效，因为内联样式比上述 CSS 中的样式优先级要更高。 上述这种说法不是很严谨，下文会细说。 OK，有同学就会说了，这简单，在 CSS 样式文件中添加 !important 后缀即可 。像是这样： .txt { color: green!important; } 如此操作之后，文本的颜色确实变成了绿色，因为在 CSS 文件中带 !important 后缀的规则优先级大于内联样式中同个但不带 !important 的样式。 内联样式的 !important 与样式表中的 !important 问题来了。 如果在内联样式中，我们也给加上 !important 会怎么样呢？