元素的显示方式

作者: 追逐_chase | 来源:发表于2018-02-13 16:54 被阅读3次
timg.jpg

元素的分类

  • 块级元素

    • 特点:单独占一行,可以给这个元素设置宽高
    • 显示方式(display):block
    • 所属的标签有:div,p,h,ul,lo,ol,dl
  • 行内元素

    • 特点:可以多个标签放在一行,但是给标签设置宽高没有作用
    • 显示方式(display):inline
    • 所属的标签有:span,b,u,i,ins,strong,em
  • 行内块级元素

    • 可以多个标签放在一行,可以设置宽高
    • 显示方式(display):inline-block
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

   <style type="text/css">

       li{
           display: inline-block;
       }

   </style>

</head>
<body>
   <div>
       <ul>
           <li><a href="#">新闻</a></li>
           <li><a href="#">新闻</a></li>
           <li><a href="#">新闻</a></li>
           <li><a href="#">新闻</a></li>
           <li><a href="#">新闻</a></li>
       </ul>
   </div>

</body>
</html>

相关文章

  • 元素的显示方式

    元素的分类 块级元素特点:单独占一行,可以给这个元素设置宽高显示方式(display):block所属的标签有:d...

  • 前端之CSS 布局

    1. 显示方式:display 设置元素的显示方式 display: block | inline | inlin...

  • 前端学习之CSS——元素显示模式

    1、什么是元素的显示模式 定义:元素显示模式就是元素(标签)以什么方式进行显示,比如 自己占一行,比如一行可以放多...

  • CSS display显示

    显示 CSS的display属性指定了HTML元素的显示方式,visibility属性指定一个元素应可见还是隐藏。...

  • CSS布局

    元素的显示方式 block:块级元素 inline:内联元素 inline-block:内联块元素 说明: 如果d...

  • 【前端】CSS : display

    介绍 元素的显示方式 基本属性 none : 隐藏,且不占空间 inline : 设置元素为行内元素 block ...

  • CSS中元素显示模式总结

    元素的显示模式就是:元素(标签)以什么样的方式进行显示,在css中可分为以下三种模式,分别为:块元素、行内元素、行...

  • HTML+CSS学习笔记 06

    一. 元素类型 1.1 元素类型的划分方式 块级元素,行内级元素 (按元素的显示类型划分)块级元素block-le...

  • 前端学习笔记-CSS系列(四)布局

    这章主要讲一下CSS的布局方式 |display设置元素的显示方式 block块级元素 主要特点 默认宽度为父元素...

  • CSS层叠样式表-浮动

    浮动 标准流:在页面中标签或元素默认的显示方式就是标准流的显示方式。 语法:float : left | righ...

网友评论

    本文标题:元素的显示方式

    本文链接:https://www.haomeiwen.com/subject/mjmjtftx.html