2021-05-26 Day-05盒子模型、单行文本省略效果

不能设置尺寸的元素

行内元素中b,strong,i,em,u,s,del,span,a

html标签

- 块级元素：div,p,h1-h6,ul,ol,li,dl,dt,dd,hr,form,table,tr,td
- 行内元素：b,strong,i,em,u,s,del,span,sup,sub,a,br,img,input
- 行内元素中img,input可以设置尺寸
- 空标签：<img/><input/><br/>
- alt和title的区别？

css样式表

1.内部样式表
2.外部样式表
	<link/>和@import区别？
3.行内、内联样式

优先级

继承性最低
内部和外部遵循就近原则
!important手动更改样式优先级
内联1000
id100
类10
元素1

css属性

1.文本属性
2.列表属性
	ul,ol,li{
		list-style:none;
		或list-style-type:none;
	}
3.边框属性
4.背景属性
	雪碧图
5.浮动属性
	float:left/right/none;
6.框模型

框模型、盒子模型(标准盒模型)

组成：内容(width和height)、内边距、边框、外边距
元素占地宽度：左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

外边距margin

- 单方向外边距设置：
	上外边距margin-top:10px;
	下外边距margin-bottom:10px;
	左外边距margin-left:10px;
	右外边距margin-right:10px;
- margin的简写形式：
	margin:10px;四个方向10px
	margin:10px 20px;第一个值代表上下10、第二个值代表左右20
	margin:10px 20px 30px;上10、左右20px、下30px
	margin:10px 20px 30px 40px;上10、右20、下30、左40
- 块级元素的水平居中
	元素左右方向的margin值为auto即可
- 在使用margin时遇到的问题
	1.垂直方向外边距合并,以大值为准(子元素没有浮动)
	2.不能设置尺寸的元素,行内元素中b,strong,i,em,u,s,del,span,a垂直方向外边距不生效
	3.外边距传递问题
		内外嵌套的两个元素,如果给子元素设置margin-top会传递给父元素(父元素没有边框、子元素父元素没有浮动)

内边距padding

- 单方向内边距的设置
	上内边距padding-top:10px;
- 四个方向内边距的设置
	同margin的使用方法
	padding:10px 20px;
- 在使用padding时遇到的问题
	1.padding是强制塞一个间距进去,所以尺寸要对应减掉,否则元素会被撑大
	2.不能设置尺寸的元素,行内元素中b,strong,i,em,u,s,del,span,a垂直方向内边距不生效(元素的位置不会变化)

小手效果

cursor: pointer;

溢出属性

overflow:visible默认值,溢出可见、hidden溢出隐藏、scroll滚动条、auto自动添加;控制水平和垂直两个方向
overflow-x:;控制水平方向溢出
overflow-y:;控制垂直方向溢出

单行文本省略号效果

width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本省略号效果

width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //需要控制的文本行数
overflow: hidden;