【笔记】学习CSS布局01——没有布局

最新推荐文章于 2025-04-28 22:08:29 发布
原创 最新推荐文章于 2025-04-28 22:08:29 发布 · 223 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在网页设计中不使用布局时可能遇到的问题，特别是当浏览器窗口大小变化时，阅读体验受到影响的情况。文章强调了display属性的重要性，并鼓励读者通过调整浏览器窗口来体验不同布局效果。

                                              没有布局

如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。试着调整下浏览器窗口大小你就明白我的意思了！

在解决这个问题之前，我们需了解一个很重要的属性： display

原学习链接：http://zh.learnlayout.com/

狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
css网站布局实录学习笔记第三部分网页布局与定位
12-13
如今，接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说，做一个简单的布局只需要依赖两样东西：div与CSS。因此有人称CSS布局为div+css布局。 3.1.2 如何使用div 只需要应用<di
没有布局 怎么解决呢？
qq_43413728的博客
12-20 230
直接进去就ok https://blog.youkuaiyun.com/qq_35953420/article/details/84181669
html div无布局,CSS HTML Div布局问题
weixin_30704909的博客
06-23 165
我努力实现干净的代码，同时努力获得我想要的布局。CSS HTML Div布局问题我的当前代码不是与其他浮动div在页面上运行，而底部的文本和按钮部分不是内联显示，而是强制其他元素不在位置。我试过我的代码不同rehashings，但找不出它和我在那里我开始拉我的头发了点。我已经复制了下面的最新代码，减去底部的文本和按钮的div，因为我一直没有能够得到任何地方靠近右边。CSS：.sceneItem {...
CSS布局-1
11-10 892
如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。调整下浏览器窗口大小你就明白我的意思了！ 在解决这个问题之前，我们需要了解一个很重要的属性： display "display"属性 display 是CSS中最重要的用于控制布局的属性。
CSS学习笔记13——grid布局
最新发布
green_pine_的博客
04-28 330
简述grid网格式布局
CSS学习笔记6——网页布局
2401_88591507的博客
03-28 1284
CSS学习笔记6——网页布局
html&css学习笔记——CSS2基础
weixin_61182303的博客
11-03 1396
的位置，创建一个子元素（必须用 content 属性指定内容）。3.3选择器的优先级(权重)
【笔记】学习CSS布局09——float
二木成林
11-30 234
另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下： img { float: right; margin: 0 0 1em 1em; }   代码实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; div { bord...
CSS学习笔记九——布局形式
weixin_43328954的博客
02-04 759
两栏布局与三栏布局 一、两栏布局 将窗口划分为左右两栏，常用于左边为导航栏，右边为内容的形式。 设置左边固定，右边自适应宽高的布局 方法一：先设置窗口自适应，左边盒子设置固定宽度，右边盒子通过 margin-left 空出左边位置且宽度自适应，左右盒子均设置高度百分百及左浮动； 方法二：先设置窗口自适应，左边盒子设置固定宽度，右边盒子宽度设为 calc（100% - 左边盒子的固定宽度），左右盒子均设置高度百分百及左浮动； calc 函数用于动态计算长度值，其运算符前后需保留一个空格
【笔记】学习CSS布局13——百分比宽度
二木成林
11-30 967
百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; article { border:5px solid #fdc72f; overflow:auto; ...
学习标准——笔记
10-31
### 学习标准——笔记 #### 一、CSS布局技巧与注意事项 1. **对象具有浮动属性时的宽度处理：** - 当一个HTML元素（如`<div>`）设置了`float`属性后，该元素将脱离文档流，并且不再占据原来的位置空间。因此，在...
HTML5学习笔记（总结提炼版）——002 CSS
03-14
CSS提供了多种布局方式，包括流体布局（使用百分比定义元素尺寸，自适应屏幕大小）、定位布局（使用`position`属性，如`static`、`relative`、`absolute`和`fixed`）、Flex布局（弹性盒子，适用于一维布局）以及Grid...
【笔记】学习CSS布局15——inline-box
二木成林
11-30 1482
你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子： 困难的方式（使用浮动） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .box { float:left; ...
【布局】学习CSS布局12——浮动布局例子
二木成林
11-30 1106
完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。 nav { float: left; width: 200px; } section { margin-left: 200px; } 这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 na...
【笔记】学习CSS布局06——box-sizing
二木成林
11-29 461
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ： .simple { width: 500px; margin: 2...
【笔记】学习CSS布局16——inline-block布局
二木成林
11-30 445
你可以使用 inline-block 来布局。有一些事情需要你牢记： vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。 你需要设置每一列的宽度 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙 代码实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;st...
【笔记】学习CSS布局02——“display”属性
二木成林
11-29 394
                                           "display"属性 display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block...
【笔记】学习CSS布局04——max-width
二木成林
11-29 382
#main { max-width: 600px; margin: 0 auto; } 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！ 顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。   代码实例： &lt;!DOCTYP...
CSS入门学习笔记：从基础到布局实战
最后，笔记拓展至圣杯布局与双飞翼布局这两种经典的三栏自适应布局方案，均采用两侧固定宽度、中间自适应的设计思路，通过负边距与浮动配合实现，展现了早期CSS布局的智慧。尽管如今已被Flexbox和CSS Grid取代，但...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值