css中布局方式总结

详解css布局实现左中右布局的5种方式 主要介绍了详解css布局实现左中右布局的5种方式的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 立即下载

问题

要实现如下的布局。有几种方案可以选择呢?
这里写图片描述

方案一

css中前”世纪”的布局方式-table,这种布局方式不利于SEO,代码量比较大。

<style type="text/css">
    .content{width: 960px;margin: auto;}
    .content-list{width: 300px;background-color: #4598BF;height: 300px;vertical-align: top;}
    .content-pad{width: 30px;background-color: #7ACE2D;height: 300px;}
    .middle-pad{width: 100%;height: 20px;}

</style>
<body>
<table class="content">
    <tr>
        <td class="content-list">1</td>
        <td class="content-pad"></td>
        <td class="content-list">2</td>
        <td class="content-pad"></td>
        <td class="content-list">3</td>
    </tr>
    <tr class="middle-pad"></tr>
    <tr>
        <td class="content-list">4</td>
        <td class="content-pad"></td>
        <td class="content-list">5</td>
        <td class="content-pad"></td>
        <td class="content-list">6</td>
    </tr>
</table>

这里写图片描述

方案二

css中经典布局div+float,使用float后。会使该标签脱离文档流(不按照正常的显示方式显示),后果就是父元素不能自适应高度。需要清楚子元素浮动.

ul{list-style:none;}
ul li{float: left;}
.content{width: 960px;margin: auto;}
.content li{width: 300px;margin-left: 20px;background-color: #7ACE2D;margin-bottom: 30px;height: 300px;}
.clearfix:after{content: ".";clear: both;height: 0;visibility: hidden;display: block;}
/*.clearfix{overflow: hidden;}*/
/*.clearfix{clear: both;}*/
</style>
<body>
    <ul class="content clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul class="content clearfix">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

这里写图片描述

方案三

使用inline-block,行内块布局。会造成元素间距,具体的解决方案
去除inline-block元素间间距的N种方法

<style type="text/css">
/*ul li{margin: 0px;padding: 0px;}*/
/* * {margin: 0px;padding: 0px;}*/
ul li{display: inline-block;}
.content{width: 960px;margin: auto;}
.content li{width: 300px;margin-left: 20px;background-color: #7ACE2D;margin-bottom: 30px;height: 300px;}
</style>
<body>
    <ul class="content">
        <li>1
        <li>2
        <li>3</li>
    </ul>
</body>

这里写图片描述

方案四

使用css3中的盒布局,盒布局能解决使用float或者position属性时左右两栏或多栏不能对其的问题。

<body>
<style type="text/css">
ul{list-style:none;}
.content{display: -moz-box;display: -webkit-box;width: 960px;margin: auto;}
.content li{width: 300px;margin-left: 20px; }
.content li:nth-child(1){background-color: #7ACE2D;}
.content li:nth-child(2){background-color: #4559BF;}
.content li:nth-child(3){background-color: #D62B5F;}

</style>
<ul class="content">
    <li>gglinux,gglinux,gglinux
        gglinux,gglinux,gglinux
        gglinux,gglinux,gglinux
        gglinux,gglinux,gglinux</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>

这里写图片描述

就这样吧,css3中还有两种布局方式。
多栏布局:可以将一个元素中的内容分成多栏显示,并且确保各栏中的内容底部对齐。
弹性盒布局:可以保证容器的高度和宽度与浏览器的自适应性。

【异常】安装OpenClaw遇到 Windows环境pnpm安装node-llama-cpp postinstall生命周期脚本执行失败完整解决方案 摘要: Windows环境下使用pnpm安装node-llama-cpp时,postinstall脚本执行失败(错误码3221225477),主要因缺少C++编译工具链或预构建二进制下载失败。解决方案: 基础排查:确保管理员权限、Node.js ≥18、路径无中文; 安装编译工具:推荐Visual Studio的“C++桌面开发”组件或windows-build-tools; 环境变量配置:强制CPU模式+国内镜像(NODE_LLAMA_CPP_FORCE_CPU=true,镜像地址替换为国内源); pnp 阅读详情

相关推荐

国产化办公新选择:在银河麒麟V10上部署ToDesk远程桌面

本文详细介绍了在国产操作系统银河麒麟V10上部署ToDesk远程桌面的完整指南。作为国产远程控制工具,ToDesk在连接速度、系统适配性和用户体验方面表现优异,特别适合国产化办公场景。文章包含X86和ARM架构的安装步骤、常见问题排查及性能优化技巧,帮助用户高效实现远程办公。

weixin_33742618的博客 232

7种web前端页面css(css3)布局方式,不知道最后两种方式的就亏大了

前端页面常见的布局方式有以下几种 1、文档流 --内联元素从左往右排列,块级元素从上往下排列。 2、float(浮动)布局 3、position (定位)布局 4、display inline-block (行向)布局 5、margin 布局 6、display:flex 弹性布局 7、display:grid 栅格布局

qq_34171965的博客 3506

告别命令行恐惧!用nTopology可视化工具5分钟搞定三维Voronoi泡沫建模

本文介绍如何利用nTopology可视化工具快速生成三维Voronoi泡沫结构,无需编程即可完成复杂建模。Voronoi结构在轻量化设计、能量吸收和生物医学等领域具有重要应用,传统命令行方法门槛较高。通过nTopology的四步流程,用户可在5分钟内创建仿真就绪模型,大幅提升设计效率。

weixin_30764771的博客 426

css3的几种布局机制

1.浮动布局 浮动元素的特点(脱离文档流) 2. 定位布局 相对定位,绝对定位,固定定位,粘滞定位(相对点) 3. 伸缩盒布局 伸缩盒容器,伸缩盒元素 4. 栅格布局(第三方布局机制,利用浮动布局或者定位布局封装的企业级布局机制) ...

C05230的博客 1445

深度篇——图像处理的一些方法(一) 关于 图像处理的三个层次 与 selective search

返回主目录 返回 图像处理的一些方法 目录 下一章:深度篇——图像处理的一些方法(二)细说性能评估 IOU和 GIOU 目录内容 深度篇——图像处理的一些方法(一)关于图像处理的三个层次 与 selective search 深度篇——图像处理的一些方法(二)细说性能评估 IOU和 GIOU 深度篇——图像处理的一些方法(三)细说 HOG特征与bag-o...

天下所弃,不过其纪。世间事,在人,在志。 2917

蓄热式加热炉燃烧技术

蓄热式加热炉燃烧技术

weixin_37928884的博客 2733

分享10个常见的CSS3页面布局

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;瀑布流也是一种很常见的布局,尤其是在图片信息流的产品,以往如果要完美的实现瀑布流,我们需要费不少的功夫,还要借助JS进行实现。两列布局,左边是导航栏目,右边是内容部分。尤其在后台的场景,是非常常用的。圣杯布局,不用我多说,想必每个前端人都做过这样的页面结构,如下图所示。如下图所示,卡片布局是我们常见的一种页面布局。

黑马程序员官方博客 3815

不提交也不释放的事务,数据库连接还有可能被复用

摘要 实验发现Spring事务管理下,未提交事务的数据库连接池连接仍可被复用,这与传统认知相悖。通过配置HikariCP连接池(最大2连接)并设计测试接口,观察到未提交事务的连接会被后续请求复用。这可能导致GTID错误(当MySQL开启GTID且混用事务/非事务表时)以及数据修改丢失问题。研究揭示了Spring事务管理机制与连接池交互的特殊行为,对高并发系统设计具有重要启示。

蔡定努 176

CSS的三大布局方式(流式布局,浮动布局和层布局)

文章目录前言一、标准文档流二、三种布局方式1.流式布局2.浮动布局(1)字围效果(2)圣杯布局3.层布局定位的分类:(1) 相对定位 position:relative(2) 绝对定位 position:absolute(3) 固定定位 position:fixed(4) 静态定位 就是不定位 默认的三、浮动元素会造成影响:1.对父元素造成的影响解决方法2.对兄弟元素造成的影响解决方法四、浮动元素的特性 前言 布局:所谓的布局,就是指把一个盒子放在合适的位置。 在CSS2.0中,有三大布局: (1..

originalApril的博客 7797

【CANdelaStudio编辑CDD】-2.2-给$27服务SecurityAccess创建一个SecurityLevel安全级别并修改SecurityAccess安全访问状态机(UDS诊断)

前一篇: 【UDS诊断描述文件CDD】-2.1-ISO_14229中$27服务理论部分https://blog.youkuaiyun.com/qfmzhu/article/details/120392660 案例背景: 在CDD中如何给$27服务创建一个新的SecurityLevel安全级别; 在CDD中如何给$27服务修改SecurityAccess安全访问状态机。 1 查看$27服务中已有的SecurityLevel安全级别 2 查看$27服务中已有的SecurityAccess安全...

「汽车电子助手」的博客 4642

PyTorch 面试题及参考答案(精选100道)

模块是 PyTorch 中用于自动求导的核心模块。它为张量上的所有操作提供了自动求导的功能。在深度学习中,反向传播是一种用于计算损失函数相对于模型参数的梯度的算法。通过梯度,我们可以使用优化算法(如随机梯度下降)来更新模型的参数,从而最小化损失函数。模块的主要作用就是自动计算这些梯度。当我们创建一个张量时,如果将其属性设置为True,那么 PyTorch 会跟踪该张量上的所有操作。在完成前向传播计算出损失函数后,调用方法,模块会自动根据链式法则反向传播计算出所有需要求导的张量的梯度。

大模型大数据攻城狮的专栏 1681

CSS3布局方式介绍

CSS3布局方式介绍

cnds123的专栏 1741

Qt实现思维导图功能5『纵向分布模式』

思维导图纵向分布模式:模式一

浮生流年的博客 1057

CSS的几种布局方式

概述:常用css布局方式有这几种:标准流布局、浮动布局、定位布局、弹性布局、网格布局、多列布局、响应式布局。

weixin_61149547的博客 3534

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

css的3种布局方式

无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。 1.文档流布局方式,这是最基本的布局方式,就是按照文档顺序一个一个地显示,块元素独占一行,内联元素共享一行。 2.浮动布局方式,某个元素浮动之后,其后面的元素就当其不存在而占用其原来的地方,按照原来文档流布局方式布局。 ...

熊诗言的博客 7077

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

常见 五大CSS 布局方式 总结

常见 五大CSS 布局方式 总结 之所以总结是因为最近也是在看css方面,让我迷惑的是有很多文章 关于布局名词都没有听说过,工作中也很少用。但是我们要与时俱进,叫的多了,它就成为正式名词了。比如 '双飞翼 '圣杯’??并且我还发现我几乎看了好多文章,他们在从大的角度总结时候,几乎很少有相同,分类角度不尽相同。其实这也没关系,本来就没有一个统一标准,但是还是希望有个相对能够理解 概括角度看c...

tzllxya的博客 8016

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

CSS常见的布局方式

CSS中常见布局方式有哪些?下面本篇文章就来给大家介绍一下CSS中的常见布局方式,希望对大家有所帮助。 在介绍CSS布局方式之前我先简单说明一下html中的三种布局方式: 流动布局(默认) 浮动布局(float) 定位布局(position) 好了,这里就不详细介绍这三种布局了,今天我们的重头戏是探索CSS中常见的布局方式有哪些? 一、单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content .

BYGFJ的博客 3247

css 布局方式

【代码】css 布局方式。

print_2022的博客 802

CSS3中新增了哪些布局方式?

CSS3中新增了多种布局方式,这些布局方式极大地丰富了前端开发中的页面布局手段,使得开发者能够更加灵活地构建响应式、自适应和高效的网页布局。

Good_tea_h的博客 951

CSS布局方式

CSS有三种布局方式: 1.默认文档流方式 以默认的html元素的结构顺序显示 2.浮动布局方式 通过设置html元素的float属性显示 3.定位布局方式 通过设置html元素的position属性显示 ...

weixin_44115149的博客 138

css五大布局方式详解

css布局方式 table布局 float布局 flex布局 响应式布局 Grid布局 table布局 table布局在如今已经很少使用,原因是:table布局比其它html标记占更多的字节,会阻挡浏览器渲染引擎的渲染顺序,会影响其内部的某些布局属性的生效。 使用table布局有两种方式 table标签 display:table 标签与js的对应 table { display: table } tr { display: table-row } thead { displ

lin1072368472的博客 1万+

CSS几种常见的页面布局方式介绍

问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局); rem布局(一般都是flex+rem使用的比较多); 响应式布局(响应式布局的原理,和适配方案必修掌握); 固定布局 / 流式布局(百分比布局)/ 浮动布局 / 定位布局; Flexbox布局 flex布局又称弹性盒子,简单代码量少,可以不用左右浮动了 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,让你可以调节伸缩项目的相对大小和位置。例如,你可以确保伸缩容器中的多余

Aa112233aA1的博客 2267

HTML+CSS 五种布局方式

HTML+CSS 五种布局方式 转载 winne雪

qq_42828776的博客 389

22-布局方式介绍(CSS3)

1. 了解CSS属性书写顺序; 2. 熟悉布局方式,能根据不同场景选择不同的布局方式; 3. 掌握弹性布局和栅格布局。

2401_87131285的博客 912

css三种布局方式

css几种布局方式 流体布局 left和right都是浮动元素(脱离文档流),漂浮于普通文档流上方,使其盖住main设置的margin main(普通文档流)左右两边设置margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流体布局</title> </head> <body> <div c

weixin_45272209的博客 1374

css常见布局方式

CSS 的布局应该是 CSS 体系中的重中之重,主要的布局方式有 table 表格布局(早期),float 浮动布局、position布局和 flex 布局。布局方式优点缺点浮动布局兼容性好,支持大多数浏览器;可以实现多列布局。容易出现清除浮动问题,需要额外的样式规则来处理;不太适合复杂的布局需求,例如垂直居中和等高布局。定位布局灵活性较高,可以精确控制元素的位置;可以实现重叠布局效果。对于复杂布局,需要手动计算和调整元素的位置和尺寸。

DZQ1223的博客 4523
上一篇: html5 总结-新增重要标签及属性
下一篇: html5-file样式
gglinux
博客等级 码龄14年 68粉丝 64原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值