前端八股文

最新推荐文章于 2024-03-18 17:13:53 发布

VIP文章 suuuuuki98

最新推荐文章于 2024-03-18 17:13:53 发布

阅读量2.5k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_33172017/article/details/118914718

版权

1.css中的三种基本定位机制

普通文档流
元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，行内元素在一行中水平布置。
定位
相对定位 (position:relative)
　被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。对蓝框进行定位后，它仍占据原先的位置。

绝对定位 (position:absolute)
绝对定位的元素位置是相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。如果元素没有已定位的祖先元素，那么它的位置相对于初始包含块。绝对定位的元素可以在它的包含块向上、下、左、右移动。
　　与相对定位相反， 绝对定位使元素与文档流无关，因此不占据空间。普通文档流中其他的元素的布局不受绝对定位元素的影响。参见下图：对蓝框定位后，它下面的元素上移占据了蓝框原本的位置，仿佛蓝框不存在一般
　　
固定定位 (position:fixed)
相对于浏览器窗口，其余的特点类似于绝对定位。
浮动
.浮动的元素可以左右移动，直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘。浮动的元素脱离普通文档流。行内元素和行内块元素会围绕浮动框排列，块元素会被覆盖。

2.BFC和浮动相关

BFC（Block Formatting Context），块级格式上下文
作用：形成独立的渲染区域，确保内部元素的渲染不会影响外界
应用场景：清除浮动，避免垂直外边距叠加，实现自适应布局

形成BFC的常见条件：

浮动元素 float不是none
绝对定位元素 position ：absolute或者fixed
块级元素：overflow不是visible
flex元素
inline-block元素

两栏自适应布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
   
      width: 800px;
      height: 800px;
      background-color: gray
    }

    .son1 {
   
      float: left;
      width: 300px;
      height: 100%;
      background-color: brown
    }

    .son2 {
   
      overflow: hidden;
      height: 100%;
      background-color: green
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>
</body>

</html>

清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
   
      overflow: hidden;
      width: 800px;
      background-color: gray;
    }

    .img {
   
      float: left;
    }

    .bfc {
   
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="img">
      <img src="./test.jpg" alt="">
    </div>
    <p class="bfc">BFC（Block Formatting Context），块级格式上下文
      作用：形成独立的渲染区域，确保内部元素的渲染不会影响外界
      应用场景：清除浮动，避免垂直外边距叠加，实现自适应布局</p>
  </div>
</body>

</html>

解决外边距塌陷

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
   
      overflow: hidden;
      width: 800px;
      height: 800px;
      background-color: gray
    }

    .son1 {
   
      margin-top: 100px;
      width: 300px;
      height: 300px;
      background-color: brown
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son1"></div>

  </div>
</body>

</html>

3.css盒模型

1.什么是css模型？
css的盒模型由里到外包括：content,padding,border,margin4部分,如图所示。
在这里插入图片描述

css的盒模型有两种：IE盒模型和标准盒模型。

2.两种盒模型的区别

W3C标准盒子模型(content-box)：内容就是盒子的边界。
W3C标准盒子模型(content-box)： width=内容宽度
IE盒子模型(border-box)：边框才是盒子的边界。
IE盒子模型(border-box)：
width=内容宽度+padding+border

3.如何设置两种盒模型
在不设置box-sizing的情况下，box-sizing默认是content-box。

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

4.flex布局

添加链接描述

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{display:flex;}
行内元素也可以使用Flex布局。
.box{display:inline-flex;}

1、flex-direction
此属性决定主轴的方向

.flex{
   
	flex-direction: row; // (默认值) 主轴水平方向，从左往右	如图：
	flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左
	flex-direction: column; // 主轴为垂直方向，从上往下
	flex-direction: column-reverse; // 主轴为垂直方向的逆方向，从下往上
}

在这里插入图片描述
2、flex-wrap
此属性定义，如果一条轴线上排列不下，换行的方式

.flex{
   
	flex-wrap: nowrap; // （默认）不换行	如图:
	flex-wrap: wrap; // 正常换行 从上到下	如图：
	flex-wrap: wrap-reverse; // 逆方向换行 从下到上	如图：

在这里插入图片描述
3、justify-content
此属性定义，项目在主轴上的对齐方式

.flex{
   
	justify-content: flex-start; // 左对齐（默认）
	justify-content: flex-end;	// 右对齐
	justify-content: center;	// 居中
	justify-content: space-between; // 两端对齐。且项目间间隔相等
	justify-content: space-around; // 每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍
	justify-content:  space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}

在这里插入图片描述
4、align-items
此属性定义，项目在交叉轴上的对齐方式

.flex{
   
	align-items: flex-start; // 交叉轴的起点对齐
	align-items: flex-end; // 交叉轴的终点对齐
	align-items:center; // 交叉轴的中点对齐
	align-items: baseline; // 项目的第一行文字的基线对齐
	align-items: stretch; // (默认值) 如果项目未设置高度或设为auto ，将充满整父级容器高度
}

在这里插入图片描述

5.三栏自适应布局

flex

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
   
      width: 100%;
      height: 200px;
      display: flex;
    }

    .son1 {
   
      width: 200px;
      height: 100%;
      background-color: blueviolet;
    }

    .son3 {
   
      width: 200px;
      height: 100%;
      background-color: brown;
    }

    .son2 {
   
      flex: 1;
      background-color: blue;
    }
  </style>
</head>

<bo