前端学习 -- Css -- 内联元素的盒模型
- 内联元素不能设置width和height；
- 设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right；
- 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；
- 为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；
- 水平外边距内联元素支持水平方向的外边距；
- 内联元素不支持垂直外边距；
- 为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和。
示例：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span {
background-color: #FFA500;
}
/**
* 宽120 高120 颜色为#0000FF的div
*/ .box1 {
width: 120px;
height: 120px;
background-color: #0000FF;
} .s1 {
/*
内容区、内边距 、边框 、外边距
* */
/*
* 内联元素不能设置width和height,設置了也沒有效果
*/
width: 200px;
height: 200px;
/*
* 水平方向上内边距左为100px,右为100px
*/
padding-left: 100px;
padding-right: 100px;
/*
* 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
*/
padding-top: 50px;
padding-bottom: 50px;
/*
* 为元素设置边框,
* 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
*/
border: 2px yellow solid;
/*
* 水平外边距100px
*/
margin-left: 100px;
margin-right: 100px;
/*
* 内联元素不支持垂直外边距,因此设置如下完全没有效果
*/
margin-top: 200px;
margin-bottom: 200px;
} .s2 {
/*
* 为右边的元素设置一个左外边距
* 水平方向的相邻外边距不会重叠，而是求和
*/
margin-left: 100px;
}
</style>
</head> <body>
<span class="s1">章台路</span>
<span class="s2">还见褪粉梅梢</span>
<span>试花桃树</span>
<span>愔愔坊陌人家</span> <div class="box1"></div>
</body> </html>
效果：
代码放到github上面了：
https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson16.html
自己可以运行下看看效果
前端学习 -- Css -- 内联元素的盒模型的更多相关文章
- 内联元素的盒子模型与文档流定位padding属性
内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100 ...
- css 内联元素
内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念.内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一 ...
- css 内联元素inline 行框全解
首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...
- CSS块级-内联元素，盒子模型
CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...
- 前端研究CSS之内联元素块级化/区域大小/文字和图标的位置
做了一天的小按钮基本都是文字+小图标的组合,问题挺多处理的不好,现在总结一下做个了断. //页面结构 <span class="b"> <a href=" ...
- CSS - 内联元素span 强制换行失败的可能原因
在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left or float:right
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
随机推荐
- 网络对抗技术 2017-2018-2 20152515 Exp4 恶意代码分析
1.实验后回答问题 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 答:- 我会使用sysmon工具来 ...
- C++之enum枚举量声明、定义、使用与枚举类详解
C++之enum枚举量声明.定义.使用与枚举类详解 学习一个东西,首先应该指导它能做什么,其次去知道它怎么去做,最后知道为什么去这么做. 知其然知其所以然.不能冒进 ,一步一步的慢慢来.
- 11、可扩展MySQL+12、高可用
11.1.扩展MySQL 静态分片:根据key取hash,然后取模: 动态分片:用一个表来维护key与分片id的关系: 11.2.负载均衡 12. 12.2导致宕机得原因: 35%环境+35%性能+2 ...
- ES6 之reduce的高级技巧
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值.reduce() 方法接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 ...
- [CF1083F]The Fair Nut and Amusing Xor[差分+同余分类+根号分治+分块]
题意 给定两个长度为 \(n\) 的序列 \(\{a_i\}\) 与 \(\{b_i\}\),你需要求出它们的相似度.,我们定义这两个序列的相似度为将其中一个序列转化为另一个序列所需的最小操作次数.一 ...
- java监听器（Listener）学习笔记
现在来说说Servlet的监听器Listener,它是实现了javax.servlet.ServletContextListener 接口的服务器端程序,它也是随web应用的启动而启动,只初始化一次, ...
- javascript source map 的使用
之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意 ...
- jira webhook 事件触发并程序代码调用jenkins接口触发构建操作
要解决的问题 开发管理工具触发站点构建事件,事件处理中需要调用Jenkins接口开始构建动作. 我的应用场景: 使用jira作为管理工具,在jira中创建自定义的工作流来规定测试,上线,发布等流程,并 ...
- C#_备份sqlserver数据库
C# 代码备份数据库 ,不需要 其他 DLL protected void Button1_Click(object sender, EventArgs e) { /// ...
- Loadrunner 面试常见问题
三大组件: 脚本生成器,录制和调试脚本 . 控制台,设置运行和资源场景 结果分析器,将测试结果数据以不同的图表呈现,便于性能分析 工作原理: 录制:根据不同协议,记录下客户端和服务器二者之间的对话,生 ...