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

最新推荐文章于 2024-05-29 15:10:41 发布
最新推荐文章于 2024-05-29 15:10:41 发布
阅读量182 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123321/article/details/84592811
版权

                                              没有布局

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

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

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

二木成林
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
学习标准——笔记
10-31
### 学习标准——笔记 #### 一、CSS布局技巧与注意事项 1. **对象具有浮动属性时的宽度处理：** - 当一个HTML元素（如`<div>`）设置了`float`属性后，该元素将脱离文档流，并且不再占据原来的位置空间。因此，在...
没有布局 怎么解决呢？
qq_43413728的博客
12-20 175
直接进去就ok https://blog.csdn.net/qq_35953420/article/details/84181669
html div无布局,CSS HTML Div布局问题
weixin_30704909的博客
06-23 116
我努力实现干净的代码，同时努力获得我想要的布局。CSS HTML Div布局问题我的当前代码不是与其他浮动div在页面上运行，而底部的文本和按钮部分不是内联显示，而是强制其他元素不在位置。我试过我的代码不同rehashings，但找不出它和我在那里我开始拉我的头发了点。我已经复制了下面的最新代码，减去底部的文本和按钮的div，因为我一直没有能够得到任何地方靠近右边。CSS：.sceneItem {...
CSS布局-1
11-10 811
如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。调整下浏览器窗口大小你就明白我的意思了！ 在解决这个问题之前，我们需要了解一个很重要的属性： display "display"属性 display 是CSS中最重要的用于控制布局的属性。
【笔记】学习CSS布局09——float
二木成林
11-30 192
另一个布局中常用的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 594
两栏布局与三栏布局 一、两栏布局 将窗口划分为左右两栏，常用于左边为导航栏，右边为内容的形式。 设置左边固定，右边自适应宽高的布局 方法一：先设置窗口自适应，左边盒子设置固定宽度，右边盒子通过 margin-left 空出左边位置且宽度自适应，左右盒子均设置高度百分百及左浮动； 方法二：先设置窗口自适应，左边盒子设置固定宽度，右边盒子宽度设为 calc（100% - 左边盒子的固定宽度），左右盒子均设置高度百分百及左浮动； calc 函数用于动态计算长度值，其运算符前后需保留一个空格
【笔记】学习CSS布局13——百分比宽度
二木成林
11-30 811
百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; article { border:5px solid #fdc72f; overflow:auto; ...
CSS学习笔记：响应式布局的原理——媒体查询
最新发布
lbcbjtlhmjq的博客
05-29 496
在实际书写代码时，我们不会自己去手写媒体查询来实现响应式布局，我们一般会调用现成的代码库或使用现成的框架（但这些代码库或框架的底层原理是媒体查询，所以了解媒体查询也是很有必要的）当视口大小变化时，网页布局也随之变化以腾讯前端官网为例，当视口宽度逐渐缩小时，一行排列的盒子数量从4个减少到2个再减少到1个。
前端学习——CSS学习笔记（五）CSS布局定位
qq_53114527的博客
10-31 769
以上就是今天要讲的内容，本文仅仅简单介绍了CSS布局定位。
【笔记】学习CSS布局15——inline-box
二木成林
11-30 1349
你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子： 困难的方式（使用浮动） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .box { float:left; ...
css经典学习笔记.zip
11-01
盒模型是理解CSS布局的关键，它包括内容区域、内边距、边框和外边距。CSS3引入了新的盒模型——“border-box”，与默认的“content-box”模型有所不同，可以更灵活地控制元素大小。 四、布局技术 1. 流动布局...
css网站布局实录学习笔记第三部分网页布局与定位
12-13
如今，接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说，做一个简单的布局只需要依赖两样东西：div与CSS。因此有人称CSS布局为div+css布局。 3.1.2 如何使用div 只需要应用<di
HTML5学习笔记（总结提炼版）——002 CSS
03-14
CSS提供了多种布局方式，包括流体布局（使用百分比定义元素尺寸，自适应屏幕大小）、定位布局（使用`position`属性，如`static`、`relative`、`absolute`和`fixed`）、Flex布局（弹性盒子，适用于一维布局）以及Grid...
【布局】学习CSS布局12——浮动布局例子
二木成林
11-30 954
完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。 nav { float: left; width: 200px; } section { margin-left: 200px; } 这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 na...
【笔记】学习CSS布局16——inline-block布局
二木成林
11-30 339
你可以使用 inline-block 来布局。有一些事情需要你牢记： vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。 你需要设置每一列的宽度 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙 代码实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;st...
【笔记】学习CSS布局06——box-sizing
二木成林
11-29 333
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ： .simple { width: 500px; margin: 2...
【笔记】学习CSS布局04——max-width
二木成林
11-29 311
#main { max-width: 600px; margin: 0 auto; } 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！ 顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。   代码实例： &lt;!DOCTYP...
CSS入门与HTML5元素详解——第1天笔记
这一天的学习还涉及到了HTML的一些基本元素如img和a标签，这些都是CSS布局和交互设计的基础。随着课程的深入，学员将逐步掌握CSS的选择器、属性和布局技巧，从而更好地理解和运用这个强大的网页设计语言。整个课程将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值