零基础建站培训介绍

当前位置:

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专有的属性 如前面加“点”。

上一课: 下一课:

发表评论

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

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • 什么是css3-gird布局格式 (140806 次浏览)
    CSS3-Gird布局格式css3-gird布局格式应用很广泛,最简单的例子就是内容的分栏显示。对于布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们
  • CSS3新增选择器有哪些 图文教程 (142153 次浏览)
    css1-css3提供特别丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。(相关教程:CSS3视频教
  • 在CSS3中使用display来定义盒的类型,一般分为block类型和inline类型。像p,div属于block类型,span,a属于inline类型。1、使用inline-block类型来
  • display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高
  • Dedecms 介绍和安装 (12596 次浏览)
    课程要点1.Dedecms 介绍2.Dedecms 能做什么?3.学会 Dedecms 能做什么?4.需要什么样的基础?5.课程介绍6.Php 环境的搭建7.Dedecms 系
  • DEDECMS首页标签介绍 (12446 次浏览)
    课程要点1.新模版的建立2.文章列表标签3.底层模版4.导航标签5.友情链接标签1.新模版的建立2. 文章列表标签学习目标:会调用所有文档
  • 做网站时,避免不了网站上有大量的图片。网站上的图片显示就需要使用img图片标签。HTML img图片标签写法[cce_html]<img src="图片地址" alt=
  • 通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、