zoukankan      html  css  js  c++  java
  • 元素类型以及overflow,white-space等属性


    1:预格式化标签:<pre></pre>
    2:overflow属性="visible/hidden(隐藏)"/scroll/auto(自动)/inherit;
    visible:默认值,内容不会被修剪,会呈现在元素框外;
    hidden:内容会被修剪,并且其余内容是不可见的
    scroll:内容会被修剪,但是浏览器会显示滚动条,以便产看其它内容
    auto: 如果内容被修剪,浏览器会显示滚动条,以便查看其它内容
    inherit:规定应该从父元素继承overflow属性的值
    3:空余空间:
    white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit
    该属性用来设置如何设置元素内的空白
    normal:默认值,空白会被浏览器忽略,
    nowrap:文本不会被换行,文本会在同一行上继续,直到遇到<br/>标签为止;
    pre:空白会被浏览器保留,其行为方式跟html中的pre标签
    pre-wrap:保留空白符序列,但是正常的进行换行
    pre-line;保留空白符序列,但是保留正常换行
    4:&gt;>
    &lt;<
    &copy;版权符号
    5:text-overflow:clip/ellipsis
    clip:不显示省略号,而是简单的裁切
    ellipsis:当对象内文本溢出时,显示省略标记
    text-overflow:当单行文本溢出时是否显示省略标记,并不具备其它的样式属性定义
    6:还需要定义:
    1、容器宽度:width:value
    2、强制文本在一行内显示:white-space:nowrap;
    3、溢出内容为隐藏:overflow:hidden;
    4、溢出文本显示省略号:text-overflow:ellipsis;
    5 、20em/不允许出现半汉字截断
    7 :1)block块状显示,类似的在元素后面添加换行符,也就是说其它元素不能在后面并列
    2)inline内联显示:在元素后面删除换行符,多个元素可以在同一行内并列显示。
    3)当元素设置了float属性后,就是相当于该元素具备块状元素显示的特点;
    4)inline-block行内块元素显示:元素的内容以块状显示,行内的其它元素显示在同一行。


    8:删除线:<del>文本</del>
    9:块状元素(block element)
    A)块状元素在网页中是以块的形式显示,就是元素显示的是矩形区域,常用的块状元素包括div,dl,dt,dd,
    ol,ul,fieldset,h,p,form,hr,colgroup,col,table,tr td等
    10:默认情况下,块状元素都会占据一行,两个块元素不会出现并列情况
    块元素都可以定义自己的宽度和高度。
    块元素一般是作为其他元素的容器,他可以容纳其他内联元素和其它块状元素,可以把这种容器比喻为一个盒子。
    11:内联元素(inline element)行内元素
    常见行内元素:a,span,i,em,strong,b等
    内联元素的表现形式始终是以行内逐个进行显示
    内联元素没有自己的形状,不能定义它的宽和高,它显示的高度,宽度只能根据所包含内容的宽度和高度来确定,它的最小内容单元也会呈现矩形形状
    内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性值不能正确显示

    12:内联块元素
    inline-block:和其它元素都在一行上
    元素的高度,宽度,行高,以及顶和底边距都可以设置
    常见标签:img input textarea
    13:可变元素
    需要根据上下文关系确定该元素时块元素或者是内联元素。


    元素类型的转换
    盒子模型可通过display属性来改变默认的显示类型
    1)display属性与属性值(18个属性值)
    属性值:block/inline/inline-block/none/list-item
    作用:块元素和内联元素之间的转换。
    说明:各属性值的作用
    a:Block块状显示:类似在元素后面添加换行符,也就是说其它元素不能在其后面显示,或者是让元素竖排显示
    b:inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示,或者是让元素竖排显示
    c:当元素设置了float属性后,就相当于该元素具备块状元素显示的特点;
    d:inline-block行内块元素显示:元素的内容以块状显示,行内的其它元素显示在同一行img input
    e:none元素不会被显示
    f:list-item:将元素转换成列表,li的默认类型
    7)A:大部分块元素display属性值默认为 block,其中列表的默认值为list-item
    B:大部分内联元素的display属性默认为inline,其中的img input默认为inline-block
    三:元素垂直居中
    1:必须给容器父元素加上text-align:center
    2:必须给当前元素转换成行内块元素,display:inline-block,再给当前元素加上vertical-align:middle;
    3:在当前元素的后面加上同级元素span,并对span进行vertical-align:middle;0;height:100%;display:inline-block;等设置;
    垂直对齐方式:vertical-align:top/bottom/middle;
    应用于不同图片在div当中垂直居中
    四:置换和非置换元素的概念
    置换元素:;浏览器根据元素的标签属性,来决定元素的具体显示内容,且元素本身拥有一般固有尺寸的元素,称为置换元素。
    置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。
    非置换元素:html的大多数元素是非置换元素,即其内容直接表现给用户端。

  • 相关阅读:
    node.js 基础篇
    node.js 开发环境搭建
    Velocity VelocityEngine 支持多种loader 乱码问题
    tomcat集群及session共享
    上海支付宝终面后等了两周,没能收到offer却来了杭州淘宝的电话面试
    支付宝hr终面,忐忑的等待结果
    mysql 数据范围总结
    rsync同步文件(多台机器同步代码...)
    linux基础命令
    路飞学城项目之前后端交互,跨域问题
  • 原文地址:https://www.cnblogs.com/xuxiaoxia/p/6550795.html
Copyright © 2011-2022 走看看