CSS区块的定义和使用教程

 时间:2024-10-15 01:37:55

1、首先我来从两个例子来对比下看看P标签div标签和span标签是不是区块。直接从下面代码来说明:<html> <head> <title>CSS区块设置</title> </style> </head> <body> <div style="background-color:red;">我是DIV</div> <p style="background-color:red;">我是P</p> <span style="background-color:red;">我是span</span> </body></html>可以看到div和P都占用以整行,是区块。但是span这个标签的背景就只有文字这个长,所以不是区块。

CSS区块的定义和使用教程

3、现在来设置区块的长,使用的是width,具体代码如下:<html> <head> <title>CSS区块设置</title> </style> </head> <body> <div style="background-color:red;height:200px;width:100px;">我是DIV</div> <p style="background-color:red;height:30%;width:50%;">我是P</p> <span style="background-color:red;">我是span</span> </body></html>如下代码可以看到,div和p标签的宽度设置的效果如下图了。

CSS区块的定义和使用教程

5、除了可以设醅呓择锗置最低高度也可以设置最高的高度,比如这里设置最低高度为80px,设置最高高度为100px。可以看看具体的效果,具体代码如下:<html>艘早祓胂 <head> <title>CSS区块设置</title> <style> div{ background-color:red; min-height:80px; max-height:100px; width:100px; } </style> </head> <body> <div>我是DIV<br/> 我是DIV<br/> 我是DIV<br/> 我是DIV<br/> 我是DIV<br/> 我是DIV<br/> 我是DIV<br/> 我是DIV<br/> 我是DIV<br/> </div> </body></html>可以看到文字超出了红色背景这个框,超过了最高的高度了。

CSS区块的定义和使用教程
  • Dreamweaver中怎么对齐代码
  • Dreamweaver中怎么设置网页字体
  • 【DW基础】Dreamweaver使用Div标签
  • Dreamweaver软件怎么设置CSS字体格式
  • DW软件怎么设置网页时间自动更新
  • 热门搜索
    233网校怎么样 怎么修改文件类型 怎么卸载打印机驱动 初三考不上高中怎么办 国际关系学院怎么样 血小板高怎么回事 壁虎怎么养 骨转移怎么治疗 睡不着觉是怎么回事 我的世界怎么做梯子