css笔记12：块元素和行内元素
1.概念：
行内元素：又叫内联元素，内联元素只能容纳文本或者其他内联元素，常见的内联元素有<span><a>
块元素：块元素一般都是从新行开始，可容纳文本，其他内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。常见的块元素<div><p>
2.代码演示1：
（1）exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>块元素和行内元素</title> <link rel="stylesheet" type="text/css" href="my.css" />
</head> <body>
<!--行内元素:<span>使用方法-->
<span class="s1">span1</span>
<span class="s1">span1 hello world</span>
<span class="s1">span1 hello world</span> <!--块元素:<div>使用方法-->
<div class="s2">div1</div>
<div class="s2">div2</div>
</body> </html>
（2）my.css文件
@charset "utf-8";
/* CSS Document */ .s1 {
background-color:pink;
} .s2 {
background-color:gray;
}
效果图：
总结：
行内元素(inline element)：特点是只占内容的宽度，默认不会换行。
块元素(block element)：特点不管内容有多少，他要换行，同时占满整行。
3.代码演示2：
（1）exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>块元素和行内元素</title> <link rel="stylesheet" type="text/css" href="my.css" />
</head> <body>
<!--行内元素:<span>使用方法-->
<span class="s1">span1</span>
<span class="s1">span1 hello world</span>
<span class="s1">span1 hello world</span> <!--块元素:<div>使用方法-->
<div class="s2">div1</div>
<div class="s2">div2</div>
<span class="s1">okok</span>
<p class="s3">p1</p> </body> </html>
（2）my.css文件
@charset "utf-8";
/* CSS Document */ .s1 {
background-color:pink;
} .s2 {
background-color:gray;
width:100px;
} .s3 {
background-color:pink;
}
效果图：
虽然这里div1和div2阴影不沾满整行，但是这个块元素实际上是占满整行的
4.块元素和行内元素的区别
（1）行内元素只占内容的宽度，块元素内容不管内容多少要占全行。
（2）行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素（与浏览器类版本和类型相关）
（3）一些css属性对行内元素不生效，比如margin,left,right, width,height.建议尽可能使用块元素定位。（与浏览器类版本和类型相关）
5.行内元素和块元素--互相转换
display:inline --->转化为行内元素（比如div）
display:block ---->转化为块元素（比如a）
案例演示：
css笔记12：块元素和行内元素的更多相关文章
- CSS学习笔记——盒模型，块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- 【CSS系列】块级元素和行内元素
块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
- [HTML/CSS]盒子模型，块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
随机推荐
- 能够提高开发效率的 Eclipse 实用操作
工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个“器”.本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标,便可进行编程开发,避免鼠标分 ...
- 【转】Maven实战（二）---多模块开发---缺少Jar包
原博文出于:http://blog.csdn.net/liutengteng130/article/details/41611755 感谢! Maven里面的Jar包经常出现Missing的情况 ...
- C++问题-无法打开某个自定义源文件
问题经过:需要做一个工具,是在某个产品的基础上做的,所以要来了同事的代码.用VS打开后,提示如下问题.1>c1xx : fatal error C1083: 无法打开源文件:“..\..\GUX ...
- CodeForces 589A Email Aliases (匹配，水题)
题意:给定于所有的邮箱,都是由login@domain这样的形式构成,而且字符都是不区分大小写的. 我们有一种特殊类型的邮箱——@bmail.com, 这种邮箱除了不区分大小写外—— 1,'@'之前的 ...
- C# 生成解决方案失败，点击项目重新生成报找不到命名空间
1.点击生成解决方案失败,点击项目“重新生成”找不到“XXX”命名空间. 尝试点击"重新生成解决方案"多次,然后点击项目的"重新生成"即可解决.
- C# App.config文件的使用
App.config文件 1. 配置文件概述: 应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序 ...
- Linux 下监控用户最大进程数参数（nproc）是否到达上限
Linux 下监控用户最大进程数参数(nproc)是否到达上限的步骤: 1.查看各系统用户的进程(LWP)数: 注意:默认情况下采用 ps 命令并不能显示出所有的进程.因为 Linux 环境下执行多线 ...
- ecshop后台限制IP登录
ecshop是开源系统,所以难免会有漏洞 黑客攻击网站,往往是通过漏洞获取后台管理员权限,然后再做一些破坏 如果我们在后台文件里限制指定的IP才能登录后台,就相对安全多了 下面给出大家解决方案: ...
- Display:Block
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- protoc-gen-lua
lua里使用proto buffer protoc-gen-lua 官方不维护了,自己维护个:protoc-gen-lua int64支持,将64位int转换成lua的string. message相 ...