元素类型以及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:>>
<<
©版权符号
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 、width: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;width:0;height:100%;display:inline-block;等设置;
垂直对齐方式:vertical-align:top/bottom/middle;
应用于不同图片在div当中垂直居中
四:置换和非置换元素的概念
置换元素:;浏览器根据元素的标签属性,来决定元素的具体显示内容,且元素本身拥有一般固有尺寸的元素,称为置换元素。
置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。
非置换元素:html的大多数元素是非置换元素,即其内容直接表现给用户端。
元素类型以及overflow,white-space等属性的更多相关文章
- 与元素类型 "item" 相关联的 "name" 属性值不能包含 '<' 字符。
Android Studio 打包时,报错: 与元素类型 "item" 相关联的 "name" 属性值不能包含 '<' 字符. 这个问题自己百度也没有发现 ...
- mybatis进行mapper.xml测试的时候发生"必须为元素类型 “mapper” 声明属性 “namespace”
1.Caused by Caused by: org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 45; 必须为元素类型 " ...
- CSS元素类型
前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素.行内元素和行内块元素.本文总结这三种显示方式的特征和区别. 1 写在前面 最近在整 ...
- 《Programming WPF》翻译 第5章 4.元素类型样式
原文:<Programming WPF>翻译 第5章 4.元素类型样式 命名样式非常有用,当你得到一组属性并应用到特点的元素上.然而,如果你想要应用一个统一的样式到所有确定元素类型的实例, ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- js:给定两个数组,如何判断他们的相对应下标的元素类型是一样的
题目: 给Array对象原型上添加一个sameStructureAs方法,该方法接收一个任意类型的参数,要求返回当前数组与传入参数数组(假定是)相对应下标的元素类型是否一致. 假设已经写好了Array ...
- 解决 Mybatis 元素类型为 "resultMap" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminat
在配置 mybatis mapper.xml文件时, 一不小心就会报如下类似的异常: Caused by: org.springframework.beans.factory.BeanCreation ...
- HTML基础--元素类型及类型转换
元素类型及类型转换 一.XHTML元素分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素 1.块状元素(block element) 1)块状元素在网页中就是以块的形 ...
- 5:CSS元素类型
5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...
随机推荐
- Dollar Dayz POJ - 3181
解法 完全背包+大数...不想写大数了放个python得了 代码 dp=[0 for i in range(2000)] n,k=map(int,input().split()) num=[i for ...
- Ural 1036 Lucky Tickets
Lucky Tickets Time Limit: 2000ms Memory Limit: 16384KB This problem will be judged on Ural. Original ...
- mongodb数据库的一些常用命令列表
超级用户相关:use admin #增加或修改用户密码db.addUser(ixigua,'pwd') #查看用户列表db.system.users.find() #用户认证db.auth(ixigu ...
- noip模拟赛 洗衣
分析:好神的一道题啊.对每棵树建个图跑一下floyd可以有40分,想要打出正解就得对树有比较深的认识了. 每次新生成一棵树都是由两棵树i,j拼成的,答案为原来两棵树的答案和+i中每个点到j中每个点的距 ...
- hdu 2844 多重背包二进制优化
//http://www.cnblogs.com/devil-91/archive/2012/05/16/2502710.html #include<stdio.h> #define N ...
- codevs——2645 Spore
2645 Spore 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 某陈和某Y 最近对一个游戏着迷.那 ...
- springmvc 日期转换器
package com.xxx.common.controller.converter; import org.joda.time.DateTime; import org.joda.time.for ...
- Android Studio Module 的添加与删除
1. 添加Module(此时可以字面翻译为“模块”,意译为“其他工程”) 2. 删除Module 你要知道,Android Studio的非人性设计,导致删除一个module都是繁琐的. 当你想在An ...
- 1.3-动态路由协议EIGRP
EIGRP(Enhanced IGRP) EIGRP的特点: IGRP/EIGRP都是CISCO的私有协议. 1:是唯一的一种LS/DV的混合协议. 2:Rapid convergence EIGRP ...
- UDEV SCSI Rules Configuration for ASM in Oracle Linux 5 and 6
UDEV SCSI Rules Configuration for ASM in Oracle Linux 5 and 6 For Oracle Automatic Storage Manager ( ...