html:块级元素和行内元素的特点
display:block;
块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。
块级元素width、height、padding、margin生效
块级元素有以下几个特点:
1、总是另起一行(特立独行)
2、可以设置其宽度、高度、内外边距
3、在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)
4、可以容纳行内元素和其他块元素
display:inline;
行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
width、height无效,padding、margin生效
行内元素的特点:
1、总是和相邻的行内元素在同一行上(物以类聚)。
2、设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。
3、默认宽度是他自身内容的宽度。
4、行内元素只能容纳其他行内元素或者和文本。
display:inline-block;
行内块元素,width、height、padding、margin生效,典型代表元素:img、input
html:块级元素和行内元素的特点的更多相关文章
- 【CSS3】块级元素与行内元素的区别
一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...
- HTML中块级元素与行内元素
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- 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 ...
- html块级元素与行内元素
1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
随机推荐
- git之win安装git和环境配置及常用命令总结
12.windowns安装git和环境变量配置 11.git之常见命令总结 ===== 12.windowns安装git和环境变量配置 ; 转自 https://wuzhuti.cn/2385.htm ...
- android Information:Gradle tasks [:dl_version:generateDebugSources, :dl_version:generateDebugAndroidTestSources导致无法实现Preview功能
Androidstudio 出现以下错误导致layout xml无法实现预览功能: Information:Gradle tasks [:dl_version:generateDebugSources ...
- Linux程序的执行
一.多任务协调机制 $ find /boot | cpio -ocB > /tmp/boot.img 程序执行方式——流式处理 “|”是匿名管道 管道分匿名管道,命名管道.匿名管道属于临时工,随 ...
- 软硬链接ln
1:软链接 -- 快捷方式 I:ln -s 文件名 快捷方式的名字 文件名:使用绝对路径 II':目录也可以创建链接 2:硬链接 I: ln 文件名 硬链接的名字
- Css实战第二天小结
清除浮动的四种方式: 1.1 给父盒子设置一个高度: 1.2 Clear:both; 1.3 Overflow:hidden; 1.4 使用伪元素 .clearfix:befo ...
- MySQL中实现DROP USER if EXISTS `test`,即创建新用户时检测用户是否存在
MySQL中实现DROP USER if EXISTS `test`,即创建新用户时检测用户是否存在 版权声明:本文为博主原创文章,欢迎大家转载,注明出处即可.有问题可留言,会尽快回复,欢迎探讨 ...
- Python: json模块实例详解
ref:https://www.jianshu.com/p/e29611244810 https://www.cnblogs.com/qq78292959/p/3467937.html https:/ ...
- Ubuntu安装MyEclise16 过程差不多
选择好安装路径,和workpace路径,可能会因为工作空间放的位置不太对,导致myeclipse出现问题. 1.Ubuntu安装MyEclise10 不知道为什么网上会有那么多安装过程,还有配置目录和 ...
- 常见排序算法 - Java实现
1.冒泡排序 每次比较相邻的两个元素大小,调整顺序.从头到尾执行一轮(i),最大数值的元素就排到最后.每次从头到尾执行一轮,都会排好一个元素(length - i - 1).这就是说一个包含 n 个元 ...
- 20165205 2017-2018-2 《Java程序设计》实验三 敏捷开发与XP实践
20165205 2017-2018-2 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 检查点1: 安装alibaba 插件,解决代码中的规范问题 首先把搭档加入到自己的项目中 ...