block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block;无论块内内容有多少,总是占满一行;
inline:行内元素默认display属性为inline;只占据块内的内容的大小,不会占满一整行;
inline-block:将行内元素的display属性改为inline-block就可以控制行内元素的长和宽;
常见的块级元素:div ul ol li dl dt p;常用的行内元素:a b span img input ;
inline-block和block的区别:简单点说,布局的时候,想在行级元素内添加块级元素,要换行就使用block,不要换行就是用inline-block.input和img为替换元素,直接可以控制替换元素的宽和高。
block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素的更多相关文章
- 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签:块标签(block tag)和内联标签(inline tag)
<html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- css菜鸟学习之text-align属性,行内元素,块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
- 前端css之文本操作及块级元素和行内元素
1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 1.2水平对齐方式 ...
- CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- inline(内联元素)和block(块级元素) 的区别
块级元素,默认是独自占据一行的.比如是<p>.<h1>.<h2>.<h3>.<h4>.<h5>.<h6>.<u ...
随机推荐
- D3(v5) in TypeScript 坐标轴之 scaleBand用法
在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记: import * as d3 from 'd3';import * ...
- Windows映射网络驱动器提示错误
问题描述:Windows映射网络驱动器的时候,提示文件和打印机共享资源处于联机状态未对连接尝试检测到做出响应 解决方法:不同情况可能不一样,我的原因是,映射的Linux,防火墙处于开启状态,关闭了就可 ...
- C#字符串替换_无视大小写
C#里的string.Replace是不能无视大小写的. 首先想到的是正则表达式,在网上查了下,果然有用正则表达式配合一些逻辑运算,实现无视大小写的字符串替换方法.但是正则表达式的方法用起来很麻烦,实 ...
- 2、Angular2 Directive
1.Attribute directives 2.directive的理解
- android框架Java API接口总注释/**@hide*/和internal API
Android有两种类型的API是不能经由SDK访问的 l 第一种是位于com.android.internal包中的API我,位于frameworks/base/core/java/com/andr ...
- 迟到的UED(转发)
2013UCAN用户体验设计论坛–精彩视频赏析 - 交互设计 博文 视觉设计 | TaoBaoUEDhttp://ued.taobao.org/blog/2013/09/2013ucan/
- 如何用 windows+github搭建一个优美的hexo博客
1.Hexo简单介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 风一般的速度Hexo基于Nod ...
- navicat 12 破解
一.安装 官方下载下载 http://www.navicat.com.cn/download/navicat-premium 二.安装完后下载破解文件 https://pan.baidu.com/s/ ...
- 关于li标签行内显示的问题
在我们实现导航栏的时候,经常要用到ul标签. 通常,我们是通过给li标签设置display:inline-block来使其在一行里显示,但是这个时候出现了一个很头疼的问题. 我们先上代码. <! ...
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...