h5---------内联元素的盒子

最新推荐文章于 2023-04-03 16:17:56 发布
最新推荐文章于 2023-04-03 16:17:56 发布
阅读量194 收藏
点赞数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

span{
background-color: #bfa;
}

.box1{
width: 100px;
height: 100px;
background-color: red;
}

.s1{
/*
内容区、内边距 、边框 、外边距
* */

/*
* 内联元素不能设置width和height
*/
/*width: 200px;
height: 200px;*/

/*
* 设置水平内边距,内联元素可以设置水平方向的内边距
*/
padding-left: 100px ;
padding-right: 100px ;

/*
* 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
*/
/*padding-top: 50px;
padding-bottom: 50px;*/

/*
* 为元素设置边框,
* 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
*/
border: 1px blue solid;

/*
* 水平外边距
* 内联元素支持水平方向的外边距
*/
margin-left:100px ;
margin-right: 100px;

/*
* 内联元素不支持垂直外边距
*/
/*margin-top: 200px;
margin-bottom: 200px;*/

}

.s2{
/*
* 为右边的元素设置一个左外边距
* 水平方向的相邻外边距不会重叠，而是求和
*/
margin-left: 100px;
}


</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>

<div class="box1"></div>
</body>
</html>
gotoschool_j
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
pods-code-library
05-14
目标为Pods.io创建易于编写的代码库从代码中的内联文档自动填充Pods文档。 开源并记录流程，以帮助WordPress社区中的其他人做到这一点。结构除/resources和/example之外的每个根文件夹均为帖子类型。 /resources包含...
HTML5高级之块元素和内联元素
Wendy
11-15 2999
元素可以分为两种，一种是块元素，一种是内联（行内、内嵌）元素。块元素比如常用的div、p、h1等，内联元素比如常用的span、i、a等。接下来详细说明这两种元素各自的特性、使用方法以及两者之间的相互转化。 1、块元素的特性       1）默认独占一行       2）没有宽度时，默认撑满一行       3）支持所有css命令 如图所示： 代码：
CSS盒子模型：深入理解块级盒子与内联盒子
2302_77399030的博客
04-03 306
理解CSS中块级盒子和内联盒子的概念对于掌握布局技巧和调整页面元素的显示效果至关重要。简而言之，块级盒子通常用于布局和组织内容，而内联盒子则用于调整文本和内联元素的样式。通过设置display属性，我们可以轻松地在这两种盒子类型之间进行切换，以满足各种布局需求。
HTML-Css盒子模型(块状，内联、内敛块状元素)
qq_32938957的博客
04-14 1112
html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：&lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote
css---内联元素的盒子模型
chen_zan_yu_的博客
05-01 405
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; } .box1{ wi...
CSS内联样式盒模型
一李
10-15 323
内联元素的盒子 内联元素不能设置width和height(没用） 可以设置水平方向的内边距。 可以设置垂直方向的内边距，但是不会影响页面的布局。 可以设置边框，但是垂直方向的边框不会影响布局。 支持水平方向的外边距（水平方向的不会重叠，会求和），不支持垂直方向的外边距。 .s1{ width:200px; height: 200px; /*padding...
IE6的inline-block
09-25
2002年W3C推出CSS2.1规范时，给元素的display属性增加了inline-...其作用是“这个值导致一个元素产生一个块状盒模型（block box），而本身作为单一的内联盒模型（inline box）流动排列（flow），类似一个被替代的元素
Python-CompresseslinkedandinlinejavascriptorCSSintoasinglecachedfile
08-11
django-compressor：将链接和内联的 JavaScript 或 CSS 压缩到一个单独的缓存文件中
inline-css:将CSS内联到html文件中
05-28
内联css 将CSS属性内联到html文件的style属性中。 对电子邮件有用。 受库启发。特征使用而不是jsdom 在Windows上工作保留文档类型模块化的通过样式和链接标签自动获取CSS 函数返回承诺这个怎么运作该模块采用html并...
终端内部的ASCII射线行进-Rust开发
05-27
终端rusty-donut内的ASCII raymarching Build指令要求rust锈gcc git克隆源git clone ...donut [选项]选项：-h，--help显示此帮助消息--sd使用10个字符的字符集（默认为70）-内联不清除st上的终端
css有关内联元素的盒子总结
m0_51144154的博客
01-05 350
一、特点总结： 内联元素不能设置width和height 内联元素可以设置水平内边距、垂直方向内边距(垂直方向内边距不会影响页面布局) 内联元素可以设置边框，但是只有垂直的的边框不影响页面的布局 内联元素可以设置水平外边距，但是不支持垂直外边距 二、内联元素与块元素转换 5. display样式可以修改元素类型; 可选值： inline : 可以将一个元素作为内联元素显示 block ：可以将一个元素设置块元素显示 inline-block : 将一个元素转换为行内块元素 可以使一个元素既有悍内元素特点
css_盒子模型:块级盒子/内联盒子_显示类型/盒模型border可见性
xuchaoxin1375的博客
01-09 1481
文章目录块级盒子（Block box） 和 内联盒子（Inline box）内部和外部显示类型(display属性) 块级盒子（Block box） 和 内联盒子（Inline box） 块级盒子（Block box） 和 内联盒子（Inline box） 在 CSS 中我们广泛地使用两种“盒子” —— 块级****盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为: block盒子会表现出以下行为:
CSS块级盒子和内联盒子
fire_Oreo_999的博客
04-27 929
CSS块级盒子和内联盒子 块级盒子（Block box） 块级盒子： 每个盒子都会换行。 宽（width）和高（height）属性可以发挥作用，未设置宽的情况下可以扩展并占据父容器的横向空间。 外边距（margin）、边框（border）和内边距（padding）会将其他元素从当前盒子周围推开。 HTML代码： <DOCTYPE html> <html> ...
div与span， block-line块元素与in-line内联元素的区别(H5)
ShareUs的专栏
04-12 3137
&gt; div与span区别，div与span用法 div与span区别及用法- http://blog.csdn.net/cao478208248/article/details/25719735   div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离;   如果div的class为yangshi，则对内的span设置css属性则，代码如下：.yanshi span{属性及...
html5块级元素、内联元素、内联块状元素介绍及嵌套规则
zag666的博客
11-19 1523
HTML中标签元素分为三种： 块状元素（block），行内元素（inline），行内块状元素（inline-block）。 一、块级元素： 1.每一个块级元素独占一行，下一个块级元素要另起一行。 2.元素的高度、宽度、行高以及顶和底边距都可设置。 3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。 4.可以容纳内联元素和其他块级元素。 常见块级元素： 二、内联元素（行...
学习笔记——关于HTML（含HTML5）的块级元素和行级（内联）元素总结
weixin_30278237的博客
08-18 254
1.首先我们要知道什么是块级元素和行级（内联）元素? 块级（block）元素的特点： ①总是在新行上开始； ②高度，行高以及外边距和内边距都可控制； ③宽度缺省是它的容器的100%，除非设定一个宽度； ④它可以容纳内联元素和其他块元素。 内联（inline）元素的特点：①和其他元素都在一行上；②高，行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变...
CSS块级元素、内联元素概念
CDSN大帝的专栏
12-15 473
块元素（block element） address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易，也是css layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水
HTML 常用内联元素
qq_42467563的博客
10-13 1988
标签名字 说明 a 超链接 锚点 span 文本 区域 label 表格标签 br 换行 i 斜体 em 强调 ...
html块级元素和内联元素区别详解(转)
stail111的专栏
12-31 193
[b]块级元素(block)特性：[/b] 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; [b]内联元素(inline)特性：[/b] 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top...
内联函数例子 -baijiahao
最新发布
09-18
内联函数是一种编程语言中的优化技术，它可以将函数调用的操作直接展开成函数体，避免了额外的函数调用开销。内联函数通常用于需要频繁调用的简单函数，以提高程序的执行效率。 例如，在C++编程中，我们可以使用内联函数来优化一些简单的数学计算。比如，我们可以定义一个内联函数来计算两个数的和。代码如下： ```cpp inline int sum(int a, int b) { return a + b; } ``` 在上述代码中，我们使用了inline关键字来指明这是一个内联函数。当我们在程序中调用sum函数时，编译器会将函数体直接插入到函数调用的位置，避免了额外的函数调用开销。 使用内联函数的好处是可以提高程序的执行效率，减少函数调用的开销。特别是对于一些短小的函数，内联展开可以减少函数调用的开销，从而提高程序的整体性能。 但需要注意的是，并不是所有的函数都适合使用内联方式。内联函数的展开会增加代码的体积，如果代码过于复杂或函数体过大，内联展开可能会导致代码庞大、冗余，反而降低程序的执行效率。因此，在使用内联函数时需要谨慎选择，根据实际情况进行优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值