程序猿小白成长之路[盒模式&浮动布局]

深入盒模式及浮动布局

1文档流:浏览器在页面上摆放HTML元素所用的方法
1-1块元素的文档流


1-2内联标签的文档流:如果有足够空间 他们会挨个摆放,如果空间不够,剩下的会摆到下一行

2浮动布局
<div>
float 浮动
clear 清除 有left right both none值

3浮动不居中的盒模式计算

在列表页添加左侧浮动的图片
1-1使用 img 同样也添加一个alt属性


<img src="images/egg.jpg" alt="西红柿炒鸡蛋">

1-2 在CSS样式表进行尺寸控制,宽度width150 高度height150 左侧浮动float 补白padding5 背景色background-color:#ffffff
边距 右边距margin-right10, 定义内容高度height的像素160

1-3如果内容文字过多应该怎么办呢?
可以设置p标签左侧的边距为170像素 margin-left

1-4文字从盒子中溢出了有2种解决方案:
第一,使用清除浮动,让盒子跟随文字的多少而自由的伸缩
如果要用清除浮动的话要先把li中的高度删掉,可屏蔽
然后在li中子元素的最后添加一个div 类名class叫clear,清除属性
每个li都要添加,就是每个盒子都要添加


然后在CSS中添加一个clear 选择器 clear: left;也可以Both


不过大多数我们的盒子都是固定的,多余的文字会被截断,看方法二

第二,就是截断溢出的文字,也就是说盒子的大小是固定的,但是不希望多余的文字显示出来,
一般采用这种方式
计算p标签高度,明确给他一个高度91
文字从p标签这个盒子溢出的,那么再给p标签添加 overflow属性,overflow: hidden; 把文字隐藏起来,
就是超出那个标签的内容不显示
滚动条设置也是使用 overflow 属性,overflow: scroll;
<ul class="recipes">
<li>
<img src="images/egg.jpg" alt="西红柿炒鸡蛋" />
<h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
<p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。
这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。
这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。
这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。</p>
<!--<div class="clear"></div>-->
</li>
<li>
<img src="images/egg.jpg" alt="西红柿炒鸡蛋" />
<h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
<p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。</p>
<!--<div class="clear"></div>-->
</li>
<li>
<img src="images/egg.jpg" alt="西红柿炒鸡蛋" />
<h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
<p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。</p>
<!--<div class="clear"></div>-->
</li>
<li>
<img src="images/egg.jpg" alt="西红柿炒鸡蛋" />
<h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
<p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,吃吧同志们。</p>
<!--<div class="clear"></div>-->
</li>

</ul>
CSS
.recipes img{
width: 150px;
height: 150px;
padding: 5px;
float: left;
background-color: #ffffff;
margin-right: 10px;
}
.recipes p{
margin-left: 170px;
height: 91px;
overflow: hidden;
}
/*.clear{
clear:both;
}*/

原文地址:https://www.cnblogs.com/smillin2018-0803/p/9255366.html

时间: 2024-10-28 20:46:52

程序猿小白成长之路[盒模式&浮动布局]的相关文章

程序猿小白成长之路[定位]

定位 1-1在 CSS 中使用 position 属性实现网页的定位技术,他有4个值: static 是position属性的默认值,标签会显示在正常的文档流中relativeabsolutefixed1-2除了 static之外,使用另外3个值可以让一个标签变成定位元素当一个标签被定位之后,你就可以使用CSS的top. right.bottom.left四个属性精确控制标签在HTML文档中的位置,利用这些定位属性你可以在HTML文档中任意摆放一个标签的位置. 2-1relative 相对定位将

程序猿小白成长之路[初级框架布局]

HTML框架布局 AJAX: 是JavaScript中的一个技术,需要先掌握JavaScript;AJAX是请求接口用的 frameset标签 frame 标签 框架页面的基本架构 水平布局 cols:表示子框架水平排列 垂直布局 rows:定义垂直布局的框架集 混合框架集 cols & rows 为框架添加内容 使用 style属性定义一个标签的内联样式 框架中的导航 框架的尺寸可以通过拖动边框来调整的,如何是边框固定? 1-1在源代码中为 frameset标签设置 一个属性noresize

菜鸟程序猿的成长之路(一)——菜鸟程序猿起步

看到标题之后,突然想起一句文的话:白驹过隙,时光荏苒.每当看到这么有文採的话,总认为有点酸,再酸我也用*^◎^*. 9月开学季,大家陆续返校,让我想起了三年前自己带着新鲜与憧憬步入大学,大学对我来说一切都那么的美好和新鲜,时刻盼望着大学的生活.那些美好的场景仿佛就在昨天,转眼间,今年都大四了,"大四"简简单单的两个字让我清醒了很多,另一年的时间,我该面临毕业,就业压力也随之而至.青春,总是经不起蹉跎,留在大学的最后一年,也许一晃就过,如今的我们,也唯有奋力拼搏. 进入提高班也满两年的时

Linux小白成长之路

Linux小白成长之路 本人忘祭,一个刚刚进入跨入Linux世界的小白.Linux对于我来说其实是很神秘的,很早以前就听说过.也曾见各种技术大牛使用过.但是一直以来也没有去接触的想法,因为感觉太高深.从四月开始报名马哥教育,到现在看预习视频已经一个月了.刚开始看到那些专业术语,感觉脑袋都要大了.对于一个已经三十岁的我来说,当初是硬逼着自己看下去的.看一遍不理解,就两遍三遍重复着看.随后在网上查看各种帖子.文章,想从中找到些学习的切入点,但是觉得不是那么容易着手.无法理解.但是现在听了王老师的面授

菜鸟程序员的成长之路(三)——2014,逝去的半年,奋斗的半年

从3月份到现在,仅仅半年的时间让我扮演了两个完全不同的角色,从在校生一下变成了毕业生,作为毕业生不能再像在校生一样自由自在,无所顾忌,想怎样就怎样,肆无忌惮的生活,浪费时间.如果你想从容的面临未来的生活,就需要彻头彻尾的改变.多一份稳重,多一份责任,多一份担当. 鉴于LZ不太擅长写非技术博文,那就以碎碎念的形式,来回顾一下我的奋斗历程: 技术 3月份开始备战软考,软考准备了两个多月的时间,从看视频做笔记,再到大家一起讲课,复习,做试题巩固,整个过程至今历历在目.软考虽然不难,但是对于基础差的同学

菜鸟程序员的成长之路(四)——欢送2014,欢迎2015

最近半个月一直想写年终总结,却迟迟没有提笔,不是不知道写什么而是需要写的东西太多,不知从哪下笔.继菜鸟程序员的成长之路(三)--2014,逝去的半年,奋斗的半年,请大家跟我一起再重新将2014"活"一遍. 2014年对于我来说承载了满满的回忆,也是我人生中比较重要的一年,因为在这一年里发生很多重要的事:1.我毕业了:2.我考过了软件设计师了:3.我考上了在职研究生... 学习篇 对于学习,其实有很多想写的内容,由于上篇博文:2014,逝去的半年,奋斗的半年,我已经写了2014上半年的总

高效程序猿的狂暴之路

不觉间已经工作六年,回忆第一天实习的场景历历在目.恍若昨日.六年已足以令很多人转管理.转产品.转測试.转行,也一定有人还在坚守着编码,仅仅因热爱.遇到过形形色色的经理.架构师.运维.性能工程师等等,还是认为写代码的才是最厉害的!在这里分享一些这些年来修习到的个人心得.或许并不适用于其它人,但对于我却都是最珍贵的"宝藏". 也谨以此文纪念在代码堆里度过的青春~ 看到这些点点滴滴的收获,就会感到全部逝去的光阴和挥洒的汗水都是值得的. 1.启动:得心应手的工具 1.1 全能IDE 关于IDE

程序员的成长之路

从一个编程初学者,到一个程序开发菜鸟,再到技术高手.技术大牛.大师级人物, 必有一个成长路线. 根据自己的学习开发经历,我觉得一个程序员的成长之路可以按照如下循序渐进: 技术技能: 1.  初学编程: 找一两本优秀的编程语言书籍,按照例子敲代码. 推荐 K&R <TCPL> 和 BE <Thinking in java> ,每一种主流开发语言都有一些非常优秀的入门书籍.如果国外书看得不大懂,可以先找国内编程书籍看看,一般国内书籍更注重技术和技巧,而国外书籍更注重思想和思路:

一个程序猿的梦想之路

梦想的第一步 2006年,因为怀揣着对计算机浓烈的兴趣,于是高考第一志愿志愿填写了计算机专业,很快第一批次录取结束,大学入学通知书寄来了,是的,很激动,很多年过去了,再回忆那时的心情,心里还是有点微波荡漾,这应该算是我实现梦想的第一步. 来到了乌鲁木齐市,开始了学习计算机专业的生涯.那个时候班里的女生不多,不过我们这一届的女生算是多了,我也是其中一名,大学时光说短暂也漫长,我们意气风发,期待着在这里学到更多,只为了毕业后能找到一份工作,但是并不是无忧无虑的,希望时间过得快一点,赶紧毕业,赶紧工作