flex grid 布局

最新推荐文章于 2024-07-11 16:02:06 发布
最新推荐文章于 2024-07-11 16:02:06 发布
阅读量424 收藏
点赞数 1
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qaz521000/article/details/126374451
版权
本文详细介绍了CSS布局中的flex和grid两种方法，包括它们的属性和用法。通过实例展示了如何使用flex-direction调整主轴方向，以及grid-template-columns设置列宽。同时，讲解了元素分类、position定位，如relative、absolute和fixed。最后，给出了一个实际的HTML和CSS代码示例，用于创建响应式页面布局。
摘要由CSDN通过智能技术生成

元素分类

2.position 定位

3.flex布局

父元素属性

子元素属性

4.grid布局

  • ​ 行内元素

  • ​ 块级元素

  • ​ 行内块元素

    布局分类

    1.float 浮动

    浮动元素的顶部，

    在标准文档流的底部

  • 对div2进行浮动：浮动元素的顶部，在标准文档流的底部
  • 对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
  • 对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
  • 对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

  • relative 相对定位：相对原来位置，偏移一定距离

  • absolute 绝对定位：相对于position不为static的父元素，偏移一定距离

    父相子绝：父元素relative，子元素absolute

  • fixed 固定定位：相对浏览器定位

  • static 没有定位：

  • flex-direction 调整主轴方向

最低0.47元/天 解锁文章
服了都
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML布局
weixin_57959921的博客
03-29 1094
HTML布局
8月16日知识总结
m0_70021245的博客
08-16 277
flex-flow 属性： 复合属性，flex-direction和flex-wrap。- flex-flow 属性： 复合属性，flex-direction和flex-wrap。- align-content属性 子元素整体，在父元素中的对齐方式。- align-content属性 子元素整体，在父元素中的对齐方式。- align-items 侧轴方向，子元素的排列。- align-items 侧轴方向，子元素的排列。...
了解flex布局和grid布局
最新发布
qq_41367352的博客
07-11 942
Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。//块级元素//行内元素flex布局支持6个容器属性：属性网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。//块级元素//行内元素。
html常见的布局总结
Bai_guo的博客
05-06 1411
主流布局的类型：1.静态布局2.响应式布局3.弹性布局pc站常见的布局：1.一列布局（静态布局）：一列自适应居中2.两列布局：一列固定宽+一列自适应3.三列布局（双飞翼布局）：中间列自适应宽+左右列的宽固定一列布局：1.两个要点：*页面内容区有一个固定宽度*页面内容区域在浏览器窗口中自适应居中2.实现办法：页面内容区域box{width：自定义宽度；margin：0 auto；}两列布局：1.实现...
HTML布局方式
wwqwwqwwq352的博客
06-12 135
盒子布局 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box1{ width: 200px; height: 200px; border: 1px solid black;
浅谈HTML几种布局方式
weixin_45131680的博客
12-05 1512
布局是前端比较基础但是也很重要的部分，过去传统的布局方案一般是通过基于然后配合display、position或float等属性进行布局。这种布局方式使用和理解起来是相对简单，但是我认为布局更复杂的布局场景和维护起来会比较困难。。没有适用所有场景的布局，只有合适的布局，在实际应用中多种布局方式灵活使用才能达到更好的效果。
Grid简单入门布局.pptx
02-25
【CSS Grid布局】是Web开发中的二维布局系统，主要用于网页设计和前端开发，它使得创建复杂的、响应式的、均匀分布的布局变得更加简单。在【Grid简单入门布局.pptx】的技术分享中，主要介绍了Grid布局的基本概念、与...
运用Grid或者flex布局制作页面
06-10
CSS Grid布局，全称为“二维网格布局系统”，它允许你将网页设计成一个由行和列组成的网格系统，每个单元格可以放置一个元素。通过设置行和列的大小，以及定义单元格之间的间距，你可以精确地控制网页元素的位置。...
记录flex和grid布局的代码
03-25
在前端开发领域，布局设计是至关重要的，而Flex布局和Grid布局是现代Web设计中两种主要的布局方式。本文将深入探讨这两种布局模式，并通过代码示例帮助理解它们的工作原理和应用场景。 首先，Flex布局（Flexible ...
拥抱未来的CSS布局方式flex与grid布局
08-11
"拥抱未来的CSS布局方式flex与grid布局"这个主题将深入探讨两种主流的布局技术：Flexbox（弹性盒布局）和Grid Layout（网格布局），它们彻底改变了我们对网页布局的理解和实践。 **一、Flexbox布局** Flexbox，...
Flex布局学习资料
11-10
3. **Flexbox和Grid布局的结合**：在某些复杂布局中，可能会同时使用Flexbox和CSS Grid来达到最佳效果。 4. **百分比和自动值**：在`flex-basis`中使用百分比或`auto`值，能更好地适应不同屏幕尺寸和内容变化。 ...
HTML 布局
12-14
HTML 布局   网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 在线实例 如何使用 元素添加布局。 如何使用 元素添加布局。网站布局大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。大多数网站可以使用或者 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 HTML 布局 – 使用元素 div 元素是用于分组 HTML 元素的块级元素。 下面的例子使用五个 div 元素来创建多列布局： 实例   主要的网页标题 菜单 HTML CSS JavaScript 内容在这里 版权 :copyright: mscto.com   上面的 HTML 代码
web前端－HTML布局－014
helloMr_wo的博客
09-29 440
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。HTML 布局 - 使用<div> 元素div 元素是用于分组 HTML
HTML-布局
m0_73595197的博客
04-14 709
布局 1.1 盒子布局 1.1 border 盒子的主体为border，border表示边框，它有几种标签限制： 1.1.1 none（定义无标签） <!DOCTYPE html> <html lang="en"> <head> <title>布局</title> <style> div4{ border: 1px none ; background-col
HTML的布局
FairyKunKun的博客
04-01 981
重中之重 需求： Html默认采用文档流布局方式：浏览器会自上而下，从左到右依次显示标签元素，遇到块级元素则独占一行，行级元素同行共存。 两个块级元素如何在同一行显示？ 办法1：使用display inline 或inline-block ----》打破默认的文档流布局方式。 问题： 办法2：使用浮动技术。 float: none 默认的文档流 left左浮动 right右浮动 原始素材 <!DO...
html页面布局
墨城烟柳ベ旧人殇的博客
04-12 7057
本文主要是用HTML语言实现页面布局。
HTML中，常用的布局方式
酸奶公园
08-17 868
表格布局适用于简单的数据展示，块级元素布局适用于大多数网页布局情况，浮动布局适用于多列布局和图文混排，弹性盒子布局适用于复杂布局和需要自适应的情况，网格布局适用于需要精确控制元素位置的情况。网格布局将页面分割成网格，可以通过设置行和列的属性来控制元素的位置和网格大小。这种布局方式适用于大多数网页布局情况，可以轻松地实现多列布局、响应式布局等。但是不建议在网页布局中频繁使用表格布局，因为其结构较为复杂，会影响网页的加载速度和可访问性。浮动布局适用于实现多列布局以及图文混排等需要元素浮动的情况。
grid布局和flex布局
11-27
以下是关于grid布局和flex布局的介绍： 1. Grid布局 Grid布局是一种二维布局系统，可以将一个网格划分为多个区域，然后将元素放置在这些区域中。它可以更好地控制页面的布局，特别是在响应式设计中非常有用。 以下是一个简单的Grid布局示例： ```css .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } .item { background-color: #ccc; padding: 20px; } ``` 2. Flex布局 Flex布局是一种一维布局系统，可以更好地控制元素在容器中的位置和大小。它可以使响应式设计更加容易，并且可以轻松地实现水平和垂直居中。 以下是一个简单的Flex布局示例： ```css .container { display: flex; justify-content: center; align-items: center; } .item { background-color: #ccc; padding: 20px; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值