css元素类型
行内元素 display：inline
含义：默认横向显示，不能设置宽高
举例：a,b,strong,i,em,font,span
总结：行内元素也遵循盒子模型规则，但是只对左右起作用（撑开元素调整距离，上下不能实现）
块级元素： display：block
含义：默认纵向排列，默认占父元素的一整行，能设置宽高
举例：div, h1~h6,p,dl,dt,dd,ol,ul,li
行内块元素： display：inlink-block
含义：既有行内元素的特点，也有块级元素的特点，能横向显示，能设置宽高
举例：input,img,textarea,select
元素类型转换
属性：display
取值：block 块级元素
inline 行内元素
inline-block 行内块元素
none 隐藏元素
list-item li特殊取值，也是一个块级元素
table 元素类型以表格类型显示，也是一个特殊的块级元素
隐藏元素
1，display：none
能隐藏元素，隐藏后不占页面空间
2，visibility：hidden / visible
visible 默认显示
hidden 隐藏，占页面空间
3，height：0px；
不设置高度，且文字大小为0，不占页面空间
4，opacity：0
透明度设置，取值为0--1，0代表透明，1代表不透明，占页面空间
5，transform：scale（0）
缩放比例为0，占页面空间
行内块元素应用
可以通过vertical-align属性调整图片垂直对齐方式
取值：top 顶线对齐
middle 中线对齐
baseline 基线对齐（默认）
bottom 底线对齐
溢出属性 overflow
取值：visible 溢出显示
hidden 溢出隐藏
scroll 溢出滚动，默认自己带两个滚动条，哪个方向溢出哪个方向显示滚动条
auto 溢出自动，当有内容超出时显示滚动条，没有超出不显示
overflow-x 水平溢出
overflow-y 垂直溢出
实例：1，显示三个小圆点功能（单行文本溢出显示三个小圆点）
1，设置宽度 width：--px
2，文本不折行显示 white-space：nowrap
3，文本溢出隐藏 overflow：hidden
4，溢出文本显示三个小圆点 text-overflow：ellipsis
2多行文本设置三个小圆点
1，设置宽度 width：--px
2，多出去的文本溢出隐藏：overflow：hidden
3，让元素显示为一个可以伸缩的盒子 display：-webkit-box；
4，共显示多少行文本 -webkit-line-clamp：3；
5，文本显示方向为垂直排列方向 -webkit-box-orient：overtical
图片垂直居中案例：rertical-align：middle
扫一扫
2739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
