前端学习笔记之二：CSS（2）-CSDN博客

本文链接：https://blog.csdn.net/m0_74233667/article/details/136695566

一、盒子模型

1、CSS 盒子模型(Box Model)

概念：

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin），边框（border），内边距（padding），和实际内容（content）

示例图：

主要属性：

div{
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid red;
margin: 10px;
background: green;
}

示例：

<!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>

        div{
            width: 100px;
            height: 100px;
            background-color: green;
            padding: 50px 10px;
            border:5px solid blue;
            margin: 50px 10px;
        }

    </style>
</head>
<body>

    <div>
        我是内容
    </div>
    <p>我是p标签</p>
    
</body>
</html>

效果：

2、CSS3 的一种新的布局模式--弹性盒模型（flex box）

概念：类似于QT中的弹簧的作用，主要就是移动端的布局需求。

内容：

1.弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

2.弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器

3.弹性容器内包含了一个或多个弹性子元素

Tip：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

2-1 父元素上的属性

1、display 属性

display:flex;开启弹性盒

display:flex;属性设置后子元素默认水平排列

2、flex-direction属性

flex-direction 属性指定了弹性子元素在父容器中的位置

语法：

flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列（左对齐），默认的排列方式

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面

column：纵向排列

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

3、justify-content 属性

定义

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

语法

justify-content: flex-start | flex-end | center
flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

4、align-items 属性

定义

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

语法

align-items: flex-start | flex-end | center
flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）