Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)

简介: Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一

CSS盒子模型

概念

所有HTML元素可以看作盒子,在CSS中,“box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:

外边距(margin),边框(border),内边距(padding),和实际内容(content)。

我用Minecraft游戏中服务器的地皮系统来作为示例:

  1. Margin(外边距)-清楚边框外的区域,外边距是透明的
  2. Border(边框)-围绕在内边距和内容外的边框
  3. Padding(内边距)-清楚内容周围的区域,内边距是透明的
  4. Content(内容)-盒子的内容,显示文本和图像

注意:设置margin和padding时,四个值则按从上开始,顺时针进行设置;两个值,则第一个为上下,第二个为左右。

弹性盒模型(flex box)

内容

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

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

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

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

默认弹性盒里内容横向摆放。  

默认弹性盒里内容横向摆放。

父元素上的属性

display属性

display:flex;开启弹性盒。

属性设置后子元素默认水平排列。

flex-direction属性

定义

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

语法

<style>
    father{
        display:flex;
        flex-direction:row||row-reverse|column|column-reverse;
    }
</style>
  1. row:横向从左到右排列(左对齐),默认的排列方式
  2. row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面)
  3. column:纵向排列
  4. column-reverse:反转纵向排列

justify-content属性

定义

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

语法

<style>
    father{
        display:flex;
        justify-content:flex-start|flex-end|center;
    }
</style>
  1. flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。
  2. flex-end弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。
  3. center弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)

align-items属性

定义

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

语法

<style>
    father{
        display:flex;
        align-items:flex-start|flex-end|center;
    }
</style>
  1. flex-start弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
  2. flex-end弹性盒子元素的侧轴(纵轴) 起始位置的边界紧靠住该行的侧轴结束边界。
  3. center弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

子元素上的属性

flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。

文档流(标准流)

文档流是文档中可显示对象在排列是所占用的位置/空间。

例如:块元素自上而下摆放,内联元素从左到右摆放。

标准流里面的限制非常多,导致很多页面效果无法实现。

文档流产生的问题:

  1. 高矮不齐,底边对齐
  2. 空白折叠现象

1.无论多少个空格、换行、tab,都会折叠为一个空格

2.如果我们想让img标签之间没有空隙,必须紧密连接

要解决这些问题,就需要脱离文档流。

使一个元素脱离标准文档流有三种方式:

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

浮动

定义

float属性定义元素在哪个方向浮动,任何元素都可以浮动。

描述
left 元素向左浮动
right 元素向右浮动

浮动的原理

  1. 浮动以后使元素脱离了文档流
  2. 浮动只有左右浮动,没有上下浮动

元素向左浮动

脱离文档流之后,元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面,一层是底层的原页面,一层是脱离文档流的上层页面,所以会出现折叠现象。

看下面的情况,只有黄色方块浮动:

元素向右浮动

所有元素向左浮动

当所有元素同时浮动的时候,就会变成水平摆放,向左或者向右。

当容器不足时

当容器不足以横向摆放内容的时候,会在下一行摆放:

清除浮动

浮动的副作用

当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,

  1. 浮动元素会造成父元素高度塌陷
  2. 后续元素会受到影响
<head>
<style>
  .container{
    border:1px solid red;
  }
  .box{
    width:100px;
    height:100px;
    background-color:#fff176;
    float:left;
    margin:5px;
  }
</style>
</head>
 
<body>
  <div class="container">
      <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

原本container的块元素应该包含三个子元素的,但是由于浮动的副作用,导致父元素高度塌陷为0,显示为一条边框直线了。

当父元素出现塌陷的时候,对布局是不利的,所以我们必须清除副作用,解决方案有很多种:

  1. 父元素设置高度
  2. 受影响的元素增加clear属性
  3. overflow清除浮动
  4. 伪对象方式

父元素设置高度

如果父元素高度塌陷,可以给父元素设置高度,撑开元素本身大小。

<head>
<style>
  .container{
    border:1px solid red;
    width:350px;
    height:300px;
  }
  .box{
    width:100px;
    height:100px;
    background-color:#fff176;
    float:left;
    margin:5px;
  }
</style>
</head>
 
<body>
  <div class="container">
      <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(二):https://developer.aliyun.com/article/1531004

相关实践学习
利用大模型大规模分发技术,实现AIGC在线应用秒级弹性
通过ECI的数据缓存技术实现大模型的快速分发,将模型与应用解耦,敏捷部署,实现秒级在线弹性启动。
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。 &nbsp; &nbsp; 相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
目录
相关文章
|
13天前
|
前端开发
CSS:浮动
CSS:浮动
|
22天前
|
前端开发 容器
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
|
18天前
|
移动开发 前端开发 HTML5
CSS 布局模型(标准流模型、浮动模型)
CSS 布局模型(标准流模型、浮动模型)
|
19天前
|
移动开发 人工智能 前端开发
CSS3 布局模型+CSS3 浮动
CSS3 布局模型+CSS3 浮动
|
1天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
13 7
|
2天前
|
安全 大数据 编译器
PHP 8: 探索新特性及其对现代Web开发的影响
在这篇文章中,我们将深入探讨PHP 8的最新特性,包括JIT编译器、联合类型、匹配表达式等,并分析这些更新如何影响现代Web开发。通过具体示例和代码片段,本文旨在为开发者提供一个清晰的指南,以便更好地利用PHP 8的新功能优化和加速他们的应用程序。
9 2
|
2天前
|
编译器 测试技术 PHP
深入理解PHP 7的新特性及其对现代Web开发的影响
【7月更文挑战第12天】本文将探讨PHP 7版本中引入的关键改进和新增功能,以及这些变化如何优化了性能、提升了代码的可维护性,并促进了现代Web开发的最佳实践。通过具体示例,我们将深入了解这些新特性在日常开发中的应用,以及它们为开发者带来的实际益处。
10 2
|
2天前
|
数据库 开发者 Python
从菜鸟到大神,Django/Flask 让你秒变 Web 开发界的‘头号玩家’!
【7月更文挑战第12天】在Python Web开发中,Django和Flask框架各具特色。Flask轻量灵活,适合快速搭建简单应用,如博客,基本代码仅需几行。Django则功能全面,适用于复杂项目,如电商网站,内置ORM和管理后台。两者都助力开发者从新手进阶。选择取决于项目需求和个人偏好。学习和实践这两个框架,能助你成为Web开发专家。
|
2天前
|
PHP 开发者
PHP 8 新特性及其对现代Web开发的影响
PHP 8作为最新版本,引入了一系列强大的新特性和改进,这些变化不仅仅是语言本身的提升,更深刻地影响了现代Web开发的方式和效率。本文将深入探讨PHP 8的关键特性,分析其在开发实践中的应用和优势,帮助开发者更好地理解和利用这些新特性。 【7月更文挑战第12天】
9 1