zoukankan      html  css  js  c++  java
  • 块级元素

    在做页面布局的时候,一般会将html元素分为两种,即块级元素和行内元素。

    一、块级元素:block element

    每个块级元素默认占一行高度,一行内添加一个块级元素后一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑是,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;

    块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含行级元素,如<p>。也有一些则既可以包含块级元素,也可以包含行级元素。

    Div是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

    二、行内元素:inline element

    也叫行内元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素“a”。比如SPAN元素,IFRAME元素和元素样式的display:inline的都是行内元素。例如文字这类元素,各个字母之间横向排列,到最右端自动折行。

    三、块元素的特点(block)

    1.总是在新行上开始;

    2.高度,行高以及外边距和内边距都可控制。

    3.宽度缺省是它的容器的100%,除非设定一个宽度。

    4.它可以容纳内联元素和其他块元素。

    四、inline元素的特点

    1.和其他元素都在一行上

    2.高、行高以及外边距和内边距不可改变

    3.宽度就是它的文字或图片的宽度,不可改变。

    4.内联元素只能容纳文本或者其他内联元素。

    对行内元素,需要注意如下:

    设置宽度width无效,

    设置高度height无效,可以通过line-height来设置。

    设置margin只有左右margin有效,上下无效。

    设置padding只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围内容是没影响的

    五、常见的块状元素

    address:地址

    blockquote:块引用

    center:居中对齐

    dir:目录列表

    div:常用块级容器,也是css layout的主要标签

    dl:定义列表

    fieldset:form控制组

    form:交互表单

    h1:大标题

    h2:副标题

    h3:3级标题

    h4:4级标题

    h5:5级标题

    h6:6级标题

    hr:水平分隔线

    isindex:input prompt

    menu:菜单列表

    noframes:frames可选内容(对于不支持frame的浏览器显示此区块内容)

    noscript:可选脚本内容(对于不支持script的浏览器显示此内容)

    ol:有序表单

    p:段落

    pre:格式化文本

    table:表格

    ul:无序列表

    六、常见的内联元素

    a:锚点

    abbr:缩写

    acronym:首字

    b:粗体(不推荐)

    bdo:bidi override

    big:大字体

    br:换行

    cite:引用

    code:计算机代码(在引用源码的时候需要

    dfn:定义字段

    em:强调

    font:字体规定(不推荐)

    i:斜体

    img:图片

    input:输入框

    kbd:定义键盘文本

    label:表格标签

    q:短引用

    s:中划线(不推荐)

    samp:定义范例计算机代码

    select:项目选择

    small:小字体文本

    span:常见内联容器,定义文本内区块

    strike:中划线

    strong:粗体强调

    sub:下标

    sup:上标

    textarea:多行文本输入框

    tt:电传文本

    u:下划线

    七、行内元素与块级元素有什么不同?

    1、块级;块级元素会独占一行,默认情况下宽度自动填满其父元素宽度

        行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

    2、块级:块级元素可以设置宽高

         行内:行内元素不可以设置宽高

    3、块级:块级元素可以设置margin,padding

        行内:行内元素水平方向的margin,padding有些无法生效

    4.块级:display:block;

       行内:display:inline;

    可以通过修改display属性来切换块级元素和内联元素。

  • 相关阅读:
    WPF系列四
    (最近新弄的几个小demo) 之 (模仿百度搜索框)后续更新中,比较实用
    WPF系列二
    使用IHttpAsyncHandler实现服务器推送技术
    JS中的substring和substr函数的区别
    JS图片自动切换
    Builder生成器模式
    Adapter适配器模式
    Singleton单例模式
    Prototype原型模式
  • 原文地址:https://www.cnblogs.com/shuibi/p/6640962.html
Copyright © 2011-2022 走看看