单行文本溢出隐藏,设置空白空间,设置内容超出,css元素类型分为两类,元素类型的转换
单行文本溢出隐藏一共四步
1.设置范围 width
2.设置内容强制不换行
white-space:
pre 不换行识别多个空格
nowrap 不换行,多个空格识别一个
3.隐藏超出的内容 overflow:hidden
4.省略的内容转换成省略号 text-overflow:ellipsis
设置空白空间
white-space
normal 自动换行,多个空格识别一个,默认值
pre 强制不换行,回车多个空格可以识别
pre-wrap 回车和空格都能识别
pre-line 只能识别回车
nowrap 强制不换行多个空格识别一个
设置内容超出
overflow
visible 默认值
hidden 超出的内容隐藏
scroll 不管内容是否超出都有滚动条
auto 只有内容超出才有滚动条
inherit 继承父元素的overflow值(不常用)
overflow-x:hidden auto 默认值
overflow-y:hidden auto默认值
text-overflow:
clip 把隐藏的内容裁掉
ellipsis 把隐藏的内容转换成省略号
css元素分为两类
块元素,内联元素(行内元素)
行内块元素(可变,置换)横排排列可设宽高
自动换行的标签(块元素)
标题h1~h6,p,div, hr, dl, dt,dd,ul,ol,li,form,table,tr,td
1.块元素可以设置宽高
2.上下排列,独占一行,可以自动断行
3.块元素可以嵌套块和内联元素(有几个特殊只能嵌套内联,p,h1~h6,dt)
4.可以设置四个方向内外边距
5.如果块元素不设置宽度,浮动后,宽度由内容撑开
不会自动换行(行内元素/内联元素)
em,i,b, strong, u,sub,sup,span,a,img,input,textarea多行文本输入,select下拉列表,label,提示信息
1.设置不了宽高
2.水平排列,一行可以显示多个内容,不会自动换行
3.内联元素只能嵌套内联元素
4.只能设置水平方向(左右的margin和左右的padding)的内外边距
5.内联元素浮动后,可以设置宽高,也可以设置四个方向的内外边距
行内块元素(置换元素)
img,input,text area,select
1.可以设置宽高
2.水平排列,一行可以显示多个内容,不会自动换行
3.行内块元素只能嵌套内联元素
4.可以设置四个方向内外边距
元素类型的转换
转换块元素
display:block
转换内联元素
display:inline
转换成行内块元素
display:inline-block
设置元素隐藏(完全隐藏,不占位)
display: none
补充:设置透明度
opacity:0 占位隐藏
li的display值是list-item
:hover的两种用法
1.鼠标移入自己改变自己的样式
2.鼠标移入自己改变自己后代的样式
.nav a:hover b{
display: none;
}
.nav a:hover i{
display: inline;
}
注意
b和i必须是a的后代元素