CSS-06-三种布局方式

最新推荐文章于 2022-07-28 16:45:59 发布
最新推荐文章于 2022-07-28 16:45:59 发布
阅读量130 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangguo52047/article/details/107298296
版权

三种布局方式

  • 标准流：从上至下
  • 浮动：水平排列
  • 定位：相对位置，压在其它盒子上面

定位

  • 定位 = 定位模式 + 边偏移

定位模式

  • static ：无定位，就是标准流
  • relative ：相对移动，以前的位置，任然保留
  • absolute：相对于父元素，移动，不保留位置，子绝父相
  • fixed ：相对于窗口，永久固定
  • 结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

边偏移

  • 相对于父元素边线的距离
孤风雪影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的三大布局方式（流式布局，浮动布局和层布局）
originalApril的博客
03-16 6604
文章目录前言一、标准文档流二、三种布局方式1.流式布局2.浮动布局（1）字围效果（2）圣杯布局3.层布局定位的分类：（1） 相对定位 position:relative（2） 绝对定位 position:absolute（3） 固定定位 position:fixed（4） 静态定位 就是不定位 默认的三、浮动元素会造成影响：1.对父元素造成的影响解决方法2.对兄弟元素造成的影响解决方法四、浮动元素的特性 前言 布局：所谓的布局，就是指把一个盒子放在合适的位置。 在CSS2.0中，有三大布局： （1..
css-pro-layout：CSS库，用于构建响应式和可自定义的布局
02-03
CSS Pro布局 CSS库，用于构建响应式和可自定义的页面布局 文献资料 有关完整文档，请访问 入门 您可以使用NPM或Yarn安装CSS专业版 NPM npm install css-pro-layout 纱 yarn add css-pro-layout 将css-pro-layout....
CSS的三种布局方式
weixin_57153112的博客
07-28 1072
流式布局、浮动布局、flex布局、定位、position、弹性盒子
常见的几种内容样式布局
cloudday的专栏
05-31 642
css的3种布局方式
熊诗言的博客
07-27 6932
无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。 1.文档流布局方式，这是最基本的布局方式，就是按照文档顺序一个一个地显示，块元素独占一行，内联元素共享一行。 2.浮动布局方式，某个元素浮动之后，其后面的元素就当其不存在而占用其原来的地方，按照原来文档流布局方式布局。 ...
CSS+DIV三种布局方式
热门推荐
qq_34283987的博客
09-08 7万+
在学习了盒模型、块级元素和行内元素得到概念后，我们来说一下CSS的一个比较重要的用途：布局。以前我们学过表格可以起到布局页面的作用，比如布局表单，但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用
CSS - 网格布局（grid）
伏城之外的博客
07-20 6882
网格布局、grid、表格布局、二维布局、网格轨道、grid-template-rows、grid-template-columns、grid-template、fr单位、min-content、max-content、minmax、auto-fill、auto-fit、网格单元、网格项目、网格线、grid-row、grid-column、grid-area、网格区域、grid-template-area、网格间距、gap、显示网格、隐式网格、稀疏包装、密集包装、网格单元对齐、网格项目对齐、统一对齐、单独对齐
CSS--flex布局--教程/详解
IT利刃出鞘的博客
12-22 3132
本文详细介绍CSS的flex布局，包括：原理、属性。
圣杯布局-三种实现方式，css经典布局
annans的博客
06-28 1952
经典布局：圣杯布局，三种实现方式
CSS - 浮动布局（float）
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
CSS--移动端布局
m0_53206841的博客
04-26 3281
基本概念 背景： 因为手机的尺寸和屏幕的像素越来越大，导致我们响应式布局很难保证网页能够100%适配主流的屏幕 概念： 使用css3的单位以及弹性布局等技术来实现移动端布局。一般移动端布局跟pc端是完全不一样的。 屏幕像素 逻辑像素： 真正用于显示屏幕内容的像素 设备物理像素： 是屏幕一出场已经确定的像素 逻辑像素和设备物理像素： 设备物理像素是指屏幕的实际像素有多少。但现在的手机屏幕一般物理像素都是1920*1080或者2k或更高。但如果一个设备物理像素等于一个逻辑像素（css px
css-three-columns-layout:css三栏布局的几种实现方式
04-27
本文将探讨CSS实现三栏布局的五种方法，每种方法都有其特点和适用场景。 1. **浮动布局（Float Layout）** 浮动布局是早期实现三栏布局的常见手段。通过设置左右两栏`float:left`或`float:right`，让它们在主内容...
css-layout-and-positioning-css布局与定位
03-26
本教程将深入探讨CSS布局与定位的基础概念、重要属性以及各种布局模式。 首先，理解CSS盒模型是布局的基础。盒模型包括元素的内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。通过调整...
css-网格布局-详情
08-01
它解决了以往CSS布局方法（如表格、浮动、定位和内嵌块）中存在的问题，特别是垂直居中等复杂布局。Flex布局虽然改进了一维布局，但对二维布局的支持有限。Grid布局则专为解决布局问题而生，提供了一个完整、灵活的...
easy-css-layout:简易CSS布局
03-14
简易CSS布局 演示版 前言 仅用于练习和备份 关于样式的颜色设置，这里存在一些问题，但是我不想修改它们。 如果您想通过本演示进行练习 首先，您需要在“演示”列中查看演示，并自己写下代码 如果您无法实现这些...
mediapipe-0.8.8.1-cp39-cp39-manylinux_2_17_x86_64.whl
08-11
mediapipe-0.8.8.1-cp39-cp39-manylinux_2_17_x86_64.whl
python爱心代码高级
08-11
1. 一行代码画爱心 print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3<=0 else' ')for x in range(-30,30)])for y in range(15,-15,-1)])) 效果图 2. 用turtle库画爱心加文字 import turtle import math turtle.pen() t=turtle t.up() t.goto(0,150) t.down() t.color('red') t.begin_fill() t.fillcolor('red') t.speed(1) t.left(45) t.forward(150) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(250+math.sqrt(2)*100) t.right (90) t
mediapipe-0.8.9.1-cp38-cp38-win_amd64.whl
08-11
mediapipe-0.8.9.1-cp38-cp38-win_amd64.whl
开发资料技术资料USB设备驱动开发深度解析-宋宝华非常好的技术资料.zip
最新发布
08-11
开发资料技术资料USB设备驱动开发深度解析-宋宝华非常好的技术资料.zip
如何使用postcss-pxtorem实现响应式布局？
05-30
postcss-pxtorem是一个PostCSS插件，可以将像素单位转换为rem单位，实现响应式布局。使用postcss-pxtorem的步骤如下： 1. 安装postcss-pxtorem插件 ``` npm install postcss-pxtorem --save-dev ``` 2. 配置post...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值