CSS的三个重点

目录

  • 1.盒模型 (Box Model)
  • 2.位置 (position)
  • 3.布局 (Layout)
  • 4.低代码中的这些概念

在学习CSS时,有三个概念需要重点理解,分别是盒模型、定位、布局

1.盒模型 (Box Model)

定义:

CSS 盒模型是指每个 HTML 元素在页面上被视为一个矩形盒子。这个盒子由多个部分组成,包括内容区、内边距(padding)、边框(border)和外边距(margin)。

组成部分:

  • 内容区 (Content):实际显示的内容,如文本、图像等。
  • 内边距 (Padding):内容与边框之间的空间,增加内边距会使内容与边框之间的距离增大。
  • 边框 (Border):围绕内容和内边距的边框,可以设置宽度、样式和颜色。
  • 外边距 (Margin):盒子与其他元素之间的空间,增加外边距会使元素之间的距离增大。

计算方式:

盒模型的总宽度和高度可以通过以下公式计算:

    总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

2.位置 (position)

定位属性:

CSS 提供了多种定位方式,主要包括:

  • static:默认值,元素按照文档流正常排列。
  • relative:相对定位,元素相对于其正常位置进行偏移。
  • absolute:绝对定位,元素相对于最近的已定位祖先元素进行定位。
  • fixed:固定定位,元素相对于浏览器窗口进行定位,滚动页面时保持在同一位置。
  • sticky:粘性定位,元素在特定的滚动位置时表现为相对定位,超出后表现为固定定位。

3.布局 (Layout)

布局模型:

CSS 提供了多种布局模型,主要包括:

  • 流式布局:使用文档流(如 block 和 inline 元素)进行布局,元素按照顺序排列。
  • 浮动布局:使用 float 属性实现多列布局,常用于早期的网页设计。
  • 弹性布局 (Flexbox):使用 display: flex 创建灵活的布局,适合一维布局(水平或垂直)。
  • 网格布局 (Grid):使用 display: grid 创建二维布局,适合复杂的网格结构。

4.低代码中的这些概念

在低代码学习中,也是要理解这些概念才可以搭建出需要的页面布局,比如熟悉布局组件,分别能起什么作用
在这里插入图片描述
如何应用盒模型
在这里插入图片描述
如何设置定位
在这里插入图片描述
什么样的布局是你需要的
在这里插入图片描述
先学习基础的理论知识,再结合工具去实践,这样才可以彻底的用好工具

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于LLC知识23(频率越大变压器体积越小?)

为什么频率越高,同样的磁芯就可以用的更小? 变压器他负责的功能是 1、隔离 2、能量传递 这里主要是与能量传递有关 我们首先要知道,次级的输出功率一定的情况下,那么在一定的时段内消耗的能量就是一定的,比如1000W…

UE5.4 PCG Layered Biomes插件

B站学习链接 官方文档 一、PCGSpawn Preset:负责管理PCG要用到的植被资产有哪些 二、BiomesSettings:设置要使用的植被资产Layer、Spawn参数 1.高度Layer参数: 2.地形Layer:我这里用地形样条线绘制了一块地形Layer 绘制点和…

数字后端零基础入门系列 | Innovus零基础LAB学习Day8

###LAB15 Detail Routing for Signal Integrity, Timing, Power and Design for Yield 这个章节虽然标题有点长,但不要被它吓到,其实这个章节就是Innovus工具的绕线Routing。只不过这个阶段做Route不是仅仅是把所有的逻辑连接,用实际的金属层…

量化交易 股市技术指标

股市数据分类 股票数据根据信息来源和分析方法的不同,可以分为技术面数据和基本面数据。 技术面数据和基本面数据都是股票分析中重要的工具,它们提供了不同的视角和方法来评估股票的投资价值。投资者可以综合运用这两类数据,从技术面和基本…

【从零开始的LeetCode-算法】3222. 求出硬币游戏的赢家

给你两个 正 整数 x 和 y ,分别表示价值为 75 和 10 的硬币的数目。 Alice 和 Bob 正在玩一个游戏。每一轮中,Alice 先进行操作,Bob 后操作。每次操作中,玩家需要拿出价值 总和 为 115 的硬币。如果一名玩家无法执行此操作&#…

MR30分布式IO模块与高效PLC协同

在现代工业自动化领域中,数据采集与控制系统扮演着至关重要的角色。其中,可编程逻辑控制器(PLC)和分布式IO模块(Distributed I/O Modules)是这一领域的两大核心组件。本文将详细介绍MR30分布式IO模块与PLC如…

贝尔不等式的验证

在量子计算机上运行一个实验,以演示使用Estimator原型违反CHSH不等式。 import numpy as npfrom qiskit import QuantumCircuit from qiskit.circuit import Parameter from qiskit.quantum_info import SparsePauliOpfrom qiskit_ibm_runtime import QiskitRuntim…

CSRF与SSRF

csrf(跨站请求伪造)的原理: csrf全称是跨站请求伪造(cross-site request forgery),也被称为one-click attack 或者 session riding scrf攻击利用网站对于用户网页浏览器的信任,劫持用户当前已登录的web应用程序,去执行分用户本意的操作。 利…

Pr 视频效果:ASC CDL

视频效果/颜色校正/ASC CDL Color Correction/ASC CDL ASC CDL ASC CDL效果通过对红、绿、蓝三个原色通道的独立调整,实现对图像色彩的精确控制。在此基础上,还可用于调整处理后图像的整体饱和度。 ◆ ◆ ◆ 效果选项说明 斜率 Slope、偏移 Offset和功…

Edge 浏览器插件开发:图片切割插件

Edge 浏览器插件开发:图片切割插件 在图片处理领域,按比例切割图片是一个常见需求。本文将带你开发一个 Edge 浏览器插件,用于将用户上传的图片分割成 4 个部分并自动下载到本地。同时,本文介绍如何使用 cursor 辅助工具来更高效…

docker desktop使用ubuntu18.04带图形化+运行qemu

记录一下docker desktop使用ubuntu18.04带图形化命令和使用步骤 1. 下载镜像 参考:【Docker教程】Docker部署Ubuntu18.04(带图形化界面) 命令: docker pull kasmweb/ubuntu-bionic-desktop:1.10.02. 启动镜像 命令: docker run -d -it …

Transformer和BERT的区别

Transformer和BERT的区别比较表: 两者的位置编码: 为什么要对位置进行编码? Attention提取特征的时候,可以获取全局每个词对之间的关系,但是并没有显式保留时序信息,或者说位置信息。就算打乱序列中token…

基于STM32的工厂短距离安防巡逻机器人设计:ZIgBee、OpenCV、人工智能(AI)算法(代码示例)

一、项目概述 随着工业化的迅速发展,工厂的安全管理显得尤为重要。为了提高工厂的安全性,我们设计了一款基于STM32的安防巡逻机器人。该机器人能够在工厂内部自主巡逻,实时监控环境,并通过多种传感器和智能算法进行异常检测和处理…

Istio基本概念及部署

一、Istio架构及组件 Istio服务网格在逻辑上分为数据平面和控制平面。 控制平面:使用全新的部署模式:Istiod,这个组件负责处理Sidecar注入,证书颁发,配置管理等功能,替代原有组件,降低复杂度&…

java常用框架介绍

1. Spring Boot 特点:Spring Boot是Spring家族中的一个新成员,它基于Spring 4.0设计,提供了默认配置、简化依赖管理以及内嵌式容器等特性,使得开发者能够快速创建独立的、生产级别的Spring应用。 用途:Spring Boot特别…

Docker:介绍与安装

Docker官网与仓库地址 docker官网:http://www.docker.comopenDocker Hub官网: https://hub.docker.com/open Docker三要素 镜像 (Image) 镜像是Docker的核心概念之一,它是不可变的、只读的,并包含了一套文件系统,里面包含了运…

Odoo:免费开源的医药流通行业信息化解决方案

文 / 开源智造Odoo亚太金牌服务 方案概述 开源智造Odoo免费开源ERP提供面向医药批发采、供、销业财一体化,及直接面向消费者的门店终端、全渠道管理、营销管理以及GSP合规管理解决方案,提升企业运营效率和全业务链条的数字化管控、追溯能力。 行业的最新…

HashMap 源码分析

HashMap 源码分析 1. 前置知识 1.1 什么是 Map 在实际需求中,我们常常会遇到这样的问题:在诸多数据中,通过其编号来寻找某些信息,从而进行查看或修改,例如通过学号查询学生信息。今天我们所介绍的 Map 集合就可以很…

Linux 常用安装软件

1、安装JDK 1.1、查看系统自带JDK yum search java|grep jdk 1.2、安装JDK yum install java-1.8.0-openjdk 输入Y 1.3、编辑环境变量配置 vim /etc/profile 添加一下配置 export JAVA_HOME/usr/lib/jvm/java-1.8.0-openjdk export PATH$JAVA_HOME/bin:$PATH export CLAS…

三傻排序和对数器

三傻排序、对数器 前置知识:无,三傻排序会的可以直接跳过,对数器一定要理解 三傻排序是所有排序中时间复杂度最差的(时间复杂度请看后面的内容),在实际的工作中,插入排序在数据量小的时候还会…