CSS页面基本布局

news2024/11/19 15:42:24

前提回顾

1. 超文本标记语言（HTML）是一种标记语言，用来结构化我们的网页内容并赋予内容含义；

（超文本标记语言（英语：HyperText Markup Language /ˈhaɪpətekst ˈmɑːkʌp ˈlæŋɡwɪdʒ /，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。）

2. 层叠样式表（CSS）是一种样式规则语言，用来为网站设置样式，布局的代码。

CSS（Cascading Style Sheets /kæˈskeɪdɪŋ staɪl ʃiːts/，层叠样式表）是为 web 内容添加样式的代码，用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。

3.JavaScript 是一种脚本编程语言，你用它来给你的网站添加交互功能

JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新；

CSS 布局

CSS 页面布局技术允许我们对网页中的元素设置，控制它们相对正常布局流、周边元素（兄弟）、父容器或者主视口/窗口的位置

  • 正常布局流
  • display属性
  • 弹性盒子
  • 网格
  • 浮动
  • 定位
  • CSS 表格布局
  • 多列布局

正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。

display属性：讨论布局的时候重要的两个值是 display: flex 和 display: grid

display : none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
inline-block： 指定对象为内联块元素。（CSS2） 
table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2） 
compact： 分配对象为块对象或基于内容之上的内联对象（CSS3） 
run-in： 分配对象为块对象或基于内容之上的内联对象（CSS3） 
ruby： 将对象作为表格脚注组显示（CSS3） 
ruby-base： 将对象作为表格脚注组显示（CSS3） 
ruby-text： 将对象作为表格脚注组显示（CSS3） 
ruby-base-group： 将对象作为表格脚注组显示（CSS3） 
ruby-text-group： 将对象作为表格脚注组显示（CSS3） 
box： 将对象作为弹性盒模型显示（CSS3） 
inline-box： 将对象作为内联块级弹性盒模型显示（CSS3

弹性盒子：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

  • 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
  • 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
  • 设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
  • 在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）
display: flex / inline-flex;

flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示

在父类中设置的样式
flex-direction：子类在主轴上的分布
flex items默认都是沿着main axis（主轴）从main start 开始往main end 方向排布

flex-direction决定了main axis的方向，有4个取值：

  1. row（默认）：从左往右
  2. row-reverse：从右往左
  3. column：从上往下
  4. column-reverse：从下往上

justify-content：子类在主轴上的对齐方式 
justify-content决定了flex items在main axis 上的对齐方式，共6个取值：

  1. flex-start（默认值）：与 main start 对齐
  2. flex-end：与 main end 对齐
  3. center：居中对齐
  4. space-between：flex items之间的距离相等，与main start、main end两端对齐
  5. space-evenly：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离
  6. space-around：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离的一半

align-content：子类在交叉轴上的分布 
 align-content决定了多行flex items在cross axis上的对齐方式，用法和 justify-content类似，共7个取值：

  1. stretch（默认值）：与align-items的stretch类似
  2. flex-start：与cross start对齐
  3. flex-end：与cross end对齐
  4. center：居中对齐
  5. space-between：flex items之间的距离相等，与cross start、cross end两端对齐
  6. space-evenly：flex items之间的距离相等，与cross start、cross end之间距离等于flex items之间的距离
  7. space-around：flex items之间的距离相等，与cross start、cross end之间距离等于flex items之间的距离的一半

align-items：子类在交叉轴上的对齐方式
align-items决定了flex items在cross axis上的对齐方式，共6个取值：

  1. normal：在弹性布局中，效果和stretch一样
  2. stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
  3. flex-start：与cross start对齐
  4. flex-end：与cross end对齐
  5. center：居中对齐
  6. baseline：与基准线对齐

flex-wrap：子类的多行显示

flex-wrap决定了flex container是单行还是多行，共3个取值：

  1. nowrap（默认）：单行
  2. wrap：多行
  3. wrap-reverse：多行（对比wrap，cross start与cross end相反）

在子类中设置的样式


flex-grow：子类的扩展
flex-grow决定了flex items如何扩展

可以设置任意非负数字（正小数、正整数、0），默认值为0
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1

每个flex items扩展的size = flex container的剩余size*flex-grow / sum
如果所有flex items的flex-grow总和sum不超过1

每个flex items扩展的size = flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width 、max-height

 flex-shrink：子类的收缩
 flex-shrink决定了flex items如何收缩

可以设置任意非负数字（正小数、正整数、0），默认值为1
当flex items在main axis方向上超过了flex container的size时，flex-shrink属性才会有效


align-self：子类在交叉轴上的对齐方式
flex items可以通过align-self覆盖flex container设置的align-items，共6个取值：

auto（默认值）：遵从flex container设置的align-items
stretch、flex-start、flex-end、center、baseline，效果和align-items一样
flex
flex是flex-grow，flex-shrink、flex-basis的简写，flex属性可以指定1/2/3个值
 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1116830.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux小技巧之awk必知必会

Linux小技巧之awk必知必会

Linux Shell 三剑客之一&#xff0c;废话不多说直接上干货。 目录 1. 指定分隔符2.指定打印行数3.打印最后一列4.打印倒数第二列5.匹配输出6.if 判断7.统计列总数值8.时间格式转换 示例数据&#xff1a; 1. 指定分隔符 awk -F | {print $1} log.txt # awk -F | {print $1}…
阅读更多...
STM32MP135和STM32MP157的区别

STM32MP135和STM32MP157的区别

本文介绍了STMicroelectronics公司推出的两款多核处理器STM32MP135和STM32MP157之间的区别&#xff0c;包括主频、集成硬件模块数量、内存大小和电压调节模块等方面。 STMicroelectronics是一家领先的半导体解决方案提供商&#xff0c;在嵌入式系统领域有着丰富的经验。他们…
阅读更多...
序列合并

序列合并

题目描述 有两个长度为 N 的单调不降序列 A,B&#xff0c;在 A,B 中各取一个数相加可以得到 个和&#xff0c;求这 个和中最小的 个。 输入格式 第一行一个正整数 N&#xff1b; 第二行 N 个整数 1…N​。 第三行 N 个整数 1…N​。 输出格式 一行 N 个整数&#xff…
阅读更多...
从头开始使用 KNN 进行 KNN 和 MNIST 手写数字识别的初学者指南

从头开始使用 KNN 进行 KNN 和 MNIST 手写数字识别的初学者指南

坦维佩努穆迪 Kaggle参考&#xff1a; MNIST Perfect 100% using kNN | Kaggle 一、说明 MNIST &#xff08;“修改后的国家标准与技术研究所”&#xff09;是事实上的计算机视觉“hello world”数据集。自 1999 年发布以来&#xff0c;这个经典的手写图像数据集一直作为分类算…
阅读更多...
编写内联函数求解 2x²+4x+5的值，并用主函数调用该函数

编写内联函数求解 2x²+4x+5的值，并用主函数调用该函数

动态内存分配可以根据实际需要在程序运行过程中动态地申请内存空间，这种内存空间的分配和释放是由程序员自己管理的，因此也被称为手动内存分配。 C++ 中，动态内存的分配和释放是通过 new 和 delete 操作符进行的。new 操作符用于在堆内存上为对象动态分配空间，dele…
阅读更多...
Python之哈希表-哈希表原理

Python之哈希表-哈希表原理

Python之哈希表-哈希表原理 集合Set 集合&#xff0c;简称集。由任意个元素构成的集体。高级语言都实现了这个非常重要的数据结构类型。Python中&#xff0c;它是可变的、无序的、不重复的元素的集合 初始化 set() -> new empty set objectset(iterable) -> new set …
阅读更多...
Docker——如何自定义镜像【将自己的项目制作成镜像】？

Docker——如何自定义镜像【将自己的项目制作成镜像】？

目录 前言&#xff1a;我们以前是如何部署项目的&#xff1f; 1、镜像由哪几部分构成的 2、如何手动自定义一个镜像 2.1、Dockerfile 2.2、dockerfile文本文件中&#xff0c;最终要写什么&#xff1f; 2.3、构建镜像 3、案例&#xff1a;部署java项目 4、如何与其他容器…
阅读更多...
Python 机器学习入门之ID3决策树算法

Python 机器学习入门之ID3决策树算法

系列文章目录 第一章 Python 机器学习入门之线性回归 第一章 Python 机器学习入门之梯度下降法 第一章 Python 机器学习入门之牛顿法 第二章 Python 机器学习入门之逻辑回归 番外 Python 机器学习入门之K近邻算法 番外 Python 机器学习入门之K-Means聚类算法 第三章 Python 机…
阅读更多...
华为云HECS云服务器docker环境下安装nacos

华为云HECS云服务器docker环境下安装nacos

华为云HECS云服务器&#xff0c;安装docker环境&#xff0c;查看如下文章。 华为云HECS安装docker-CSDN博客 一、拉取镜像 docker pull nacos/nacos-server二、宿主机创建挂载目录 执行如下命令&#xff1a; mkdir -p /usr/local/nacos/logs mkdir -p /usr/local/nacos/con…
阅读更多...
服务端监控要怎么做？

服务端监控要怎么做？

目录 前言 一、Google的四类黄金指标 二、RED方法 三、USE方法 RED方法 vs USE方法 四、监控指标 WEB服务监控 MySQL数据库监控 QPS TPS 最大连接数 缓存监控 总结 前言 众所周知&#xff0c;业界各种大中型软件系统在生产运行时&#xff0c;总会有一些手段来…
阅读更多...
ESP32C3 LuatOS TM1650②动态显示累加整数

ESP32C3 LuatOS TM1650②动态显示累加整数

--注意:因使用了sys.wait()所有api需要在协程中使用 -- 用法实例 PROJECT "ESP32C3_TM1650" VERSION "1.0.0" _G.sys require("sys") local tm1650 require "tm1650"-- 拆分整数&#xff0c;并把最低位数存放在数组最大索引处 loc…
阅读更多...
车载网关通信能力解析——SV900-5G车载网关推荐

车载网关通信能力解析——SV900-5G车载网关推荐

随着车联网的发展,各类车载设备对车载网关的需求日益增长。车载网关作为车与车、车与路、车与云之间连接的关键设备,其通信能力直接影响整个系统的性能。本文将详细解析车载网关的通信能力,并推荐性价比高的SV900-5G车载网关。 链接直达&#xff1a;https://www.key-iot.com/i…
阅读更多...
类与对象-对象特性-构造函数与析构函数

类与对象-对象特性-构造函数与析构函数

#include<iostream> using namespace std; class Person { public: //构造函数 : //没有返回值,不写void //函数名与类名相同 //构造函数可以有参数,能发生重载 //创建对象时,构造函数会自动调用,而且只调用一次 Person() { cout << &quo…
阅读更多...
哈里斯鹰算法优化BP神经网络(HHO-BP)回归预测研究（Matlab代码实现）

哈里斯鹰算法优化BP神经网络(HHO-BP)回归预测研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Python爬虫：ad广告引擎的模拟登录

Python爬虫：ad广告引擎的模拟登录

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…
阅读更多...
Ubuntu桌面环境的切换方法

Ubuntu桌面环境的切换方法

你在找它吗&#xff1f; 国内麒麟、深度等系统虽然界面更炫&#xff0c;但——软件仓库与Ubuntu官方已不兼容。国内系统遇到稳定性问题&#xff0c;还是得拿Ubuntu做参照。今天本来介绍下这款Linux桌面。 为什么在 Ubuntu 上考虑 LXQt&#xff1f; 性能&#xff1a;LXQt设计为…
阅读更多...
基于SSM的教务管理系统运行教程

基于SSM的教务管理系统运行教程

文章目录 1、前期必备1.1、所需软件版本说明1.2、下载源码1.3、下载开发工具1.4、下载JDK并配置环境变量1.5、安装数据库和数据库管理工具1.6、安装配置Maven 2、将SQL文件导入到数据库2.1、新建MySQL连接2.2、新建数据库并导入SQL 3、用Eclipse运行程序3.1、导入educationalMa…
阅读更多...
操作系统【OS】操作系统的引导

操作系统【OS】操作系统的引导

激活CPU。 激活的CPU读取ROM中的boot程序&#xff0c;将指令寄存器置为BIOS(基本输入输出系统)的第一条指令&#xff0c; 即开始执行BIOS的指令。硬件自检。 启动BIOS程序后&#xff0c;先进行硬件自检&#xff0c;检查硬件是否出现故障。如有故障&#xff0c;主板会发出不同含…
阅读更多...
【JavaEE】Java多线程编程案例 -- 多线程篇(3)

【JavaEE】Java多线程编程案例 -- 多线程篇(3)

Java多线程编程案例 1. 单例模式1.1 代码的简单实现1.2 懒汉模式的线程安全代码 2. 阻塞队列2.1 阻塞队列的概念2.2 使用库中的BlockingDeque2.3 模拟实现阻塞队列2.4 生产者消费者模型 3. 定时器3.1 概念3.2 使用库的定时器 - Timer类3.3 模拟实现定时器 4. 线程池4.1 概念4.2…
阅读更多...
JetBrains系列IDE全家桶激活

JetBrains系列IDE全家桶激活

jetbrains全家桶 正版授权&#xff0c;这里有账号授权的渠道&#xff1a; https://www.mano100.cn/thread-1942-1-1.html 附加授权后的一张图片
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023