2021-09-26

@Ralph

于 2021-09-26 22:14:53 发布

阅读量79

点赞数 1

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46198981/article/details/120496459

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

flex布局

1、回顾

IE盒子模型：box-sizing: border-box;
css变量

:root {
	--color: #333;
}

#box {
	color: var(--color);
}

定义文本在元素内进行垂直居中（原理：行高等于元素的高度）
假设元素的高度为60px可以这样设置：line-height: 60px;
定位


<!-- 模拟float：left、right的功能 -->

<style>
	/* 遵守子绝父相的原则 */
	#box {
		position: relative;
	}

	#box > div {
		position: absolute;
	}
 
    #box > div:first-child {
		left: 0;
	}

	#box > div:last-child {
		right: 0;
		z-index: 1; /* 设置定位元素的层级，默认值是0 */
	}

	/*
		1、定义了绝对定位(absolute)的元素它相对于谁进行定位？
		  - 如果父级元素定义了除static定位以外的定位，则相对于父级元素进行定位，没有则继续往上找，直到找到body为止。
		2、定义了相对定位(relative)的元素它相对与谁进行定位？
		  - 相对于元素自身进行定位
		3、定义了固定定位(fixed)的元素它相对与谁进行定位？
		  - 相对于body进行定位
	*/
</style>

<div id="box">
	<div>1</div>
	<div>2</div>
</div>

案例：努比亚顶部导航栏

<!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>
    /* 定义css变量 */
    :root {
      --color: #333;
      --public-width: 600px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .nav,
    .nav-tab {
      width: var(--public-width);
      border: 1px solid #000;
      height: 60px;
      padding-left: 142px;
    }

    li {
      float: left;
    }

    .clearfix::after {
      clear: both;
      content: '';
      display: block;
    }

    li {
      list-style: none;
      width: 106px;
      border: 1px solid #000;
      height: inherit;
      text-align: center;
      line-height: 60px;
      color: var(--color);
    }

    a {
      text-decoration: none;
      color: var(--color);
    }

    .nav {
      position: relative;
    }

    .nav-tab {
      width: var(--public-width);
      position: absolute;
      left: 0;
      height: 0;
      opacity: 0;
      transition: height .5s, opacity .35s ease-out;
    }

    .nav > li:hover .nav-tab {
      opacity: 1;
      height: 60px;
    }
  </style>
</head>
<body>
  <ul class="nav clearfix">
    <li>
      <a href="#">Z30 Pro</a>
      <ul class="nav-tab clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
    <li>
      <a href="#">红魔</a>
      <ul class="nav-tab clearfix">
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </li>
    <li>
      <a href="#">智能生态</a>
      <ul class="nav-tab clearfix">
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </li>
  </ul>
</body>
</html>

如何让一个盒子在整个页面上水平垂直居中？

<!-- 1、通过position定位结合margin实现 -->
<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
	body {
		display: flex; /* 开启一个flex布局 */
		/* 注意：父元素的高度应该是需要设置的 */
		width: 100vh; /* 将整个网页的高度分为100等份，元素占据100份 */
	}

    ul {
      width: 300px;
      height: 300px;
      /* margin: 50px auto; */
      /* border: 1px solid #000; */
      display: flex;
      flex-wrap: wrap;
      /*
		position: absolute;
     	left: 50%;
      	top: 50%;
	  */
      
      /*
      	margin-top: calc(-300px / 2);
      	margin-left: calc(-300px / 2);
      */
      /* 2、position结合transform实现 */
      transform: translate(-50%, -50%); /* 这里的百分比是相对于元素自身的宽高进行计算的 */
      /* 3、通过flex布局实现 */
      justify-content: center;
      align-items: center;
    }

    li {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      /* float: left; */
      list-style: none;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</body>
</html>

1、定义一个 flex 容器：display: flex
2、设置flex容器中的子项目在水平方向上的排列顺序：justify-content
3、设置flex容器中的子项目在垂直方向上的排列顺序：align-items
4、设置flex容器在主轴的方向：flex-direction
5、设置flex容器中的子项目是否可以自动换行：flex-wrap
6、设置flex容器中的子项目应该如何分配空间：align-content
7、设置子项目在父容器内应该占据的分量：flex-grow
8、设置子项目在父容器内的缩小比例：flex-shrink
9、设置子项目在父容器内所占的区域大小：flex-basis
10、设置子项目在父容器内的排列顺序：order,默认值为0
11、简写属性flex：flex-grow flex-shrink flex-basis

@Ralph

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-09-26

flex布局1、回顾IE盒子模型：box-sizing: border-box;css变量:root { --color: #333;}#box { color: var(--color);}定义文本在元素内进行垂直居中（原理：行高等于元素的高度）假设元素的高度为60px可以这样设置：line-height: 60px;定位<style> /* 遵守子绝父相的原则 */
复制链接

扫一扫