今日前端十个知识点——CSS篇(一)

发布时间:2024年01月23日
1、viewport视口

width设置viewport宽度;device-width设备宽度;initial-scale初始缩放比例;

minimum-scale允许用户最小缩放比例;maximum-scale允许用户最大缩放比例;user-scaleable是否允许手动缩放

2、图片格式

webp、png、jpeg、gif、svg

3、css精灵图

将多个小图片拼接到一个图片中,通过backgroudo-position和元素尺寸调节显示图片

4、BFC块级格式化上下文

一块独立渲染区域,内部的元素渲染不会影响边界之外的元素

float不为none

position取值为absolute或fixed

display

overflow不为visible

5、css新特性

新增各种css选择器

圆角border-radius

线性渐变

旋转、缩放

6、外边距重叠(外边距塌陷)

概念:两个块级元素的上外边距和下外边距会合并为一个外边距

两个相邻外边距都是正数时,折叠结果时两者之间较大的值

两个相邻外边距都是负数时,折叠结果时两者绝对值的较大值

两个外边距一正一负时,折叠结果时两者的相加的和

7、水平居中

元素为行内元素,text-align:certer;

元素为设置了宽度的块级元素,margin:auto;

使用flex布局,justify-content:center

8、盒模型

标准盒模型:width和height只包含了content

IE盒模型:width和height包含了border、padding和content

box-sizing:content-box(默认)表示标准盒模型

box-sizing:border-box表示IE盒模型

9、有继承性的属性

字体系列:font-family、font-weight、font-size、font-style

文本系统:text-indent、text-align、line-height、word-spaceing、color

其他:visibility、list-style、cursor

10、隐藏元素的方法

display:none;不占据位置,不会响应绑定的监听事件

visibility:hidden;占据位置,不会响应绑定的监听事件

opacity:0;元素透明度为0,占据空间,能够响应元素绑定的监听事件

position:absolute;通过绝对定义将元素移除可视区域

z-index:负值,使其他元素遮盖住该元素

clip/clip-path:使用元素裁剪的方法来实现元素的隐藏;占据位置,不会响应绑定的监听事件

transform:scale(0,0);将元素缩放为0,元素占据位置,不会响应绑定的监听事件

文章来源:https://blog.csdn.net/qq_45914628/article/details/135727786
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。