栅格式布局实现原理（理解）

最新推荐文章于 2020-09-10 15:59:14 发布
最新推荐文章于 2020-09-10 15:59:14 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liguixl/article/details/88825277
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        .col_12,.col_6,.col_4,.col_3,.col_2,.col_1{
            float: left;
        }
        .divh{
            height: 50px;
            width: 100%;
            background: #DDA0DD;
            margin: 10px 0;
        }
        .col_12{
            width: 8.333%;
            height:100%;
        }
        .col_6{
            width: 16.6666%;
            height:100%;
        }
        .col_4{
            width: 25%;
            height:100%;
        }
        .col_3{
            width: 33.3333%;
            height:100%;
        }
        .col_2{
            width: 50%;
            height: 100%;
        }
        .col_1{
            width: 100%;
            background: #0769AD;
            height: 100%;
        }
    </style>
    <body>
        <div class="divh">
            <div class="col_1"></div>
        </div>
        <div class="divh">
            <div class="col_2" style="background: #000000;"></div>
            <div class="col_2" style="background: #000088;"></div>
        </div>
        <div class="divh">
            <div class="col_3" style="background: darkgoldenrod;"></div>
            <div class="col_3" style="background: #3CBE7F;"></div>
            <div class="col_3" style="background: #A1A3AE;"></div>
        </div>
        <div class="divh">
            <div class="col_4" style="background: darkgoldenrod;"></div>
            <div class="col_4" style="background: #3CBE7F;"></div>
            <div class="col_4" style="background: #A1A3AE;"></div>
            <div class="col_4" style="background: #0000DE;"></div>
        </div>
        <div class="divh">
            <div class="col_6" style="background: darkgoldenrod;"></div>
            <div class="col_6" style="background: #3CBE7F;"></div>
            <div class="col_6" style="background: #A1A3AE;"></div>
            <div class="col_6" style="background: #0000DE;"></div>
            <div class="col_6" style="background: #600000;"></div>
            <div class="col_6" style="background: #AC2925;"></div>
        </div>
        <div class="divh">
            <div class="col_12" style="background: darkgoldenrod;"></div>
            <div class="col_12" style="background: #3CBE7F;"></div>
            <div class="col_12" style="background: #A1A3AE;"></div>
            <div class="col_12" style="background: #0000DE;"></div>
            <div class="col_12" style="background: #600000;"></div>
            <div class="col_12" style="background: #AC2925;"></div>
            <div class="col_12" style="background: darkgoldenrod;"></div>
            <div class="col_12" style="background: #3CBE7F;"></div>
            <div class="col_12" style="background: #A1A3AE;"></div>
            <div class="col_12" style="background: #0000DE;"></div>
            <div class="col_12" style="background: #600000;"></div>
            <div class="col_12" style="background: #AC2925;"></div>
        </div>
        
        <!-- 不按规则来的-->
        <div class="divh">
            <div class="col_2" style="background: #000000;"></div>
            <div class="col_2" style="background: #000088;">
                <div class="col_6" style="background: darkgoldenrod;"></div>
                <div class="col_6" style="background: #3CBE7F;"></div>
                <div class="col_6" style="background: #A1A3AE;"></div>
                <div class="col_6" style="background: #0000DE;"></div>
                <div class="col_6" style="background: #600000;"></div>
                <div class="col_6" style="background: #AC2925;"></div>
            </div>
        </div>
        
        <div class="divh">
            <div class="col_2" style="background: #000000;"></div>
            <div class="col_2" style="background: #000088;">
                <div class="col_2" style="background: #0000DE;"></div>
                <div class="col_2" style="background: #000088;"></div>
            </div>
        </div>
        
    </body>
</html>

程晓堂
关注
专栏目录
浅谈CSS 栅格系统布局原理分析
09-27
【CSS 栅格系统布局原理分析】 在网页设计中，CSS 栅格系统是一种常见的布局方式，它使得页面设计能够适应各种屏幕尺寸，提供了一种响应式的解决方案。本文将深入探讨CSS栅格系统的基本原理，并以Bootstrap、...
基于grid布局实现的响应式栅格系统
09-10
结合媒体查询，我们可以设置不同的断点，在不同屏幕尺寸下应用不同的栅格布局。例如，对于小屏幕设备，可能需要将12列变为4列，以保持内容的可读性和易用性。 7. Grid Auto-Flow与Auto-Columns/Rows： CSS Grid还...
css栅格布局原理
weixin_30295091的博客
09-20 377
1、Reset.css–样式重置 Reset.css的定义： The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With C...
深入理解BootStrap之栅格系统（布局）
热门推荐
秋水不寒的专栏
05-26 2万+
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
【转及总结】Bootstrap 框架 栅格布局系统底层设计原理
weixin_30235225的博客
08-26 454
如果你是初次接触Bootstrap，你一定会为它的栅格布局感到敬佩。事实上，这个布局系统提供了一套响应式的布局解决方案。 既然这么好用，那他是如何用CSS来实现的呢？ 我特意去Bootstrap官方下载了源代码进行分析了一番，看完之后果然有了收获，不过我只看了栅格布局的那块代码，其实也很简单，不必担心不懂，你只需要要基础的CSS知识即可。 前提条件（Bootstrap 自带） 首...
CSS：谈谈栅格布局
weixin_34334744的博客
07-05 140
　　检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的bootstrap栅格布局。 　　圣杯布局 　　圣杯布局是一种三列布局，两边定宽，中间自适应： 1 * { 2 box-sizing: border-box; 3 } 4 html, body{ 5 width: 100...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
weixin_30700099的博客
02-20 106
这个标题取的有点奇怪，怪我翻译的有问题吧。英文学平有限，有道词典和google翻译齐上阵是必须的。还好翻译的不是小说，对于技术文章，还是能勉强翻过来的。 本文主要讲解了Bootstrap3.0的栅格布局系统实现原理，以及使用过程中应该注意的问题。 开始...翻译.. 像CSS栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，除非你有了比较烂的设计或者一些...
使用React代码动态生成栅格布局的方法
10-15
在React开发中，动态生成栅格布局是一种常见的需求，它能根据数据变化或者用户操作灵活地调整页面元素的展示方式...对于初学者，这是一个很好的实践案例，有助于理解和掌握React的生命周期、状态管理以及CSS布局原理。
Layout一套响应式栅格化布局方案提供1X2x3x4x5栅格排布
08-10
通过研究这些文件，开发者可以学习到如何在实际项目中应用响应式栅格布局。 总结起来，"Layout一套响应式栅格化布局方案提供1X2x3x4x5栅格排布"是一个综合了Flexbox、Grid布局和响应式设计的实践案例。通过理解和...
bootstrap3.0教程之栅格系统原理(布局)
09-25
在实际编码时，创建一个简单的Bootstrap栅格布局通常包括以下步骤： 1. 创建一个 `.container` 或 `.container-fluid`。 2. 在容器内添加 `.row`。 3. 在行内添加列（column）类，根据需要指定屏幕尺寸的宽度。 4. ...
【css笔记】bootstrap栅格系统布局原理
kikikiuu的博客
09-10 1464
你们知道bootstrap栅格系统布局的原理吗？ 今天突然被老大问了一下，有点记忆混淆了，特此记录 如果你是第一次接触bootstrap，你一定会为他的栅格化布局感到敬佩，他为我们提供了一套响应式的布局方案。 bootstrap栅格系统布局 简单地讲： 1、Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 2、网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最.
栅格化系统的原理以及实现
weixin_30670965的博客
04-04 774
更多技术文章 什么是栅格化 在一个有限的、固定的平面上，用水平线和垂直线（虚拟的线，“参考线”），将平面划分成有规律的一系列“格子”（虚拟的格子），并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。 通俗点来说，就是人为的把网页中的一行，等比例划分,比如将一行划分为 12 等分。然后在每个格子里进行页面开发，这就栅格化。 原理 假如在页面里定义了一个 DIV，并设置如下 ...
【Web】Bootstrap栅格布局系统设计原理
WHUZXQ的博客
05-21 1455
这个布局提供了一套响应式布局解决方案。一. 前提被定义的元素内边距和边框不再会增加它的宽度。* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }二.容器container padding-right: 15px; padding-left: 1
bootstrap栅格系统布局原理
u013809856的博客
11-23 7054
简介 栅格系统用于通过一系列的行（row）与列（col）组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面介绍一下栅格bootstrap栅格系统的工作原理： 行（row）必须放在.container（固定宽度）或.container-fluid（100%宽度）内，以便为其赋予合适的排列（aligment）和内补（padding）; 通过“行（row）”在水平方向创建一组“列（co...
栅格布局和知识点
mslmhl的博客
12-02 1205
栅格布局 工作原理 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这“行（row）”必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋与合适的排列（aligment）和内补（padding）。 通过“行（row）”在水平方向创建一组“列（column）”。 你的内容应当放置于“列（column...
bootstrap栅格式布局
能能的代码日常
11-20 675
根据屏幕大小切换布局<!DOCTYPE html> <html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 屏幕自适应--栅格布局 </title> <link rel="
栅栏式布局
procedure_1988的博客
04-17 1120
Bootstrap 101 Template<!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> 一半 D
bootstrap学习之布局（栅格布局）
qq_42251308的博客
06-15 650
bootstrap学习之布局（栅格布局） 今天自己在网上学习了BOOTSTRAP栅格系统，很有体会，希望将自己的学习心得写写下来供自己日后参考学习 1.什么是栅格布局？ 以前的网页制作布局用的是tabel布局，通过把表格将网页分为大大小小的表格，再从表格中填充元素。后来发展为div+css布局。通过div+css浮动。flaot:right和float:left.布局。现在bootstrap运用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值