前端练习-CSS布局

文章目录

  • 前端练习-CSS布局
    • 在线练习
    • 一、盒模型
      • CSS1 盒模型 - content-box
      • CSS2 盒模型 - border-box
      • CSS3 盒模型- 外边距折叠
    • 二、浮动
      • CSS4 浮动
      • CSS5 浮动 - 清除
    • 三、定位
      • CSS7 定位 - inherit
      • CSS8 定位 - absolute
      • CSS9 定位 - absolute - 评注
      • CSS10 定位 - z-index
      • CSS11 定位 - relative
      • CSS12 定位 - fixed
      • CSS13 定位 - fixed - 广告
    • 四、display
      • CSS14 display - flex
      • CSS15 display - flex - 可伸缩项属性
      • CSS16 display - flex - 标签
      • CSS17 display - flex - order
      • CSS18 display - grid
      • CSS19 display - grid - 区域
    • 五、单列布局
      • CSS20 单列布局
  • 六、双列布局
      • CSS21 双列布局 - 浮动
      • CSS22 双列布局 - 绝对定位
      • CSS23 双列布局 - flex
      • CSS24 双列布局 - grid
    • 七、三列布局
      • CSS25 三列布局 - 浮动
      • CSS26 三列布局 - 绝对定位
      • CSS27 三列布局 - flex
      • CSS28 三列布局 - grid
      • CSS29 三列布局 - 圣杯布局
      • CSS30 三列布局 - 双飞翼布局

在线练习

一、盒模型

CSS1 盒模型 - content-box

CSS2 盒模型 - border-box

CSS3 盒模型- 外边距折叠

二、浮动

CSS4 浮动

CSS5 浮动 - 清除

三、定位

绝对定位：absolute 和 fixed 统称为绝对定位

相对定位：relative

默认值：static

CSS7 定位 - inherit

CSS8 定位 - absolute

CSS9 定位 - absolute - 评注

CSS10 定位 - z-index

CSS11 定位 - relative

CSS12 定位 - fixed

CSS13 定位 - fixed - 广告

四、display

CSS14 display - flex

CSS15 display - flex - 可伸缩项属性

CSS16 display - flex - 标签

CSS17 display - flex - order

CSS18 display - grid

CSS19 display - grid - 区域

五、单列布局

CSS20 单列布局

六、双列布局

CSS21 双列布局 - 浮动

CSS22 双列布局 - 绝对定位

CSS23 双列布局 - flex

CSS24 双列布局 - grid

七、三列布局

CSS25 三列布局 - 浮动

CSS26 三列布局 - 绝对定位

CSS27 三列布局 - flex

CSS28 三列布局 - grid

CSS29 三列布局 - 圣杯布局

CSS30 三列布局 - 双飞翼布局

前端练习-CSS布局相关推荐

  1. 前端基础——CSS布局

    前端基础学习第三天 文章目录 前端基础学习第三天 一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...

  2. 前端学习——CSS布局

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.正常布局流 `display`属性 弹性盒子(Flexbox) Grid布局 浮动 定位技术 前言 提示:这里可以 ...

  3. html 1-3-1布局,3.web前端—HTML+CSS布局(1)

    酷狗网页布局 image.png 一.网页基本布局(永远是第一步) 代码 酷狗网页布局 /*css样式*/ body div{ width: 1520px; } .a{ background-colo ...

  4. 前端笔记-CSS布局使得网页分成3部（头，内容，脚）

    css代码如下: <style>* {margin: 0;padding: 0;}.top {width: 100%;height: 40px;background-color: #2fa ...

  5. python制作网页样式与布局_python之路_前端之CSS布局1

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. ...

  6. 前端自学 - CSS总结篇（一）

    CSS 总结 一.CSS 的简介 二.CSS 的引入 (一)行内样式 (二)内联样式 (三)外联文件 三.CSS 语法 四.选择器 (一)选择器命名规范 (二)基本选择器  1. 元素选择器  2. ...

  7. css background 充满自适应_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...

    一.让一个元素水平垂直居中,到底有多少种方案? 水平居中 对于 行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...

  8. 一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文

    CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...

  9. 从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:OPPO商城轮播图 - 今天你学习了吗?(CSS:Day23) 文章目录 从零开始学前端:程序猿小白也可以 ...

  10. 给你一份详细的web前端CSS布局指南，请查收

    我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...

最新文章

  1. Phpcms V9手机门户设置教程：怎么用PC V9做手机网站
  2. 决策树python建模中的坑 ：ValueError: Expected 2D array, got 1D array instead:
  3. lncrna研究，2021最新相关资料合集
  4. nlp中文文本摘要提取，快速提取文本主要意思
  5. 字符和编码之间的转换（Python）
  6. Spring Boot + Shiro 集成
  7. python 投资组合_成功投资组合的提示
  8. GChemPaint－绘制化学分子布局
  9. mysql数据连接查询_mysql数据库 连接查询
  10. Mybatis+mysql动态分页查询数据案例——分页工具类(Page.java)
  11. Kong-dashboard 安装 启动运行
  12. 内向的人这样改善人际关系（四）
  13. 并发编程---ConcurrentHashMap源码解析
  14. leetcode题库10--正则表达式匹配
  15. 奇安信代码安全实验室帮助 RedHat 修复两个 oVirt 漏洞，获官方致谢
  16. qq视频资源源码功能有哪些
  17. DDR扫盲——DDR中的名词解析
  18. 小区出入登记记录系统java_一种小区出入管理系统的制作方法
  19. 检测和缓解PLC恶意软件的过程计算方法
  20. 使用ffmpeg转换文件格式,及ffmpeg参数说明（转）

热门文章

  1. css写打印单据样式
  2. python捕获键盘按键_Python中捕获键盘的方式详解
  3. iptables如何删除一条规则
  4. 阿里云邮件推送使用方法
  5. Java 代码访问 SMB 协议
  6. Web前端开发常用9个开源框架
  7. Ubuntu 20：Cadence IC615集成HSPICE
  8. 微信小程序支付---详解(python)
  9. 香农熵、交叉熵和相对熵
  10. 分布式图数据库-JanusGraph简介