div中的p标签于img设置同一水平_前端工程师:css中一些需要注意的东西
html标签有三大性质,如果不清楚这些东西,在使用css添花的时候可能会糊涂的不知所措。
一、块级元素
块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。
- 典型代表:div,h1-h6,p,ul,li
- 特点:
1.独占一行,普通流中不予许有和它同占一行的
2.可以设置其宽度、高度,内外边距
3.嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致
4.可以容纳其他元素,p元素是例外
二、行内元素
- 典型代表: span ,a, ,strong , em, del, ins
- 特点:
1.在一行上显示,如果不是块级元素,所有的元素都会并排一起
2.设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。
3.元素的宽和高就是内容撑开的宽高,自身无法设置。
4.只能容纳其他行内元素或者文本,a元素是例外,但是放了块级元素就不能放链接了。
三、行内块元素(内联元素)
- 典型代表 input img
- 特点:
1.和相邻行内元素在同一行,但是之间会有空白缝隙。
2.默认宽度是他本身内容的宽度,但是也可以手动设置
三、转换属性的方法
- 块元素转行内元素:display:inline;
- 行内元素转块元素:display:block;
- 块和行内元素转行内块元素:display:inline-block;
四、行高
- 浏览器默认文字大小:16px
- 行高:是基线与基线之间的距离,行高=文字高度+上下边距
- 一行文字行高和父元素高度一致的时候,垂直居中显示
实例:开发网页时,你会发现,图片和底部对不齐,他们之间会有间隙,那么为什么会有这个间隙呢?
原因:这是因为img元素后面会跟一个空白符,会使它的高度多出3px。至于这个空白符出现的原因嘛,是因为img元素是行内元素,行内元素默认会有3px的间距。因此当我们的块级元素div包含这个行内元素的时候底部就出现了3px的间距。
解决方法:将img转换为块级元素就好了,{display:block}
如果喜欢点击加关注,有什么问题或者建议可以在下方评论留言哦~~
div中的p标签于img设置同一水平_前端工程师:css中一些需要注意的东西相关推荐
- div中的p标签于img设置同一水平_HTML网页制作常用标签及说明——前端开发入门...
上篇文章我们介绍了怎么创建一个最基本的网页,这篇我们介绍一下经常被使用的标签及用途. 显示在浏览器中的内容都要添加在基本模板中的body标签的中间,这点一定要记住!! 下面的body标签中各个标签,我 ...
- div中的p标签于img设置同一水平_P标签和img标签的问题
你的位置: 问答吧 -> WEB标准 -> 问题详情 P标签和img标签的问题 DIV+CSS布局中,如果段落和图片相邻,设置了图片的边距为0后还是和段落的P标签有距离是为什么? 无标题文 ...
- qtabbar设置不同宽度_前端之css(宽高)设置小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
- Web前端,CSS中的浮动、清除浮动
前言 持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用 早期的作用:图文环绕 现在的作用:网页布局 • 场 ...
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- Web前端,CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言 持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素 特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
- Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- div 不受父级标签影响_前端H5开发中常用的标签
本文主要内容 排版标签: <h1> <p> <hr /> <br /> <div> <span> <center> ...
- bootstraptable设置行高度_条码打印软件中不干胶卷纸的标签设置方法
条码打印软件中的标签设置是根据打印机中的实际标签纸的情况进行设置的,不同的标签纸有不同的设置方法(如A4的平张纸,或者单排.双排.多排的不干胶卷纸都有相对的设置方法).今天就用中琅条码打印软件给大家演 ...
最新文章
- 《Java 8 实战》(二)—— Lambda
- 第二届Bio-protocol生物实验短视频大赛作品征集开始 | 奖品丰厚,等你来拿
- jQuery监控页面所有ajax请求的方法
- Vue.js-Day06-PM【项目实战(附带 完整项目源码)-day01-pm:轮播组件(使用、安装依赖、具体操作过程)、favicon详细制作】
- Mybatis的核心——SqlSession解读
- EifficientDet论文笔记
- python下载文件并改名_Python遍历文件夹并批量改名
- 一起等补丁:操作系统漏洞StrandHogg 2.0几乎影响所有安卓设备
- 2015/10/19总结:ajax传参、jquery.validate自定义日期校验
- 如何导入gradle版本不同的Android项目
- Android官方开发文档Training系列课程中文版:线程执行操作之定义线程执行代码...
- Charles抓包工具
- android 著名播放器,十二大最著名的Android播放器开源项目
- ToolsOh第8批收录
- 最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
- matlab pt站下载,PT站RSS下载使用教程 | PT邀请码网
- java 中 isb啥意思_isb官网-新版下载
- MyBatis实现级联查询及逆向生成
- dellr服务器性能测试软件,戴尔Poweredge R740服务器使用感受 | 小迪的生产力工具室...
- 火车票订票管理系统c语言,基于c 的火车票订票管理系统的设计与实现.docx
热门文章
- 什么是java的元数据_学习大数据,为什么要先学习Java?
- sublime text插件emmet的用法教程
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 8丨判断三角形【难度简单】
- html文本弹性,HTML5 很有趣的文本蹦床/弹性弯曲动效
- expdp导出表结构_(转)oracle使用expdp、impdp和exp、imp导入导出表及表结构
- spingboot下shiro自定义过滤器roles
- 短信微信等消息发送系统的架构设计
- storm消息可靠机制(ack)的原理和使用
- java或异运算_java中与运算,或运算,异或运算,取反运算
- python没有菜单栏_解决Jupyter Notebook开始菜单栏Anaconda下消失的问题