、

...

、

、
、
• 、

  、

  、

  、、、

  、

  常用的内联块状元素(又叫行内块元素)有：
  、
  内联元素(行内)
  在html中,、、、、 、  和就是典型的内联元素(行内元素)(inline)元素。
  当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从页使用div元素具有内联元素特点。
  div{display:inline}
  内联元素(行内)特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高及顶部和底部边距不可设置；(padding可以设置)
  3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
  块级元素
  什么是块级元素？在html中
  、
  、
  、、
   和 
  就是块级元素。
  设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
  a{display:block;}
  块级元素特点：
  1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
  2、元素的高度、宽度、行高以及顶和底边距都可设置。
  3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
  内联块状元素(行内块)
  内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,
  代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),、标签就是这种内联块状标签。
  inline-block元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置。
  提示：下一小节是用视频动画来讲解css中的盒模型。
  块元素尽量采用div嵌套, 行内元素尽量采用span嵌套
  显示模式的转换
  块级、行内 、行内块元素三者是可以相互转换的。
  display 显示 的意思
  block 块
  inline 行内
  
  块级 → 行内元素 display: inline;
  行内元素 → 块级元素 display: block;
  行内和块级 → 行内块 display:inline-block;
  span{
      width:100px;
      height:100px;
      background-color:#960;
      didplay:inline-block;
  }
  水平居中设置-行内元素
  如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的。如下代码：
  html代码：
  
  我是文本,哈哈,我想要在父容器中水平居中显示。
  
  css代码：
  水平居中设置-定宽块状元素
  当被设置元素为块状元素时用text-align:center就不起作用了,这时也分两种情况：定宽块状元素和不定宽块状元素。
  满足定宽和块状两个条件的元素是可以通过设置"左右margin"值为"auto"来实现居中的。我们来看个例子就是设置div这个块状元素水平居中：
  第一种方法
  html代码：
  
  我是定宽块状元素,哈哈,我要水平居中显示。
  css代码：
  也可以写成：
  margin-left:auto;
  margin-right:auto;
  注意：元素的"上下margin"是可以随意设置的。这种水平居中的方法两个2个条件缺一不可
  第二种方法
  html代码：
  
  我是定宽块状元素,哈哈,我要水平居中显示。
  css代码：
  水平居中设置-不定宽块状元素
  在实际工作中我们会遇到需要为"不定宽度的块状元素"设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
  不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多)：
  加入table标签
  设置display;inline方法
  设置position:relative和left:50%;
  (1)第一种方法：
  第一步：为需要设置的居中的元素外面加入一个table标签(包括

  、、

  )。 第二步：为这个table设置"左右margin auto"(这个和定宽块状元素的方法一样)。举例如下： html代码： 1 2 3 css代码： (2)第二种方法： 改变块级元素的dispaly为inline类型,然后使用text-align:center来实现居中效果。如下例子： html代码： 1 2 3 css代码： 这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度, 但也存在着一些问题：它将块状元素的display类型改为inline,变成了行内元素,所以少了一些功能,比如设定长度值。 (2)第三种方法： 通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中 代码如下： 1 2 3 css代码： 这种方法可以保留块状元素仍以display:block的形式显示,优点不添加无语议表标签,不增加嵌套深度, 但它的缺点是设置了position:relative,带来了一定的副作用。 这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。 隐性改变display类型 有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none除外)设置以下2个句之一： position:absolute float:left或float:right 元素会自动变为以display:inline-block的方式显示,当然就可以设置元素的width和height了且默认宽度不占满父元素。 如下面的代码,小伙伴们都知道a标签是行内元素,所以设置它的width是没有效果的,但是设置为position:absolute以后,就可以了。 进入课程请单击这里 css代码 如何让一段文字水平居中且垂直居中 水平垂直居中 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height: 200px; /*设置文字行距等于div的高度*/ overflow:hidden; } text-align 和margin auto 区别 text-align 可以让块级元素里面的文字内容居中对齐. 文字内容 == (图片 input 行内元素 行内块元素) 但是对于里面的块级元素无效 让一个块级元素居中对齐 ： margin:0 auto; 【实例】 电子邮箱: 密码: 地址 CSS布局水平居中实战 方法一：margin + width Demo 说明：这个水平居中方法, 我们最熟悉了, 也是最常用的, width可以固定px也可以使用百分比 方法二：table + margin Demo 说明：display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样式 (支持 IE 8 及其以上版本) 兼容 IE 8 一下版本需要调整为 方法三：inline-block + text-align Demo 说明：兼容性佳(甚至可以兼容 IE 6 和 IE 7) 方法四：absolute + margin-left Demo 说明：宽度固定相比于使用transform, 有兼容性更好 方法五：absolute + transform Demo 说明：绝对定位脱离文档流, 不会对后续元素的布局造成影响。transform为 CSS3 属性, 有兼容性问题 方法六：flex + justify-content Demo