前端面试:【CSS】盒模型、选择器、布局、响应式设计、Flexbox 与 Grid

CSS(层叠样式表)是用于控制网页外观和布局的重要语言。在这篇文章中,我们将深入探讨CSS的基础知识,包括盒模型、选择器、布局、响应式设计,以及弹性盒子(Flexbox)和网格布局(Grid)。

1. 盒模型:元素布局的基础

盒模型是指在网页布局中,每个HTML元素都被看作一个盒子,包含内容、内边距、边框和外边距。盒模型的理解是构建页面布局的基础。

  • 内容区域:元素实际包含的内容。
  • 内边距(padding):元素内容与边框之间的空白区域。
  • 边框(border):包围内容和内边距的线条。
  • 外边距(margin):元素与其他元素之间的间距。

2. 选择器:定位和样式化元素

选择器用于选择需要样式化的HTML元素,它使得我们可以针对特定的元素或元素组应用样式。

  • 类选择器(.class):选择具有特定类名的元素。
  • ID选择器(#id):选择具有特定ID的元素。
  • 标签选择器(element):选择特定类型的HTML元素。
  • 后代选择器:选择嵌套在其他元素内部的元素。
  • 伪类选择器(:hover、:nth-child等):根据元素的状态或位置选择元素。

3. 布局:排列元素的方式

布局涉及元素在页面上的位置和大小,它决定了页面的整体结构和外观。

  • 定位(position):通过设置position属性可以改变元素的定位方式,如相对定位、绝对定位等。
  • 浮动(float):将元素从正常流中脱离,使其向左或向右浮动。
  • 相对单位:百分比、em、rem等,用于创建相对于父元素的布局。
  • 绝对单位:像素(px)、点(pt)等,用于创建固定的布局。

4. 响应式设计:适应不同设备

响应式设计是使网页在不同设备上呈现良好的技术,保证在手机、平板电脑和桌面电脑上都能有出色的体验。

  • 媒体查询(media queries):根据设备的属性(如宽度、高度)应用不同的样式。
  • 移动优先(mobile-first):首先为移动设备设计,然后逐步添加更大屏幕的样式。

5. Flexbox:弹性盒子布局

Flexbox是一种现代的布局方式,用于创建弹性的、可伸缩的布局结构。

  • 容器和项目:通过display: flex将父元素设为弹性容器,子元素成为弹性项目。
  • 主轴和交叉轴:弹性容器具有主轴和交叉轴,通过flex-direction控制主轴方向。
  • 对齐和分布:使用justify-content(设置项目在主轴上对齐方式)align-items(设置项目在交叉轴上对齐方式)来对齐和分布弹性项目。
  • 弹性项目的属性flex-grow(项目主轴放大系数)flex-shrink(项目主轴上缩放系数)flex-basis(分配剩余空间前,项目占据主轴空间大小)控制项目的伸缩性。

Flexbox是一个强大的布局工具,特别适用于创建复杂的页面结构,如导航菜单、卡片布局等。

6. Grid:网格布局

Grid是一种基于网格的布局系统,使我们能够更精确地控制元素的位置和大小。

  • 容器和网格项:通过display: grid将父元素设为网格容器,子元素成为网格项。
  • 网格行和网格列:通过设置grid-template-rowsgrid-template-columns定义行和列。
  • 对齐和分布:使用justify-itemsalign-items来对齐和分布网格项。
  • 跨越网格单元:通过grid-rowgrid-column跨越多个网格单元。

Grid布局提供了更多的控制能力,适用于复杂的网格结构和对齐需求。

总之,CSS是创建吸引人的网页外观和布局的关键。深入理解盒模型、选择器、布局、响应式设计、Flexbox和Grid等基础知识,将帮助你更好地掌握网页样式和布局的核心概念,为网页设计带来更大的灵活性和创意。

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

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

相关文章

hadoop2的集群数据将副本存储在hadoop3

在 Hadoop 集群中,HDFS 副本是分布式存储的,会存储在不同的节点上。因此,如果您的 HDFS 所在路径是在 Hadoop2 集群中,您可以在 Hadoop3 集群上添加新的节点,并向 Hadoop3 集群中添加这些新节点上的数据副本。 以下是…

时序预测 | MATLAB实现基于CNN-LSTM卷积长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于CNN-LSTM卷积长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于CNN-LSTM卷积长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 MATLAB实现基…

【C#】关于?的用法

1、可空类型修饰符(?) 如: int? x null;//可空类型默认值都是null,而值类型如int默认值为0、bool默认值为false等 bool? result true;2、三目运算符(?:) 如: bool…

线程面试题-1

看的博客里面总结的线程的八股文 1、线程安全的集合有哪些?线程不安全的呢? 线程安全的: Hashtable:比HashMap多了个线程安全。 ConcurrentHashMap:是一种高效但是线程安全的集合。 Vector:比Arraylist多了个同步化…

安装Vue_dev_tools

Vue控制台出现Download the Vue Devtools extension for a better development experience: 下载Vue_dev_tools,这里给出网盘链接,有Vue2和Vue3的,dev_tools 以Google浏览器为例 点击设置(就是那三个点)->扩展程序->管理扩…

C++开发知识树的阶段

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言第一阶段:C++工具使用的入门阶段1、C++的语言语法基础2、数据结构与算法(常用的几个数据结构)3、基础的linux命令第二阶段:C++代码核心思想的进…

游戏服务端性能测试

导语:近期经历了一系列的性能测试,涵盖了Web服务器和游戏服务器的领域。在这篇文章中,我将会对游戏服务端所做的测试进行详细整理和记录。需要注意的是,本文着重于记录,而并非深入的编程讨论。在这里,我将与…

NextJs - Middleware(中间件)

中间件允许您在请求完成之前运行代码。然后,根据传入的请求,您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。 中间件在缓存内容和路由匹配之前运行。 使用规则 使用项目根目录中的文件 middleware.ts(或 .js&#xff09…

C# Windows登录界面进行截图,控制鼠标键盘等操作实现(一)

首先常规的账户进程是没办法获取登录界面的信息的,因为登录界面已经不在某个账户下了,登录界面显示了每一个账户的切换。所以得使用System权限的进程。 那么Windows系统究竟是怎么将登录界面与用户桌面隔离开的呢?首先先通过一些Windows操作系…

很好的启用window10专业版系统自带的远程桌面

启用window10专业版系统自带的远程桌面 文章目录 启用window10专业版系统自带的远程桌面前言1.找到远程桌面的开关2. 找到“应用”项目3. 打开需要远程操作的电脑远程桌面功能 总结 前言 Windows操作系统作为应用最广泛的个人电脑操作系统,在我们身边几乎随处可见。…

Elasticsearch的数据删除策略只能触发一次

在Elasticsearch中,可以使用Index Lifecycle Management(ILM)来设置删除数据的保留时长。ILM是Elasticsearch的一项功能,用于管理索引的生命周期,包括数据保留、备份、归档等操作。 要设置删除数据的保留时长&#xf…

牛客网【面试必刷TOP101】~ 11 模拟

牛客网【面试必刷TOP101】~ 11 模拟 文章目录 牛客网【面试必刷TOP101】~ 11 模拟[toc]BM97 旋转数组(★★)BM98 螺旋矩阵(★)BM99 顺时针旋转矩阵(★★)BM100 设计LRU缓存结构(★★★)BM101 设计LFU缓存结构(★★★) BM97 旋转数组(★★) 两次反转 [1, 2, 3, 4, 5, 6] [4, 3,…

vite初始化vue3项目(配置自动格式化工具与git提交规范工具)

初始化项目 vite构建vue项目还是比较简单的,简单配置选择一下就行了 初始化命令 npm init vuelatest初始化最新版本vue项目 2. 基本选项含义 Add TypeScript 是否添加TSADD JSX是否支持JSXADD Vue Router是否添加Vue Router路由管理工具ADD Pinia 是否添加pinia…

Nginx反向代理配置流式响应

Nginx 是通过缓存响应内容来处理请求的。也就是说,当 Nginx 接收到完整的响应后,才会将其发送给客户端,所以默认不支持流式响应,这里讲讲 Nginx 反向代理中怎么配置流式响应? 一、使用背景 最近使用 Egg.js 搭建自动化…

TypeError: Cannot read properties of undefined (reading ‘container‘)

问题环境: element项目 el-table的错误 项目是由 webpack项目迁移为 vite项目 问题描述: errorLog.js?t1692581753160:17 TypeError: Cannot read properties of undefined (reading container) at unbind (infinite-scroll.js:259:31) …

【腾讯云 TDSQL-C Serverless 产品测评】全面测评TDSQL-C Mysql Serverless

全面测评TDSQL-C Mysql Serverless 文章目录 全面测评TDSQL-C Mysql Serverless前言什么是TDSQL-C Mysql Serverless初始化 TDSQL-C Mysql Serverless新建数据库建立数据表开启外网访问 兼容性SQL文件 导入导出navicat 直接在线传输 构建测试环境准备Python测试脚本准备 Jmeter…

php的openssl_encrypt是不是自动做了PKCS5Padding?

在PHP中,openssl_encrypt函数默认使用的是PKCS7填充(不是PKCS5填充)。PKCS7填充实际上是PKCS5填充的扩展,用于对不同块大小的数据进行填充。 当你使用openssl_encrypt函数进行加密时,如果你没有显式指定填充模式和填充…

Unity框架学习--对象池

频繁创建和销毁对象会造成性能的开销。 创建对象的时候,系统会为这个对象开辟一片新的空间。销毁对象的时候,这个对象会变成内存垃圾,当内存垃圾达到一定程度,就会触发垃圾回收机制,清理内存垃圾,由…

下载安装并使用小乌龟TortoiseGit

1、下载TortoiseGit安装包 官网:Download – TortoiseGit – Windows Shell Interface to Githttps://tortoisegit.org/download/ 2、小乌龟汉化包 在官网的下面就有官方提供的下载包 3、安装

Electron入门,项目运行,只需四步轻松搞定。

electron 简单介绍: 实现:HTML/CSS/JS桌面程序,搭建跨平台桌面应用。 electron 官方文档: [https://electronjs.org/docs] 本文是基于以下2篇文章且自行实践过的,可行性真实有效。 文章1: https://www.cnbl…