布局系列

最新推荐文章于 2024-07-24 11:39:30 发布
最新推荐文章于 2024-07-24 11:39:30 发布
阅读量120 收藏
点赞数
分类专栏： 前端相关 文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/studyeglish/article/details/106080875
版权

学习up

布局系列

Block、inline、inline-block

Block：区块元素

在这里插入图片描述
block：

  • 独占一行、左右不能够有元素与它并排，排序由上到下
  • 宽度默认会填充父容器的可用空间
  • 高度以里面的元素进行填充
  • 可以设置width和height
  • 常见标签
    • div、p、h1-h6、ul

在这里插入图片描述

inline：内联元素

inline：

  • 不独占一行、左右能够有元素与它并排
  • 宽度根据它包含内容而定，不能用witch、height
  • 常见标签
    • span、a、strong
      在这里插入图片描述

inline-block

可以设置高度和宽度、也可以进行并排

例子：超链接例子

a {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: black;
    color: blanchedalmond;
    text-decoration: none;
    border-radius: 25px;
}

在这里插入图片描述

对齐方法

<head>
	<style>
        div {
            width: 50%;
            /* 这两个属性可以将这个block居中 */
            margin-left: auto;
            margin-right: auto;
            /*隐藏元素*/
            display:none;
        }

        span {}

        strong {
            display: inline-block;
        }

        div,
        strong,
        span {
            background-color: black;
            color: white;
        }

        body {
            /* 此时block只有里面的文字居中对齐，元素本身并没有水平居中 */
            /* block本身并没有没有text-align属性，所以继承了父容器的text-align */
            text-align: center;
        }
    </style>
</head>

<body>
    <div>Block</div>
    <span>Inline</span>
    <br>
    <strong>inline-block</strong>
</body>

在这里插入图片描述
在这里插入图片描述

居中

左右居中

在这里插入图片描述

上下居中

Position Absolute
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 50%;
            /* 上下居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 如果只进行上面两部元素只是元素左上方对齐画面中心点 */
            /* 向左向上移动 */
            transform: translateX(-50%) translateY(-50%);

            background-color: black;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>Block</div>
</body>

在这里插入图片描述

Flexbox

Flexbox自带justfy-content（设定主轴）与align-items（设定）两个属性

body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

div {
    width: 50%;
    background-color: black;
    color: white;
    text-align: center;
}

效果同上
Display Table

HTML的Table元素有一个vallign的属性，用来设定垂直方向的对齐

通过将其他元素设置为Table来进行使用

body {
    display: table;
    width: 100%;
    min-height: 100vh;
    margin: 0;
}

/* 成为表格的存储格 */
.cell {
    display: table-cell;
    /* 垂直居中 */
    vertical-align: middle;
    text-align: center;
}

.black {
    width: 50%;
    background-color: black;
    color: white;
    text-align: center;
}
  • Position Absolute（对齐元素本身）
  • Flexbox（对齐元素本身）
  • Display Table（对齐元素本身）

盒子模型content、padding、border、margin

content：元素的内容

border：边框

padding：元素与边框的距离（内边距）

  • 设定一个值：-top、-left、 -right、-bottom

  • 两个值：上下、左右

  • 三个值：上、左右、下

  • 四个值：顺时针

margin：指其他元素与边框的距离（外边距）

如何分辨什么时候用margin和padding？

如果有背景颜色：padding是背景颜色会覆盖到的地方，margin不会

如果元素是可点击的（如超链接）：padding的部分会纳入可点击范围，margin不会

对与inline元素的注意事项

margin：只对左右元素有效

padding：覆盖了上一行与下一行的元素了（边距重叠）

inline属性并不会影响垂直方向的版面布局

inline-block

正常预期

Margin auto：居中block元素

  • 当margin-bottom遇上margin-top，就会将两个margin距离重叠，保留距离较大的尺寸
  • 如果要不重叠，要在之间添加一个有高度的元素

Box-Sizing

默认是content-box

border-box：在设定包括padding或框线很有用
在这里插入图片描述

Position：定位

分类

  • static：默认值
  • absolute
  • relative
  • fixed
  • sticky

static

static会跟随HTML排版的流程(flow)移动
在这里插入图片描述

Absolute

不会跟随HTML排版的流程移动，并没有影响absolute元素的位置

但如果absolute元素所在之容器是有滚动条的话，会随着滚动条移动

两份absolute如果位置相同会进行重叠

在这里插入图片描述

如果嵌套的话里面的那一层会跟着外面的那一层进行定位

在这里插入图片描述

relative

  • 会跟随HTML排版流程去定位

  • 还可以再透过top、left、right、bottom去调整位置（比static多的）

  • 可以让absolute子晁素根据它的位置去定位（比static多的）

在这里插入图片描述

Fixed

fixed会定位到荧幕中的固定位置

如果fixed元素有设定top、left、right、bottom的属性，即使放在relative里面，fixed也会根据页面。即是body去定位

sticky

sticky会在卷动的过程中，当贴到顶部的时候，固定在顶部（top：0）
在这里插入图片描述

Grid 网页布局

  • Flexbox属于一维的排版方式
  • 而Grid则是二维的排版方式：可以一次控制两个方向

grid-template-rows：代表垂直方向的设定

grid-template-colunns：代表水平方向的设定
在这里插入图片描述
建议先定义row再定义column，原因在于grid-row与grid-column有一个简写的方法，名为grid-area
在这里插入图片描述
grid-column: 2 / span 3；
在这里插入图片描述

Grid Line（可以以命名划分）

在这里插入图片描述

grid- template-areas：区域划分

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

fr&repeat()

fr:比例单位

repeat()：定义相同的比例空间

在这里插入图片描述

Don’t care.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
八大体系渠道篇·电商多渠道布局系列线上课，渠道放大，多渠道布局
10-08
课程内容： 001.第一讲综合电商时代.mp4 002.第二讲天猫超市渠道.mp4 003.第三讲1688批发渠道.mp4 004.第四讲天猫国际渠道.mp4 005.第五讲跨境电商渠道.mp4 006.第六讲拼多多京东渠道.mp4 007.第七讲社区社群团购...
iOS 12 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束-附件资源
03-05
iOS 12 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束-附件资源
CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 6063
本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第一种方案，后边会写一篇博客写第二种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局 浮动布局 圣杯布局 双飞翼布局 表格布局（不推荐） 绝对定位布局（不推荐）
CSS之布局系列--三列布局(中间固定，两边自适应)--方法/实例
IT利刃出鞘的博客
11-28 2068
​ 本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第2种方案。 中间固定，两边自适应，一般不太常用。比如：一个网站要适应不同的电脑屏幕大小，一般是确定两边的宽度，中间去适应。 中间固定，两边自适应，一共有如下几种方案： flex布局（推荐） 浮动布局（float）
Android 布局系列篇
qq_27494201的博客
11-13 1134
文章目录1、LinearLayout 线性布局2、RelativeLayout 相对布局3、ConstraintLayout 约束布局4、AbsoluteLayout 绝对布局5、GridLayout 网格布局6、TableLayout 表格布局7、FrameLayout 帧布局8、Java编写布局 1、LinearLayout 线性布局 LinearLayout 线性布局 2、RelativeLayout 相对布局 RelativeLayout 相对布局 3、ConstraintLayout 约束布局 C
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 7925
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
前端布局系列---居中布局的多种实现方式
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
07-25 1023
布局是指HTML的整体结构，好的布局直接影响到用户的体验，同样，在前端面试的过程中，布局也是一个必问点，所以，在这里小编进行了统一整理，形成一个布局系列博客，主要包含以下布局方式： ①居中布局（水平居中布局、垂直居中布局、水平+垂直居中布局） ②多列布局（两列布局、三列布局、圣杯布局+双飞翼布局、等分布局、等高布局、css多列布局） 欢迎其他伙伴进行补充！ 0.搭建基本格式代码 一个父盒子套一个子盒子，代码如下： <html lang="en"> <head> <
CSS布局系列四：网格布局
betty_grant的博客
06-02 1395
概念 弹性盒子由容器和子元素组成。 容器(Flex container)：通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 子元素(flex item)：容器中的每个单元称为子元素 容器中存在两条多轴：主轴（默认水平方向）和侧轴（默认垂直方向） ———————————————— 版权声明：本文为CSDN博主「betty_grant」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csd
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
IT利刃出鞘的博客
12-24 1672
本文介绍前端的布局的常用方案的概念、优缺点、适用场景等。
CSS布局系列三：flex布局
betty_grant的博客
01-25 2036
Flex布局 概念 弹性盒子由容器和子元素组成。 容器(Flex container)：通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 子元素(flex item)：容器中的每个单元称为子元素 容器中存在两条轴：主轴（默认水平方向）和交叉轴（默认垂直方向） 设置容器的属性 flex-direction：设置容器中元素的排列方式 row(默认值)：横向布局（主轴水平），起点在左端 row-reverse：横向布局（主轴水平），起点在右端 col
vue vue-element-ui组件 layout布局系列学习(一)
热门推荐
然而老干妈早就看穿了一切
04-04 17万+
本文仅供参考： 首先你要掌握的基础知识: row 行概念 <el-row></el-row> col列概念 <el-col></el-col> col组件的:span属性的布局调整,一共分为24栏: 代码示例: <el-row> <el-col :span="24"><div class="g...
BootStrap4布局系列之布局容器
爱喝水的qdy的博客
11-24 834
目录官方地址通用布局容器全宽布局容器响应式布局容器总览 官方地址 https://v4.bootcss.com/docs/4.3/layout/overview/ 通用布局容器 .container 全宽布局容器 .container-fluid 响应式布局容器 将在v4.4版本中上线 .container-sm .container-md .container-lg .containe...
信息技术-通信：国内硬科技厂商元宇宙布局系列报告（七）-移动云VR正式落地，硬核解锁元宇宙.pdf
02-19
报告还提到了中国移动在元宇宙布局系列报告中的其他内容，包括关注5G、AIoT、云计算在冬奥会的应用，数字经济顶层规划对元宇宙算力和带宽需求的影响，海外云厂商在元宇宙办公和基础架构端的布局，以及与头部互联网...
信息技术-通信：国内硬科技厂商元宇宙布局系列报告（一）：通信龙头在元宇宙XR端的布局.pdf
12-26
信息技术-通信：国内硬科技厂商元宇宙布局系列报告（一）：通信龙头在元宇宙XR端的布局.pdf
网站基本布局CSS
m0_46608027的博客
07-24 776
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 273
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
CSS实现表格无限轮播
最新发布
像鱼的博客
07-24 200
在React中，用CSS实现表格无线轮播
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1315
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1292
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
Android界面布局：线性布局与相对布局解析
此外，还有`android:layout_alignParent*`系列属性用于相对父布局的位置，以及`android:layout_alignWithParentIfMissing`等其他对齐选项，这些使得相对布局具有高度灵活性和精确控制能力。 帧布局（FrameLayout）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值