水平布局、垂直布局

已于 2022-08-05 18:53:37 修改
阅读量144 收藏
点赞数 1
文章标签： javascript html 前端
于 2022-08-05 18:53:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Moerin_/article/details/126183676
版权

目录

水平布局

垂直布局

水平布局

元素的水平方向的布局

       元素在其父元素中水平方向的位置由一下几个属性共同决定

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

    一个元素在其父元素中，水平布局必须要满足以下的等式

    margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

        =父元素内容区的宽度（必须满足）

如果相加结果等式不成立，则称为过度约束，则浏览器会让等式自动调整。

  1:如果七个值中没有auto情况，则浏览器会调整margin-right值以使等式满足

   2:这7个值中width，margin-left，margin-right，这三个值可以设置auto。 如果有设置auto，则浏览器会自动调整auto的值，以使等式成立。

   3:如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大

   4:如果三个值都是auto，也只会调整宽度

   5:如果将两个外边距设为auto，宽度固定，则两侧外边距会设置为相同的值会使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto。

垂直布局

默认情况下，父元素的高度是被子元素撑开的，父元素设置了，则设置多少就是多少。

如果子元素的大小超过了父元素，则子元素会从父元素中溢出

        使用overflow属性设置父元素如何处理溢出的子元素

            可选值：

               visible  默认值  子元素会从父元素中溢出，在父元素外部的位置显示

               hidden   溢出的内容将会被裁剪不会显示

               scroll   生成两个滚动条，通过滚动条来查看完整的内容

               auto     根据需要生成滚动条

Moerin_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android线性布局水平布局,andriod： 线性布局中的垂直于水平布局问题
weixin_42515739的博客
05-26 2382
1.线性布局--- LinearLayout：LinearLayout按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前一个元素之后。如果是垂直排列，那么将是一个N行单列的结构，每一行只会有一个元素，而不论这个元素的宽度为多少；如果是水平排列，那么将是一个单行N列的结构。如果搭建两行两列的结构，通常的方式是先垂直排列两个元素，每一个元素里再包含一个LinearLayout进行水平排列。xm...
水平和垂直方向布局效果
04-03
2. **垂直布局**：将视图自上而下排列，同样可以控制视图间的垂直间距，或者让它们根据内容自动扩展。 3. **弹性布局**：支持视图的弹性伸缩，当内容改变或屏幕尺寸变化时，视图能自动适应新尺寸。 4. **响应式布局*...
两种垂直布局~详细
weixin_46370867的博客
10-19 686
垂直布局 第一种实现垂直布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一种实现垂直布局</title> <style> /
线性布局实现垂直分布
程序媛
03-29 3480
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_par
CSS——水平布局和垂直布局
surymy
11-17 3843
水平布局 子元素在其父元素中水平方向的位置由以下几个属性共同决定： 为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width <head> <meta charset="UTF-8"> <title>Surymy</title> <style> .box1{ width:280px; height:200px;
layout_weight设置垂直分布的三个布局
black_dreamer的专栏
07-13 2913
今天在做手机商城订单改版，结果被一个Scrollview深深的伤害了…… 首先问题是这个，垂直分布的三个布局： 本来预计的效果图是这样的： 结果是最下面的LinearLayout死活不显示，悲剧啊 然后没办法咯，换成相对布局RelativeLayout，以为可以用layout_below和layout_above属性来干掉这个问题的，然而Useless，后来又改成FrameLayou
QT 网格布局 水平布局 垂直布局
希哈科技
04-09 1954
QT水平布局：头文件&lt;QHBoxLayout&gt;#include &lt;QApplication&gt;#include &lt;QWidget&gt;#include &lt;QPushButton&gt;#include &lt;QLineEdit&gt;#include &lt;QHBoxLayout&gt;int main(int argc, char *argv[]){   ...
弹性布局水平垂直居中
热门推荐
于利文的博客
07-18 1万+
知识点 justify-content: center//子项在flex容器水平居中 align-items: center//子项在flex容器垂直居中 代码块 <div class="main"> <div class="maincon"> </div> </div> .main{ width: 100vw; hei...
android水平布局和垂直布局,Flutter布局篇（1）--水平和垂直布局详解
weixin_29363945的博客
05-26 1517
版权声明：本文首发在公众号Flutter那些事，未经授权，严禁转载。本文版权归作者AWeiLoveAndroid所有，未经授权，严禁私自转载。转载请声明原文链接和作者信息。转载请注明出处，谢谢合作先来看看本文的目录，如下图所示：在原生Android开发中，我们经常会用LinearLayout来达到水平或垂直方向的布局，在Flutter中有两个常用的组件也能够做到类似的效果，分别是Row和Colum...
使用弹性布局水平垂直居中
weixin_42520375的博客
12-11 1513
首先看代码 <style> .div1{ width: 100px; height:100px; background: palevioletred; display: flex; // 1 justify-content: center; // 2 align-items: center; // 3 } ...
PyQt5 表单布局+垂直布局+水平布局综合使用
只想整天学习
08-26 6354
本实例环境为PyQt5+Python3.5+ubuntu16 PyQt5布局有垂直布局(控件从上到下排列),水平布局(控件从左到右排列),表单布局(将两个空间对应一起布局)等布局,本实例通过创建QFormLayout布局将QLabel(标签)和QLineEdit(行编辑器)一一对应起来,label1对应lineEdit1水平排列起来,即label1和lineEdit1是一个整体,然后再将QFo...
Android应用借助LinearLayout实现垂直水平居中布局
09-02
LinearLayout是一种常见的布局方式，它允许开发者将子视图按照垂直或水平方向进行排列。本篇文章将详细讲解如何利用LinearLayout实现垂直水平居中的布局效果。 首先，要理解LinearLayout的基本属性。`android:...
浅谈最全面的水平垂直居中方案与flexbox布局
09-22
主要介绍了浅谈最全面的水平垂直居中方案与flexbox布局 的相关资料，主要介绍了定长定宽或不定长宽的各类容器的垂直居中以及flexbox，非常具有实用价值，需要的朋友可以参考下
收罗CSS布局中有关水平和垂直居中的N种方法
09-25
在CSS布局中，水平和垂直居中是网页设计中常见的需求。本文将详细介绍几种不同的方法，帮助你理解和掌握这些技巧。 首先，最常见的水平居中方法是通过设置元素的`margin`属性。例如，给元素设置固定宽度，并将`...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 601
注释很详细，直接上代码……
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 322
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 255
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 940
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 525
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
添加水平布局和垂直布局
07-13
要添加水平布局和垂直布局，可以使用QHBoxLayout和QVBoxLayout类。下面是修改后的代码示例： ```python import sys from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QHBoxLayout, QVBoxLayout class App(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setWindowTitle('My App') self.setGeometry(100, 100, 300, 200) # 设置窗口位置和大小 # 创建水平布局 hbox = QHBoxLayout() label = QLabel('Hello, PyQt5!', self) hbox.addWidget(label) # 将标签添加到水平布局 button1 = QPushButton('Button 1', self) hbox.addWidget(button1) # 将按钮1添加到水平布局 button2 = QPushButton('Button 2', self) hbox.addWidget(button2) # 将按钮2添加到水平布局 # 创建垂直布局 vbox = QVBoxLayout() vbox.addLayout(hbox) # 将水平布局添加到垂直布局 button3 = QPushButton('Button 3', self) vbox.addWidget(button3) # 将按钮3添加到垂直布局 self.setLayout(vbox) # 将垂直布局设置为窗口的主布局 self.show() if __name__ == '__main__': app = QApplication(sys.argv) ex = App() sys.exit(app.exec_()) ``` 在这个例子中，我们创建了一个水平布局`hbox`和一个垂直布局`vbox`。标签和按钮1、按钮2被添加到水平布局，然后将水平布局添加到垂直布局。最后，按钮3被添加到垂直布局。 通过将垂直布局设置为窗口的主布局，我们可以实现水平和垂直布局的组合。你可以根据需要添加更多的控件和调整布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值