CSS 可继承属性常用举例
- 字体系列属性
- font-family
- font-size
- font-weight
- font-style
- 文本系列属性
- text-indent ( 定义一个块元素首行文本内容之前的缩进量 )
- text-align
- line-hight
- word-spacing ( 声明标签和单词直接的间距行为 )
- letter-spacing ( 文本字符的间距 )
- color
- 其他
- cursor
- visibility ( 隐藏元素而不更改文档的布局 )
CSS3 常用新增伪类举例
- element:nth-child(n): 选中父元素下的第 n 个标签名为 element 的元素；
- element:nth-last-child(n): 作用同上，从后开始查找；
- element:nth-of-type(n)：选择父元素下第 n 个 element 类型元素；
- element:last-child：最后一个子元素
- element:only-child：如果 element 是父元素下唯一的子元素，则选中；
- element:empty：选中不包含子元素和内容的 element 类型元素；
- :not(element)：选择非 element 元素的每个元素；
- :enabled：表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的。元素也有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点 )
行内元素的 margin 和 padding 遇到的问题
如果我们给行内元素 margin 与 padding 将会出现以下问题，无论是我这样的小菜鸟或者是大神，我相信大家都遇到过这样的问题：
水平方向有效，垂直方向都无效（垂直方向的 padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）
用纯 CSS 创建一个三角形【经典问题】
.demo {
width: 0;
height: 0;
border-width: 20;
border-style: "solid";
/* 相邻边框连接处均分 */
border-color: transparent transparent red transparent;
}
关于非等边三角形（直角三角形）制作我们可以规定对边的不同尺寸 🦄
min-width 、 max-width 与 width 属性间的覆盖
- max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
- 而min-width 会覆盖 max-width
简述伪类和伪元素的区别
伪类的操作对象是文档树中已存在的元素，而伪元素是创建一个文档树外的元素
伪类
伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的。比如说 :hover。它只有处于 dom 树无法描述的状态才能为元素添加样式，所以称为伪类。
伪元素
伪元素用于创建一些原本不在文档树中的元素，并为其添加样式，比如说 ::before。虽然用户可以看到这些内容，但是其实他不在文档树中。
移动端视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- initial-scale: 初始的缩放比例；
- minimum-scale: 允许用户缩放到的最小比例；
- maximum-scale: 允许用户缩放到的最大比例；
- user-scalable: 用户是否可以手动缩放；
简述 Rem 及其转换原理
rem 是 CSS3 新增的相对长度单位，是指相对于根元素 html 的 font-size 计算值的大小。
默认根元素的 font-size 都是 16px的。如果想要设置 16px 的字体大小也就是 16px/16px = 1rem。
- 由于
px是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩放； rem直接相对于根元素html，避开层级关系，移动端新型浏览器对其支持较好；
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
- display: none - 不占空间，不能点击，会引起回流，子元素不可见、影响过渡
- visibility: hidden - 占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示、不影响过渡
- opacity: 0 - 占据空间，可以点击，引起重绘，子元素不影响、不影响过渡
回流必定重绘
简述 CSS 盒模型
盒子由 margin、border、padding、content 组成；
标准盒模型：box-sizing: content-box;
IE 盒模型：box-sizing: border-box;
BFC
BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
创建 BFC 的方式有：
html根元素float浮动- 绝对定位
overflow不为visible时display为表格布局或者弹性布局；
BFC 主要的作用是：
- 清除浮动
- 防止同一
BFC容器中的相邻元素间的外边距重叠问题
转载：https://blog.csdn.net/weixin_63836026/article/details/127789859
查看评论