目录
2.2 display的block、inline和inline-block的区别
一、CSS选择器及优先级
选择器名称 | 优先级 | 举例 |
---|---|---|
行内样式 | 1000 | style={} |
id选择器 | 100 | #id |
类选择器 | 10 | .className |
伪类选择器 | 10 | :hover |
属性选择器 | 10 | a[href]、*[title] |
标签选择器 | 1 | p、div |
伪元素选择器 | 1 | ::before、::after |
兄弟选择器 | 0 | + |
子选择器 | 0 | > |
后代选择器 | 0 | div p |
通配符 | 0 | * |
css选择器优先级规则:
- css属性后面添加 !important 声明,为绝对优先级
- css选择器权重相同时,后定义的规则优先
- css选择器权重不相同时,权重高的优先
二、display
2.1 display的属性值及其作用
- none:元素不显示,并且从文档流中删除
- block:块类型,默认宽度为父元素宽度,可设置高度,换行显示
- inline:行内元素类型,默认宽度为内容宽度,不可设置高度,同行显示
- inline-block:行内块元素类型,默认宽度为内容宽度,可设置高度,同行显示(有间隙)
- list-item:像块元素类型一样显示,并添加样式列表标记
- table:此元素作为块级表格来显示
- inherit:规定应该从父元素继承display属性值
2.2 display的block、inline和inline-block的区别
- block:块元素类型,独占一行,换行显示;可设置宽度、高度、padding、margin、border
- inline:行内元素类型,一行显示多个,默认宽度为内容宽度,不可设置高度;仅可设置水平方向的padding、margin
- inline-block:行内块元素类型,一行内显示多个,且有间隙,默认宽度为内容宽度,可设置宽度和高度
2.3 隐藏元素的方法有哪些
方法 | 备注 |
---|---|
display:none | 渲染树不会包含该渲染对象,该元素不会在页面中占据空间 |
visibility:hidden | 元素不显示,元素在页面中仍占据空间 |
opacity:0 | 将元素透明度设置为0,以此来实现元素的隐藏。元素在页面中仍占据空间 |
z-index:负值 | 用其他元素来遮挡该元素,来实现隐藏效果 |
position:absolute | 通过使用绝对定位将元素移除可视区域内,来实现隐藏效果 |
clip/clip-path | 使用元素裁剪的方法来实现元素隐藏,元素在页面中仍占据空间 |
transform:scale(0,0) | 将元素缩放为0来实现元素隐藏,元素在页面中仍占据空间 |
2.4 display:none与visibility:hidden的区别
两者都是让元素隐藏不可见,主要区别如下:
- 渲染树中:
- display:none会让元素完全从渲染树中消失,渲染时不会占据空间;
- visibility:hidden不会让元素从渲染书中消失,渲染的元素仍占据相应的空间,仅是内容不可见
- 是否继承属性:
- display:none是非继承属性,子孙节点会随着父节点从渲染树中消失,即使修改子孙节点的属性也无法显示;
- visibility:hidden是继承属性,子孙节点的消失是由于继承了hidden,通过修改visibility:visible可以让子孙节点显示
- 修改display属性通常会造成文档的重排;修改visibility属性只是会造成本元素的重绘
- 使用读屏器,设置display:none的内容不会被读取;设置visibility:hidden的内容会被读取
三、 对盒子模型的理解
css3中可以通过设置box-sizing来指定盒子模型,有两个值:content-box、border-box
- box-sizing:content-box 盒子大小为width + padding + border(会撑大盒子)
- box-sizing:border-box 盒子大小为width(padding、border不会撑大盒子,在padding、border不会超过width的前提下)
四、CSS3中有哪些新特性
- 新增选择器:属性选择器、结构伪类选择器、伪元素选择器
- 2D转换transform:位移transform:translate(20px,20px);缩放transform:scale(1,1);旋转transform:rotate(45deg)
- 3D转换transform:位移transform:translate(20px,20px,20px);旋转transform:rotate(0,0,1,45deg);3D呈现transform-style:preserve-3d 子元素开启3d空间(flat:子元素不开启3d空间)
- 动画:@keyframes 动画名称{0% {width:100px} 100% {width: 200px}}
- CSS3过渡 transition
- 渐变背景 background:linear-gradient(red, green, blue);
- 弹性盒模型 display: flex
- 阴影 box-shadow、text-shadow
- 圆角 border-radius
五、单行、多行文本溢出隐藏
- 单行文本溢出:
- white-space:nowrap;
- overflow:hidden;
- text-hidden:ellipsis;
- 多行文本溢出:
- overflow:hidden;
- text-hidden:ellipsis;
- display:-webkit-box;(作为弹性伸缩盒子模型显示)
- -webkit-box-orient:vertical; ( 设置伸缩盒子的子元素排列方式:从上到下垂直排列)
- -webkit-line-clamp:3; ( 显示的行数)