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
容器中的相邻元素间的外边距重叠问题