整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
1. border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
2. padding 内容区域距离边框
3. padding会撑开原有盒子的宽、高所以我们要减去padding的长度
4. padding的属性值4种方式：上 右 下 左、上 左右 下、上下 左右、 一个值四个方向（可以单独设置某一边）
5. 如果出现边框塌陷那么：overflow:hidden；
1. margin 块与块之间的位置
2. margin: 0 auto
3. margin-top;设置时，如果子父都设置了margin，子的margin会传递到父的margin，例如：
解决方法：在父元素加入：overflow:hidden；
4. margin与padding
1. margin框架与框架之间、块与块之间、盒子与盒子、
2. padding盒子内部
1. 语法{overflow:visible/hidden/scroll/auto/inherit;}
说明：
visible:默认值，内容不会被修剪，会出现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的；
sorcll:内容会被修剪，但浏览器会显示滚动条，以便查看其余的内容；
auto:如果内容被修剪，则浏览器会显示滚动条，以便看见其他的内容；
inherit:规定应该从父元素继承overflow属性的值。
2. 语法{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}
normal:默认。空白会被浏览器忽略。
pre:空白会被浏览器保留。
nowrap:文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
pre-wrap:保留空白符序列，但是正常的进行换行
pre-line：合并空白符序列，但保留换行符。
inherit：规定应该从父元素继承white-space属性的值。
1. 语法{text-overflow:clip/ellipsis;}
clip：不显示省略号，而是简单的裁剪。
ellipsis：当对象内文本没有溢出时，显示省略标记。
2. 使用ellipsis时需要配合下面：
width:10px;容器的宽，
white-space:nowrap;强制文本在一行内显示，
overflow:hidden; 溢出内容为隐藏，
text-overflow:ellipsis; 溢出文本显示省略号，
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了，防止表单域拖拽。
1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor:default小白
pointer小手
move移动
text文本
尽量不要用hand因为火狐不支持
pointer ie6以上都支持的尽量用
2 轮廓线outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是：outline：0；或者 outline:none；
3 防止拖拽文本域resize
resize:none这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。
4 行内块和文字对齐
Vertical-align垂直对齐
以前我们讲过让带有宽度的块级元素居中对齐，是 margin：0 auto;
以前我们还讲过让文字居中对齐，是 text-align:center；
但是我们从来没有讲过有垂直居中的属性，我们的妈妈一直很担心我们的垂直居中怎么做。
vertical-algn垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。
vertical-align ：baseline、top 、 middle 、 bottom
设置或检索对象内容的垂直对齐方式。
vertical-align不影响块级元素中的内容对齐，它只针对于行內元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐
所以我们知道，我们可以通过 vertical-align控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。
5 去除图片底侧缝隙
有个很重要特性你要记住：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法就是：
1 给 img添加vertical-align:middle / top等等。让图片不要和基线对齐。
2 给img添加 display:bock;转换为块级元素就不会存在问题了。
6 word-break 自动换行
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
主要处理英文单词
7 white-space
设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal：默认处理方式
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
8 超出的部分省略号显示
text-overflow文字溢出
text -overflow:clip / ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
clip：不显示省略标记（…），而是简单的裁切
ellipsis：当对象内文本溢出时显示省略标记（…）
注意:一定要首先强制一行内显示，再次和 overflow属性搭配使用?
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《18 CSS精灵技术》小伙伴们不要错过哟！
篇文章主要给大家介绍一下在html页面中如何让单行文本以及多行文本溢出显示省略号(…)。
当我们在编写网页代码的时候，肯定会遇到过文字列表中的文字太多超出了我们所写的宽度，导致文本换行或者文本超出了界限，这时有人就会说了，让后台限制一下调用的文字个数不就行了吗，但是我们在做响应式的时候由于是百分比布局，无法计算一行会显示多少个文字，所以这并不是一个好的解决方案，我们使用css3就可以轻松的实现，而且简单好用。
核心css语句：
1、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）
2、white-space: nowrap; （设置文字在一行显示不能换行）
3、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）
我们具体的代码效果演示就如下图所示：（设置ul宽度为300，超出的文字内容让其自动隐藏并显示...）
我们在编写网页代码时，有时候新闻列表页中新闻简介可能有一行或者多行，我们要如何处理这种问题，让其超出多行后还能显示省略号呢，不要慌，我们css还是很强大的，已经给我们提供了方法来处理这种问题了。
核心css语句：
1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性）
2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示 ）
3、-webkit-box-orient:vertical;（ 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 。）
4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）
5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）
我们具体的代码效果演示就如下图所示：（设置段落p宽度为300，超出2行的文字内容让其自动隐藏并显示...）
好了，本篇文章就给大家说到这里，大家自己下来可以自己找例子写一下试一试到底能不能实现我们所说的效果，以后在写页面的的遇到这种问题的时候直接复制使用即可。
每日金句：必须从过去的错误学习教训而非依赖过去的成功。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
