今天我们来学习用CSS区块相关的知识,那么什么叫区块呢?就是你输入的标签它占了以整行就是区块,这个只是一个简单的定义,现在可以这么来理解,其实在编写代码中可以总结下有那些是区块,那些不是区块。
工具/原料
1
CSS相关知识
2
HTML相关知识
方法/步骤
1CSS区块设置
首先我来从两个例子来对比下看看P标签div标签和span标签是不是区块。直接从下面代码来说明:
我是DIV
我是P
我是span 可以看到div和P都占用以整行,是区块。但是span这个标签的背景就只有文字这个长,所以不是区块。2CSS区块设置
我们为什么要区分一个标签是不是区块的标签呢?在后面要设置一个标签的长和宽的时候只能是对区块标签来设置的,这里来设置div标签的宽为200px;设置P标签的宽为30%,具体代码如下:
我是DIV
我是P
我是span 如下图可以看到给height设置值可以是像素也可以是百分比,具体效果如下图所示。3CSS区块设置
现在来设置区块的长,使用的是width,具体代码如下:
我是DIV
我是P
我是span 如下代码可以看到,div和p标签的宽度设置的效果如下图了。4CSS区块设置
我们还可以设置高度的最小值,可以通过min-height来设置最小高度,如果区块的内容比这个高度下,那么显示的就是最小高度的区块,如果内容很多,区块的高度就会随着内容的盖度在改变。
我是DIV
如下图,可以看到高度是80px这个像素。5CSS区块设置
除了可以设置最低高度也可以设置最高的高度,比如这里设置最低高度为80px,设置最高高度为100px。可以看看具体的效果,具体代码如下:
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
可以看到文字超出了红色背景这个框,超过了最高的高度了。我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
6CSS区块设置
还可以设置min-width和max-width这两个值,具体代码如下:
我是DIV
我是DIV
我是DIV11111111111111111111
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
如下图是不是很好的说明问题呢,高和宽都有超出边界的问题,这都是max-width和max-height其作用的原因。我是DIV
我是DIV11111111111111111111
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
我是DIV
注意事项
1
区域大小设置需要和区块内容匹配
2
程序设计需要多写多练
上一篇:【药品说明书】肤疾洗剂
下一篇:区块链都有哪些种类?