html和css阶段考核总结

两种兄弟选择器的区别

‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

如何给行内元素设置宽高

1. 行内元素转换为块级元素或行内块元素

2. 给行内元素添加浮动

3. 给行内元素添加绝对定位或固定定位,但是相对定位、粘性定位等不能

透明度设置（继承性）

Css透明度属性分为两种，一种是background：rgba（0,0,0,0-1）；还有一种是opacity（透明度）：0-1；

rgba不可继承，opacity可以继承

rpx和px的区别

px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。

rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。单行文字溢出显示省略号。

单行文字溢出显示省略号

必须满足三个条件：

1.先强制一行内显示文本

white-space : nowrap ; (默认normal自动换行)

2.超出的部分隐藏

overflow : hidden;

3.文字用省略号替代超出的部分

text-overflow : ellipsis;

多行文字溢出显示省略号

适合于webkit浏览器或移动端

overflow : hidden;

text-overflow : ellipsis;

1.弹性伸缩盒子模型显示

display : -webkit-box;

2.限制在一个块元素显示的文本的行数

-webkit-line-clamp : 2;

3.设置或检索伸缩盒对象的子元素的排列方式

-webkit-box-orient : vertical;

要合理选取盒子的高度容纳文字