CSS 全解析实战(四)-CSS 布局

简介: 1 布局简介常用布局方法2 布局方式(表格)原生表格,已废弃 div 实现表格效果相同3 一些布局属性盒模型content: 文字内容区padd...

1 布局简介

img_ae29a57a3c78d342cc1f0ae898bcc869.png
  • 常用布局方法


    img_c14025af97513c1047778e3ca871027a.png

2 布局方式(表格)

img_f1adc258d289f3d954b7b22b45e8af79.png
原生表格,已废弃

img_9f6e436b4b7caa2e85d2074542c6860e.png
div 实现表格

img_600731213a2282aa4e37942031001806.png
效果相同

3 一些布局属性

  • 盒模型


    img_5c6afa1306b0763187cd11efe8cf12f8.png

    content: 文字内容区
    padding: 内容区到边框的留白区
    border: 边框
    margin: 离别的东西的距离

  • display/position


    img_27e8b706cf49f6025d4c1964db063f60.png

    img_bef6500adbc750a9da36028cc44a91d3.png

    img_43c5f6bcd238d6500154ec5bf3008cfb.png

    img_816eac1db34d45d230d420928f5dd593.png

    img_6a576361e26fb57f878883bcdaeca956.png

4 flexbox现代布局方式(弹性盒子)

img_7390b1ba39c142a948c9a5e89a0b47c5.png

img_0ce5982d939b61e0ec17d3ae6cd90c5e.png

img_adb01fcc87823a6364c9e42e053ed731.png

img_7a2ddb5fa81e5e1d8100e18b0a7f6f31.png

img_d37aedb7a3511e4e8c13ea612dce8856.png

5 float布局

img_978aafccacb630ebf45c644149000fc8.png

img_7b47494f7914b5bc3a2b8d5cd67350a4.png

img_d105685143e632e433ed5f2e8add9825.png
图文混排

img_220a23db06de41317e81547cb0d83f2f.png

img_a98b85eb4909be2e701a7c42e657c88d.png

img_7e4dacc5e4dfcde3219f823bb876f66e.png

6 inline-block布局

img_4b6a7d554cc1a70e3f6ffc904ec389be.png

img_a3593e375f9109f3766024230e709d6e.png

img_37ff9399522aaf9b7e8ea6ffbd7a5240.png

7 响应式布局(1)

img_de51ffe1661b789184be6eec4c1cce33.png

img_2196fec928f0eecdbc2e2e264bd66ee6.png
让页面适配移动端加此即可

img_8d717833dc775c46daf831af43a9738b.png

img_9ea875e6e2383e0310b24cc38b5abc53.png

8 响应式布局(2)

9 主流网站使用的布局方式

img_20802755a19bbccb8a6719da665947c1.png

img_25b15a1ee927b5416cf83558e0cd7b71.png

看出都是 float 浮动布局分左右


img_2a722af8107a18e05b80f4502daf243b.png

结束时都 clear 清除浮动,且内容为空, display:table 或者 display:block 皆可

10 CSS面试题

img_227d32187e3cd33ebb9c352b1d706f66.png

img_dfb2971acce67f428335b3ed16d0fe8e.png

img_65ea1354a1f3904a8b2add8844fb2ca1.png

img_e16c7e020038862d3ff703d540f3180e.png

img_3e468d70591ca493e70f0c06893d53a7.png
目录
相关文章
|
前端开发
用 CSS Grid 轻松构建复杂布局
用 CSS Grid 轻松构建复杂布局
433 83
|
8月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
262 1
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
518 0
|
11月前
|
Web App开发 前端开发 数据可视化
用 CSS Grid 实现高效布局的 3 个实战技巧
用 CSS Grid 实现高效布局的 3 个实战技巧
|
人工智能 API 开发者
HarmonyOS Next~鸿蒙应用框架开发实战:Ability Kit与Accessibility Kit深度解析
本书深入解析HarmonyOS应用框架开发,聚焦Ability Kit与Accessibility Kit两大核心组件。Ability Kit通过FA/PA双引擎架构实现跨设备协同,支持分布式能力开发;Accessibility Kit提供无障碍服务构建方案,优化用户体验。内容涵盖设计理念、实践案例、调试优化及未来演进方向,助力开发者打造高效、包容的分布式应用,体现HarmonyOS生态价值。
928 27
|
数据采集 JSON 数据可视化
JSON数据解析实战:从嵌套结构到结构化表格
在信息爆炸的时代,从杂乱数据中提取精准知识图谱是数据侦探的挑战。本文以Google Scholar为例,解析嵌套JSON数据,提取文献信息并转换为结构化表格,通过Graphviz制作技术关系图谱,揭示文献间的隐秘联系。代码涵盖代理IP、请求头设置、JSON解析及可视化,提供完整实战案例。
856 4
JSON数据解析实战:从嵌套结构到结构化表格
|
数据采集 机器学习/深度学习 存储
可穿戴设备如何重塑医疗健康:技术解析与应用实战
可穿戴设备如何重塑医疗健康:技术解析与应用实战
815 4
|
机器学习/深度学习 人工智能 Java
Java机器学习实战:基于DJL框架的手写数字识别全解析
在人工智能蓬勃发展的今天,Python凭借丰富的生态库(如TensorFlow、PyTorch)成为AI开发的首选语言。但Java作为企业级应用的基石,其在生产环境部署、性能优化和工程化方面的优势不容忽视。DJL(Deep Java Library)的出现完美填补了Java在深度学习领域的空白,它提供了一套统一的API,允许开发者无缝对接主流深度学习框架,将AI模型高效部署到Java生态中。本文将通过手写数字识别的完整流程,深入解析DJL框架的核心机制与应用实践。
947 3
|
缓存 监控 搜索推荐
【实战解析】smallredbook.item_get_video API:小红书视频数据获取与电商应用指南
本文介绍小红书官方API——`smallredbook.item_get_video`的功能与使用方法。该接口可获取笔记视频详情,包括无水印直链、封面图、时长、文本描述、标签及互动数据等,并支持电商场景分析。调用需提供`key`、`secret`和`num_iid`参数,返回字段涵盖视频链接、标题、标签及用户信息等。同时,文章提供了电商实战技巧,如竞品监控与个性化推荐,并列出合规注意事项及替代方案对比。最后解答了常见问题,如笔记ID获取与视频链接时效性等。

推荐镜像

更多
  • DNS