溢出
含义：父元素有自己的宽度高度，子元素宽度高度超过父元素，超出部分就是溢出的部分，父元素有自己的宽度高度，被里面的文本超出了。
在父元素添加下方的值：
属性：overflow属性
取值：visible溢出显示
hidden溢出隐藏
scroll溢出滚动，默认自带没有功能的滚动条，当文本或者盒子超出的话会有滚动条。
实际开发：溢出显示三个文本
div{
1.设置宽度
2.文本不折行
3，溢出文本隐藏
4.溢出文本显示三个圆点
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
width: 50px;
border: 1px solid gray;
/* 不折行 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>woshaiscbkhcdjkhcjbc</li>
<li>asdscdjcnsdlcncnzcnx</li>
<li>aserhweuskcbsdjvbsdjk</li>
<li>asdbnajkdnsjcn</li>
<li>asdsjkacjnsd c c sdc</li>
<li>sdcnasklxasklcn sdklcm</li>
</ul>
</body>
</html>
元素类型
行内元素
特点：默认横向显示，不能设置宽度和高度。
案例：a、strong、b、span、i、sup、sub、u、s、del、mark、font、var
属性：display：inline
不能显示宽度和宽度
块级元素
特点：默认纵向排列，能设置宽度和高度，默认占宽一整行
案例：div、p、ul、ol、li、h1-h6，table、form、dl、dt、dd
属性：display：block
能设置宽度和高度，是纵向排列。
特殊块级元素：
table========table
li=========list-item
特殊的取值：
tr======table-row
td======table-cell
行内块元素
特点：既有行内元素，又是块级元素
案例：img、input、select、textarea、iframe
display：inline-block；
行内块元素，能设置宽度高度，并且横向排列，图片是一个特殊的行内块元素。
除此之外，display的取值还可以为：
none：隐藏元素
flex：触发弹性盒子
grid：触发网格
行内块元素的对齐方式：
默认的情况下，行内块元素默认的垂直对齐方式是跟文本一样以文本的基线形式对齐的
1）调整图片的垂直居中能让图片位于元素的垂直居中位置
2）用来解决行内块元素（图片下面有3px的留白）
使用：vertical-align
取值：top
bottom
middle
baseline（默认）
另外一种解决办法：
display：block 主要考虑的是元素类型不同导致的。
元素之间可以进行相互转换吗？
可以进行相互转换。使用display进行转换。
如何让一个元素隐藏？
1）display：none隐藏元素=不占页面空间，后面补位
2）visibility：hidden=隐藏元素占页面空间，后面不补位
3）width：0px；height：0px=隐藏元素，不占页面空间。前提是没有文本，但是当有文本的时候，设置宽高的同时，还要添加溢出隐藏，并且设置font-size：0；
4）opacity=====透明度
0为透明。
5）缩放：transform：scale（0） ;
问题：父子关系的元素，给父元素添加opacity透明，如何不影响子元素的透明
就不使用opacity，使用rgba
如何让一个元素变成块级元素
1）display：block；
2）给元素添加浮动
3）添加定位
绝对定位和固定定位
4）让父元素触发弹性盒子或者是网格布局
置换元素和非置换元素
置换元素：可变元素，本质就是行内块元素，因为你的元素有自己的宽度和高度，浏览器加载的时候会直接显示，并且还有一部分元素是根据自己的类型进行在浏览器里面显示的=======就是行内块元素
非置换元素：除了置换元素都是非置换元素。
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
