css

calc, support, media各自的含义及用法？

@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；

#头条创作挑战赛#

网页布局的本质：使用CSS将盒子摆到对应位置。

什么是浮动塌陷？

当子元素设置浮动时，父元素中所有孩子盒子都是float，则父容器的高度为0。

1.在父亲盒子中的最下边添加一个空div盒子，并设置clear为相应的值，如果不清除塌陷，那么父元素高度为0，给ul设置高度就没有效果。

clear常见取值如下：

left：清除左侧浮动引起的塌陷；

浮动

浮动是为了元素标签的并排显示问题。

我们在浏览网页的时候，经常会看到 几个 div 块是可以并排显示的， 浮动就是解决这样问题的方法之一。

使用浮动后的特性:

1.会释放当前元素所占位置(布局层已经漂浮)

2.使用浮动后两个元素间会紧密贴合在一起

一、问题：元素浮动导致的父元素高度塌陷

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。

例如：

的效果是：

二、为了解决问题，这里先介绍一下浮动元素的特点：

（1）元素浮动以后会完全脱离文档流，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。

• 如图，当我们设置浮动时候，会导致父级元素的高度塌陷。这个时候我们将使用清除浮动的方式来解决这个问题。

创造清除浮动的方法

• 一般情况下，我们会添加一个clearfox的一个class类

 <header class="main-header clearfix">
      <h1>代码介绍</h1>
      <nav>
        <a href="./blog.html">BLOG</a>
        <a href="#">挑战</a>
        <a href="#">弹性盒子</a>
        <a href="#">CSS</a>
      </nav>

img的title和alt有什么区别？

    <img src="./w_1.jpg" alt="表情包" title="写信" />

• title：鼠标移动上去的提示

• alt: 图片加载失败时，避免用户体验不好，给的提示，比如当图片不存在时，这样显示：

浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。我们来看一个例子：

上图中main模块下包含了一个标题和4个块，其中四个高度不同的块被包含在一个div容器中。页面想要的效果是四个块在底部两列布局，并保持整齐。

如何脱离标准文档流，css中给了三种方法，使一个元素脱离标准文档流。

1.浮动。 2.绝对定位。 3.固定定位。

一、 什么是浮动呢？定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。

二、浮动的的元素有4点特性：

1.浮动元素会脱离标准文档流，已经不区分快和行了。

2.浮动的元素会互相贴靠。