CSS基础知识 | 8月更文挑战

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

一、link和@import的区别

1、link是XHTML标签，权重高于@import，页面加载时会被同时加载，无兼容问题

2、@import是CSS提供的，权重低于@import，页面加载时会等页面加载完再加载，IE5以上才能被识别

3、当js改变改变样式时，只能用link标签，因为@import不是dom可以控制的

二、css隐藏元素的方式

1、opacity: 0;//可以把元素的透明度将为0，就看起来隐藏了，但是还是占据空间并且可以交互
2、visibility:hidden;//和opacity差不多，但是可以不能交互3、overflow:hidden;//只隐藏溢出的部分，但是占据空间并且不能交互
4、display: none;//彻底隐藏元素，从文档中流失，不占空间，不能交互，不影响布局
5、z-index: 9999;//原理是将层级放到底部，这样就被覆盖看起来被隐藏了
6、transform: scale(0,0);//平面变换，将元素缩放为0，但是占据空间，不能交互

还有可以用绝对定位移除可视区域，或者用clip-path进行裁剪

三、层叠上下文的理解

理解：是HTML元素的三维概念，这些HTML元素在一条虚拟的相对于面向网页的用户的z轴上延伸，HTML元素根据自身属性按优先级顺序占用层叠上下文空间。

触发产生层叠上下文：

1、根元素HTML
2、z-index值为除了auto的绝对/相对定位
3、父元素为display: inline-flex;display:flex
4、opacity属于小于1的元素
5、transform属性不是none的元素
6、filter值不是none的元素
7、mix-blend-mode值不为Normal的元素

四、清除浮动的方式

1、<div style='clear:both'></div> //空div
2、clearfix
3、overflow:auto;或者overflow: hidden

五、媒体查询

可以通过不同宽度、高度等情况下设置一个特定范围内展示的内容进行裁剪，通常适用于不同屏幕型号的设备做出对应的响应适配。

<link rel='stylesheet' media='(max-width:600px)' href='demo.css'/>

//样式设置为：
@media(max-width: 600px) {
    .container {
        display: noe
    }
}

六、伪类和伪元素的区别

定义：

1、伪类：冒号开头+选择器，特定情况下才能展示样式的内容

2、伪元素：创建一些不在文档树中的元素，并添加样式，例如： ”:after“设置一个元素后增加文本，或者添加样式，但是虽然可以看见文本，但是不存在文档流中。

区别：

伪类通过在元素选择器上加入伪类改变元素的状态，而伪元素通过对元素的操作进行对元素的改变。

七、em、px、rem的区别

1、px：绝对单位，页面按精准像素展示

2、em：相对单位，以父节点字体大小，以就近原则计算，浏览默认字体为18px，整个页面内1em不是固定值

3、rem：相对单位，相对于根节点html的字体大小，css3新增属性，chrome/firefox/IE9

八、块级元素水平方法

1、margin: 0 auto

<div class='center'>水平居中</div>
.center {
    width:100px;
    height: 100px;
    margin: 0 auto;
}

2、flex布局

<div class='center'>
    <div class='flexdiv'>1</div>
</div>

.center {
    display: flex;
    justify-content: center;
}

3、table方法

<div class='center'>水平居中</div>

.center {
    display: table;
    margin: 0 auto;
}