目录
21. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
24. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
21. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
(1):块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
(2):内联元素(inline)特性：
宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。
(3):inline-block 元素
拥有内在尺寸，可设置高宽,但不会自动换行
<input> 、<img> 、<button> 、<texterea> 、<label>。
22:什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse。
折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
23:rgba（）和opacity的区别
opacity作用于元素，以及元素内的所有内容的透明度(元素会继承其属性)
而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)
24. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing 增加或减少字符间距。
可用于消除 inline-block 元素间的换行符空格间隙问题。
25:如何垂直居中一个浮动元素
方法一：.child{
height: 100px;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二：.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三：child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
26:如何垂直居中一个img ？
方法一：<img>的容器
.img-container{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法二：
.img-container{
display: flex;
justify-content: center;
align-items: center;
}
27. px 和 em 的区别。
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 相对于当前字体大小改变，若自身没有字体大小，则继承祖先元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。
28:Sass、LESS 是什么？大家为什么要使用他们？
是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成
CSS。
优势：
结构清晰，便于扩展。
减少了重复代码的编写，增加了变量等的功能
可以方便的屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。
29:CSS 中 link 和@import 的区别是：
Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，
link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
30:简介盒子模型：
CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框
补充：多段文字结尾省略号的ccs用法
代码如下：
html部分：
<body>
<div id="wrap">
<a href="">
<img src="./img/2333470145.79.jpg" alt="">
<article>
<h1>助力北京"十四五“规划，美图启动茉颜个性化化妆品科我自横刀向天笑</h1>
<p>
近日,美图秀秀发布了“2021美图创作者年度榜单”,对过去一年中深受用户喜爱的“美图配方”、AR、贴图等内容素材进行盘点回顾,对优秀的创作达人进行荣誉奖励。依托美图秀秀的“美图创作者计划”,本次榜单共有60位创作达人凭借创意作品叫我次榜单共有60位创作达人凭借创意作品叫我次榜单共有60位创作达人凭借创意作品叫我次榜单共有60位创作达人凭借创意作品叫我
</p>
<div class="time">
<span>2022-01-26 </span>
<span class="look">查看详情</span>
<div class="toright"></div>
</div>
</article>
</a>
</div>
</body>css部分加上如下代码便可实现多段文字结尾省略号效果，在-webkit-line-clamp:;输入自己想要保留的行数。
p {
line-height: 40px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
最近，正在构造拼多多第二个页面的框架，近期将会发布，大家敬请期待。
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
