CSS块级元素与行内元素
CSS块级元素与行内元素
行内元素与块状元素
1、块级元素:可以设置 width, height属性。
行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。
可以通过line-height设置行高(行高和height是不同的东西)。
2、块级元素:可以设置margin和padding。
行内元素:水平方向margin和padding有效,竖直方向margin和padding无效。
3、块级元素:默认独占用一行。默认高度为内部内容高度(没有内容时就为0px),宽度为父容器的100%。
行内元素:与其他元素占用一行。
4、块级元素:可以容纳内联元素和其他块元素。
行内元素:只能容纳文本或者其他内联元素。
5、块状元素:能定义宽度、高度、边距等
行内元素:与其他元素占用一行。
display属性
1、块元素默认display:block;
行内非替换元素(a,span)默认为display:inline;
行内替换元素(input)默认为display:inline-block;
2、display:none;不显示该元素,也不会保留该元素原先占有的文档流位置。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。
float
当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。
行内元素去除了之间的莫名空白。
position
当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。
CSS块级元素与行内元素的更多相关文章
- css块级标签,行内标签,行内块标签的转换(2)
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- 【CSS3】块级元素与行内元素的区别
一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- 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 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
随机推荐
- 用WebStorm开发TypeScript
为什么是TypeScript 最近在做H5的游戏,最终选定的TypeScript作为开发语言.主要是看重他有强类型和Class,作为习惯使用AS3,Java等强类型编程的人来说,还是习惯这种编程写法. ...
- 很赞的一个教程: React.js 小书
很赞, React.js 小书 http://huziketang.com/books/react/ 推荐阅读入门, 照着来一遍,能会个七七八八, 更多的还需要多写 import Re ...
- maven项目ssh框架的整合
1.环境 eclipse版本:Eclipse Mars2 4.5jdk版本:1.8maven版本:apache-maven 3.3.9zhnegs这是主要的开发工具版本,ssh的各种jar包版本就不列 ...
- Volley1--为什么说Volley适合数据量小,通信频繁的网络操作
前言 网络编程对于客户端来说是一块及其重要的地方,使用高效的网络请求框架将为你的系统产生很大的影响.而Volley作为谷歌的一个开源项目,炙手可热.有很多中小型公司的安卓移动客户端的网络程序都是基于v ...
- ffmpeg 简介及使用
简介 ffmpeg [global_options] {[input_file_options] -i input_url} ... {[output_file_options] output_url ...
- kettle使用命令行传入数据库链接参数(ip、数据库、端口、用户、密码)执行job时子转换失败。
使用cmd 传参数执行 kettle job 遇到错误: 错误原因,无法找到文件.... 原来使用,通过目录指定转换,好处是:当以文件资源库保存时,可以直接将文件夹复制走,直接运行就可以,不需要单独针 ...
- Win10系统创建关机快捷方式和快捷键的方法,实现一键关机
想不想关机变得更加简单?在Win10中总有些朋友想要快速的操作体验,所以关机这个经常使用的功能也被设置的更简单,下面小编要分享的是“Win10系统创建关机快捷方式和快捷键的方法”. 1.在win10下 ...
- 重装win7系统的过程
U盘重装系统准备工作: 1.下载一个制作U盘系统的软件,随便哪个都行,把U盘变成系统盘 2.下载镜像,将镜像copy到系统盘内即可(无需解压) 3.进入BIOS系统,将boot进行设置,将U盘设置为第 ...
- sqlserver-一次updlock和withnolock和with check option 的报错原因分析
接口程序一直运行的很稳定,其中有一天进行了数据库的整改,导致程序不断报错, 报错信息如下 原因: 程序代码写入以下代码 select * from ViewName with(updlock) whe ...
- iStat Menus 的激活密
Email: @qq.com SN: GAWAE-FCWQ3-P8NYB-C7GF7-NEDRT-Q5DTB-MFZG6-6NEQC-CRMUD-8MZ2K-66SRB-SU8EW-EDLZ9-TGH ...