CSS之布局方式(内/外部显示及inline-block显示类型)附<行内块空白间隙解决方案>
文章目录
- 一、布局方式
- 1. 外部显示类型
- a.块级盒子/元素
- b.行内盒子/元素
- 2. 内部显示类型
- 2.1 flex 流式布局
- 二、行内块元素inline-block 显示类型
- 2.1行内块的空白间隙解决方案
一、布局方式
tip:以下示例代码为方便观察已在css中加上边框
布局方式分为外部显示类型和内部显示类型两种:
1. 外部显示类型
浏览器默认的布局方式,控制的是相邻盒子之间的布局,分为块级盒子和行内盒子两种:
a.块级盒子/元素
- 块级元素就可以设置宽度和高度,
- 只有文字内容不设置宽度高度,宽度为父元素的一行,高度为内容撑开的高度。
- 宽度高度可以设置
- 内外边距设置均有效果
- 排列方式,从上至下
比如 <div>
,<h1>..<h6>
,<p>
等,单独成行,排列从上向下
它的宽度(指盒子的整体宽度)会占满整个浏览器,后边的盒子会被挤占到下一行去显示。
<!--块级盒子-->
<p>这是一段段落</p>
<p>这是第二段</p>
<h1>这是一个h1</h1>
<div>这是一个盒子</div>
b.行内盒子/元素
- 内联元素的宽高是auto,宽高只会一直随内容的宽高在同步变化。
- 宽度高度是auto,靠内容撑开
- 设置宽度高度无效
- 设置上下内外边距无效
- 排列方式,从左至右
比如 <span>
, <a>
,<i>
,<b>
,<s>
等,它的宽度是内容的宽度,后边的盒子会跟在它的后边继续排列
包括行内块
<span >这是一行文字</span>
<a href = "http://www.baidu.com">一个连接</a>
<b>粗体</b>
区别:
- 行内盒子:无法手动设置宽高
padding 和 margin :
垂直方向上生效,但不会挤占其他盒子的空间, 导致重叠;
水平方向上则会挤占其他盒子的空间。
.inline {margin: 25px;padding: 25px;
}
<p>在里边有一个<span class="inline">行内</span>元素</p>
<p>这是另一块级元素</p>
- 块级盒子:宽高、padding 和 margin 都生效并且挤占空间。
<style>
#block2 {border: yellow 2px solid;height: 100;width: 300;padding: 10;margin: 10;
}
</style>
<p id = "block2">我是一个块级</p>
<p id = "block2">我是另一块级盒子</p>
2. 内部显示类型
控制这个盒子内部的 “子盒” 之间的排列方式。
行内盒子里边只能有行内盒子,不能有块级盒子
设置 display 的值修改内部盒子的排列方式
display: flex
流式布局 :display: grid
栅格布局
一种自适应布局,能根据不同终端自动伸缩容器的宽高
它们属于非正常的文档流。
2.1 flex 流式布局
display:flex
首先,放置两个块级盒子:
<div class="container"><p>一yiyiyi</p><p>二ererer</p>
</div>
可以看到两个盒子单独占了一行:
但此时我们想让一个盒子里的两个块级元素放在相同的一行,那么也相当简单~
只要在style中设置两个块级的父元素display: flex;
就可以实现啦!
<style>
.container {display: flex;
}
</style><div class="container"><p>一yiyiyi</p><p>二ererer</p>
</div>
让我们看看效果:
Amazing!两个块级元素排列在一行了!
这个排列方式似曾相识,很像行内盒子的布局方式,但在这里我们称为流式布局
二、行内块元素inline-block 显示类型
display:inline-block
例:input
、img
属于行内元素/盒子,但以块级元素显示
适用:
- 盒子的外部类型是行内盒子inline (不把后边的盒子挤占到下一行)
- 且想同时设置宽高、padding 和 margin
使用inline-blcok显示类型:这个盒子有了宽高,并且无论是水平还是垂直方向上的 padding 和 margin,都可以把周围的盒子的空间挤占掉。
<style>
.inline-block {display: inline-block;width: 100px;padding: 10px;margin: 10px;
}
.inline-block, p {border: 1px solid red;
}
</style><p>这是一个块级<span class="inline-block">这是一个行内元素</span>元素</p>
<p>这是另一个块级元素</p>
可以看到此时,行内元素的宽度、padding和margin在水平和垂直方向上已经生效,且挤占空间,而不是重叠。
2.1行内块的空白间隙解决方案
当使用行内块元素时,会发现一条多出来的空白间隙:
<style>
.box {/* 设置背景颜色方便查看间隙 */background-color: violet;
}
img {width: 200px;
}
</style><div class = 'box'><img src = "./pic.jpg"><img src = "./pic.jpg">
</div>
如果要使两个行内块元素之间的空白间隙消失,
解决方案:style中给父元素中添加font-size:0
<style>
.box {background-color: violet;/* 幽灵空白节点:两张图片中间的空白,解决如下 */font-size: 0px;
}
img {width: 200px;
}
</style><div class = 'box'><img src = "./pic.jpg"><img src = "./pic.jpg">
</div>
CSS之布局方式(内/外部显示及inline-block显示类型)附<行内块空白间隙解决方案>相关推荐
- CSS 多种布局方式
css布局是工作中最常碰到的,同时也是笔试 or 面试中会被问到的问题,故在本文整理了css多种布局方式,以供参考. 此篇较长四千五百字左右,读者可分三部分阅读,水平居中布局,垂直居中布局,水平居中 ...
- Css 常用布局方式
1.CSS 参考手册 2.元素的分类 首先我们要知道一共有几种元素 1.行内元素(可以与其他行内元素位于同一行,不会以新行开始高度.宽度不能设置) 2.块级元素(每个块级元素都从新的一行开始,其后的元 ...
- css五大布局方式详解
css布局方式 table布局 float布局 flex布局 响应式布局 Grid布局 table布局 table布局在如今已经很少使用,原因是:table布局比其它html标记占更多的字节,会阻挡浏 ...
- 常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式 公共的样式部分 <style>* ...
- 【小5聊】使用js+css+div布局方式画一棵圣诞树,带闪烁霓虹灯效果
虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...
- 行内元素设置靠右对齐_CSS中实现行内块元素对齐
目标:行内块元素实现对齐的几种方式 eg. 我希望下列两个单词文本和后面的两个图片能实现1.中线对齐2.靠右.(图1变为图2) 图1 图2 html: Gmail images 从html可以看出是两 ...
- 查看变量类型的python内置函数名_查看变量类型的Python内置函数是()
查看变量类型的Python内置函数是() 答:type() 3[单选题]马克思主义同中国实际相结合的第二次历史性飞跃的理论成果是() 答:C.中国特色社会主义理论体系 在Word编辑状态中,按下列哪个 ...
- div+css的布局方式进行设计成品作业_原创响应式php企业成品网站,清晰风格版
原创响应式php企业成品网站,清晰风格版,适合做农业,茶叶,特产,美食等食品类企业官网使用,此风格颜色可以根据你的需求改,整个设计简洁大气,代码精简规范. 手工书写DIV+CSS,完美兼容IE7+.F ...
- Css学习总结(5)——CSS常见布局方式
一.使用BFC隐藏属性 在对需要自适应的元素BFC化,可以实现两栏或三栏布局 使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题.如果将aside2与article交换位置,那么aside2元素 ...
最新文章
- python语言编程环境-python3编程环境搭建
- 爬虫笔记12完结篇实例:股票
- Docker创建私有仓库 | 数据卷和数据卷容器 | 容器互联 操作详解
- 去掉xcode中警告的一些经验
- KubeCon+CloudNativeCon首秀中国!
- 【渝粤题库】广东开放大学 会展概论 形成性考核
- checkbox居中 editor_radio 或 CheckBox 关联 其他元素 整体选择
- VK维客众筹网整站源码 手机端众筹网站系统源码
- HTTP -- 目录
- (20)css3新增选择器
- python form_Python中form的使用
- sql多语句表值函数_构造一个特殊的多语句表函数来检查SQL Server的运行状况
- 西部数码服务器自动备份,西部数码-云服务器
- web前端作业-模拟网页CSS
- php进程间通信 yoc_php 进程间通信 ipc
- Redis上踩过的一些坑-美团
- 网络时间同步设备(时钟同步产品)时钟系统应用技术介绍
- php怎么给文章加页码,PPT如何插入页码
- 【Go语言实战】—— 时间戳转标准输出格式,标准输出转时间戳,gorm查询标准化时间
- STC89C51——定时器/计数器介绍及程序配置
热门文章
- android学习一---搭建开发环境
- 关于Context []startup failed due to previous errors
- codeforces166E - Tetrahedron DP
- MongoCola使用教程 1 - MongoDB的基本操作和聚合功能
- ES6学习笔记(一):轻松搞懂面向对象编程、类和对象
- CSS基础「五」定位
- URI、URL和URN的关系
- VS2005 解决应用程序配置不正确,程序无法启动问题(小问题,大思想)
- 统计MOOC证书 (15 分)
- python随机列表文本_在python中从单词列表返回随机单词