1.文本溢出:overflow: visible/hidden/scroll/auto/inherit;
visible:默认值,内容不会被修剪,会呈现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
inherit:规定应该从父元素继承overflow属性的值。
2.省略号
text-overflow: clip / ellipsis
clip:不显示省略号(...),而是简单的裁切;
ellipsis:当对象内文本溢出时,显示省略标记
注意:
text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
1)容器宽度:width:value;(px、%,都可以)
2)强制文本在一行内显示:white-space:nowrap;
3)溢出内容为隐藏:overflow:hidden;
4)溢出文本显示省略号:text-overflow:ellipsis;
注:必须是单行文本才能设置本文溢出!!!
3.元素的分类:(块级元素,行内元素,行内块元素)
块级元素:例如:
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
fieldset - 表单字段集
1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,
2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。
3)块状元素都可以定义自己的宽度和高度。
4)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
行内元素:例如:
a –超链接
br - 换行
i - 斜体
em - 强调
label - 表单标签
span - 常用内联容器,定义文本内区块
strong - 粗体强调
textarea - 多行文本输入框
u - 下划线
select - 项目选择
A、行内元素的表现形式是始终以行内逐个进行显示;
B、行内元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度由内容来确定,它只能根据所包含内容的高度,最小内容单元也会呈现矩形形状;
C、行内元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示;(margin-top/bottom:;)
行内块元素 :可以设置宽高、在一行内显示
例如:img -图片
input -输入框
4.元素类型的转换:block属性和属性值
属性值:block/inline/inline-block/none/flex/list-item/table-header-group/table-footer-group
作用:该属性设置或检索对象元素应该生成的盒模型的类型
各属性值的作用:
1)block块状、显示:类似在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。(将元素转为块状元素,使该元素拥有块状元素的特点;)
2)inline内联、显示:在元素后面删除换行符,多个元素可以在一行内并列显示。(元素转换为内联元素)
3)当元素设置了float属性后,就相当于给该元素加了display:block;声明;但是脱离文档流
4)inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。(只有这一个元素类型支持vertical-align属性)img,input(行内块元素)。
5)none 此元素不会被显示。
6)list-item:将元素转换成列表。li的默认类型。
5.元素的垂直居中:
设置一个元素在一个容器中垂直居中,必须更改默认的display属性值为inline-block;
并加上同级元素(标尺)(同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display: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。
根据css显示分类,XHTML元素被分为 三种类型:块状元素,内联元素,可变元素