zoukankan      html  css  js  c++  java
  • CSS中的块级元素(block)与行内元素(inline)

    css中有3种基本的定位机制:
    普通流(相对定位实际上看做普通流定位模型的一部分)
    浮动(float)
    绝对定位(固定定位是绝对定位的一种)
    所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素)。
    块级元素:块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素,例如div和p。
    常见的块级元素:
    (1)div:主要用来进行框架布局。
    (2)h1~h6:用来设置不同级别的标题。
    (3)p:创建段落,会自动在其前后创建一些空白。
    (4)hr:用来创建分隔先。
    (5)ol:创建有序列表。
    (6)ul:创建无序列表。
    块级元素的特点:
    1.块级元素既可以容纳内联元素也可以容纳块级元素。
    2.块级元素在默认的情况下是独占一行的。
    3.块级元素大小是可以控制的,css可以通过width与height设定高度和宽度。宽度默认值就是它所在容器宽度的100%。
    4.块级元素可以设置margin和padding属性. 
    5.块级元素对应属性display:block;
    内联元素:任何不是块级元素的可见元素都是内联元素。内联元素只能够容纳文本或者内联元素。
    常见的内联元素:
    (1)strong:加粗强调。
    (2)em:斜体强调。
    (3)s:删除线。
    (4)u:下划线。
    (5)a:超链接。
    (6)span:常用行级,可定义文档中的行内元素。
    (7)img:图片。
    (8)input:表单。
    内联元素的特点:
    1.内联元素默认情况下可以和其他内联元素元素在一行上。
    2.内联元素默认情况下的大小是不可以控制的。
    3.内联元素可以产生代码换行和空格。
    4.内联元素对应属性display:inline;
    5.内联元素只能容纳文本或者内联元素。
          内联元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
          display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。

  • 相关阅读:
    elasticserach7.X 安装,配置
    org.elasticsearch.bootstrap.StartupException: ElasticsearchException[failed to bind service]; nested: AccessDeniedException[/home/ae/es761/data/nodes];
    Java 八大基本数据类
    java 输入scanner
    idea生成javaDoc文件
    时间戳和日期的相互转化
    自1970 年1月1日8时0分0秒至当前时间的总秒数什么意思?
    JDK的卸载与JDK的安装以及环境变量配置
    Java特性与优势
    图片识别
  • 原文地址:https://www.cnblogs.com/sea-stream/p/10449745.html
Copyright © 2011-2022 走看看