零基础建站培训介绍

当前位置:

CSS3盒模型介绍及使用方法

在CSS3中使用display来定义盒的类型,一般分为block类型和inline类型。像p,div属于block类型,span,a属于inline类型。

1、使用inline-block类型来横向排列

之前去横排二个block时,需要使用float属性,但我们可以将block通过display属性变成inline-block,这样并列就可以不用float属性了。CSS3盒模型介绍及使用方法

注意:使用inline-block排列时,默认是垂直底部对齐,如果要改成顶部对齐,就需要添加vertical-align属性。

CSS3盒模型介绍及使用方法99

用inline-block类型会多出一个小空白区域,可以将代码一个连一个书写,中间不要有空格。

2、使用inline-block类型来制作导航菜单

101

CSS3盒模型介绍及使用方法100

3、inline-table类型

table属于block类型,它与文字排版时,表格为独占一行,这时使用table{display:inline-table},这样就可以与文字一行排列了。

102

注意:默认情况下是顶部对齐的,如果要改成底部对齐,就需要添加vertical-align属性。

4、list-item类型

把非li的元素转换成li元素,然后给它添加li专有的属性 如前面加“点”。

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可
  • 什么是css3-gird布局格式 (140584 次学习)
    CSS3-Gird布局格式css3-gird布局格式应用很广泛,最简单的例子就是内容的分栏显示。对于布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们只
  • DIV CSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。1、margin语法Margin:10pxMargin的值是数字+html单
  • CSS中的ZOOM:1作用是什么 (11503 次学习)
    我们学习CSS3视频教程时,做网站经常会看到CSS代码里会有一个ZOOM:1,删除ZOOM:1属性对网页却没有任何影响。那么ZOOM:1到底有什么作用呢?下面就跟
  • 在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求。虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧。今
  • :before 伪元素在元素之前添加内容:before这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性
  •  column-count属性:column-count将 div 元素中的文本分为几列显示,常用于文章进行分列阅读。缺点是几列的宽度是一样的div{-moz-column-c
  • 我们在自己建网站时,经常需要用到background属性。我们还可以通过background-size来控制背景图片的尺寸。background-size有几个属性值,常用的是cov
  • 有时候,我们需要对网页某个区域的文字竖排,竖向排列。横向排列,在网站制作培训中,经常用到。对于竖排,一时间找不到思路了,呵呵,其实和横排一样
  • 弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局