前端基础实战 3_第1页
前端基础实战 3_第2页
前端基础实战 3_第3页
前端基础实战 3_第4页
前端基础实战 3_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

盒模型与弹性布局课件目录01盒模型基础知识02盒模型浮动03盒模型内容04盒模型嵌套05盒模型定位06弹性布局盒模型基础知识盒模型简介盒模型（也可称为盒子模型）是CSS中的一个重要概念，理解了盒模型，才能更好地排版布局。盒模型具有外边距（margin）、边框（border）、内间距（padding）、内容（content）4个属性。每个属性都包括上、下、左、右4个部分，这4个部分可同时设置，也可分别设置。其中，内间距可以理解为盒子中装的东西到边框的距离，而边框有厚薄和颜色之分，内容就是盒子中装的东西，外边距就是边框外面自动留出的一段空白距离。盒模型基础知识盒模型属性利用margin、padding和border这3个属性（它们都是组合属性），可以用以下几种方式为盒模型设置上下左右的距离和宽度。1．使用组合属性（1）如margin:10px20px15px25px，对应的顺序为上边距、右边距、下边距、左边距，即盒模型顺时针方向4条边的边距。如果记不住这个组合属性的顺序，则可以使用单独属性。（2）如padding:10px20px15px25px，对应的顺序为上间距、右间距、下间距、左间距。（3）如border-width:10px20px15px25px，对应的顺序与上述顺序相同。（4）如margin:10pxauto，表示上下边距为10像素，左右边距为自动，即水平居中。padding和border也有同样的设置。（5）如margin:20px，即上、下、左、右的边距均为20像素。padding和border两个属性的设置方式与此相同。盒模型基础知识盒模型属性2．使用单独属性（1）外边距单独属性：margin-top、margin-right、margin-bottom、margin-left，分别用于设置元素上、右、下、左这4条边的外边距。（2）内间距单独属性：padding-top、padding-right、padding-bottom、padding-left，分别用于设置元素上、右、下、左这4条边的内间距。（3）边框单独属性：border-top、border-right、border-bottom、border-left，分别用于为上、右、下、左这4条边单独定义完整的边框。关于border，如果只设置其宽度，则是不会有任何效果的，还需要为其设置边框的类型和颜色。特别需要说明的是，当对同一个元素进行CSS属性设置时，按照CSS属性的顺序，后一个属性的值将覆盖前一个属性的值；针对相同属性，style属性设置的样式将覆盖<head>标签设置的样式。盒模型基础知识盒模型属性<body>标签的margin属性与padding属性类似，都只能针对<body>标签的内容进行内间距的设置。示例代码如下。盒模型基础知识盒模型基础布局关于盒模型在布局方面的优势，可以从以下两个方面来考虑：一是便于元素样式的统一分享和复用；二是布局灵活且可控，特别是在针对多屏（指计算机、平板计算机、手机这3类设备的屏幕）进行响应式布局时。盒模型浮动浮动的作用默认情况下，盒模型是独占一行的，不会与其他盒模型在同一行中。基于4.1.3小节的代码，再为其添加一个盒模型，示例代码如下。只需要设置盒模型的浮动属性为左浮动或右浮动，盒模型就不会独占一行，而是根据页面宽度及盒模型的宽度自动适配。盒模型浮动盒模型左浮动就像使用float:left设置列表项的横向排列一样，也可以对盒模型同样的设置，示例代码如下。盒模型浮动盒模型左浮动可以看到，浏览器中的两个盒模型并排到了同一行内。由于设置了盒模型向左浮动，因此盒模型的位置是不固定的，如果浏览器宽度足够的话，两个盒模型会并排显示，甚至3个或4个盒模型也可以做到并排显示。盒模型浮动盒模型右浮动浮动其实也代表着容器的对齐方式，如float:left表示容器靠左对齐。当设置为float:right时，浏览器在渲染的时候会优先将第一个出现的盒模型向HTML页面的右侧靠拢，第二个出现的盒模型会紧挨着第一个出现的盒模型。这个时候就会出现一个特别的现象，即在HTML页面中出现的第一个盒模型会使人感觉是第二个出现的。基于4.2.2小节的例子，修改float属性值为right，示例代码如下。盒模型浮动盒模型右浮动通常人们的阅读习惯是从左到右、从上到下，所以如果设置float属性值为right，则需要对盒模型的顺序进行调整，即决定哪一个盒模型先出现在HTML页面中。在上述示例中，如果要让“欢迎来到蜗牛学苑学习（一）”位于页面左边，则需要将其<body>标签部分的代码内容修改为如下。盒模型浮动禁止浮动既然可以设置盒模型浮动，自然也可以禁止其浮动。盒模型在默认情况下就是禁止浮动的，默认设置为float:none。盒模型大部分情况下并不需要刻意禁止浮动。因为CSS属性是可以传递和继承的，所以如果某个低层的盒模型元素继承并传递了更高层的属性，而它自己需要进行特别处理，则需要手动进行属性设置，以覆盖继承的高层次的属性。盒模型内容宽度与高度本小节主要讨论盒模型的宽度和高度都设置为100%的情况。将盒模型的宽度设置为100%时，其宽度会随着浏览器的宽度进行自适应调整，同时通过设置text-align:center可完成普通内容的水平居中。盒模型内容宽度与高度那么，如果想让一个元素的百分比高度（height:100%）起作用，则需要给这个元素的所有父元素的高度设定一个有效值。示例代码如下。盒模型内容水平居中在盒模型中可以放置任意内容，如一段文本、一张图像、一个表格，甚至另一个子容器盒模型等。那么对于内容的水平居中问题，有必要细致地了解。盒模型内容垂直居中本小节要讨论的是盒模型的垂直居中问题。为了模拟垂直居中，可以通过设置line-height属性来提升每一行内容的高度，这样可以间接实现内容的垂直居中。示例代码如下。盒模型内容内容溢出如果不设置盒模型的高度与宽度，也不设置盒模型的边框，盒模型中也没有内容，那么在页面中将什么都看不见。这就是手动设置这些属性的原因，这样可以在页面中更直观地观察盒模型的变化。盒模型嵌套嵌套的作用盒子与盒子之间、表格与盒子之间、容器与容器之间的嵌套在页面布局中是非常常见的。为了实现相对复杂的排版，必然要用到嵌套。有嵌套，就有父子关系，也就有包含与被包含关系，开发者非常有必要理清楚其中的关系，以便更加灵活地处理排版布局。盒模型嵌套套的排版什么叫作盒模型嵌套？简单来说，盒模型嵌套就是盒模型中嵌套盒模型，其所有属性都可以正常使用。但是在相互嵌套中，设置margin和padding属性时容易出现问题。示例代码如下。盒模型嵌套套的排版盒模型嵌套效果如图4-17所示。盒模型嵌套套的排版内层盒模型垂直居中于外层盒模型盒模型定位定位简介在盒模型中，可以设置盒模型为行级元素，或设置为浮动效果，使其按照文档流顺序进行排列。盒模型定位定位简介这里使用CSS的position属性来重新设置盒模型的位置。position属性有5个值，其值及说明如表4-1所示。盒模型定位固定定位这里设置一个盒模型，并设置其相对于浏览器窗口的固定定位，设置其距离浏览器窗口左边100像素，距离浏览器窗口顶部50像素，示例代码如下。盒模型定位固定定位4个盒模型并排并设置其编号的效果如图盒模型定位固定定位对上述代码进行微调，将第一个盒模型单独设置为固定定位，且不设置任何偏移量。代码只对第一个盒模型添加style属性并设置position:fixed，不做其他修改，代码修改部分如下。盒模型定位绝对定位继续利用4.5.2小节中的代码，将position:fixed修改为position:absolute，运行代码后可以看到，盒模型在浏览器窗口中显示的位置与固定定位的效果没有任何不同。盒模型定位相对定位相对定位是指盒模型相对于原本位置的偏移量。相对定位不会脱离文档流，只是相对于其原本在文档流中的位置进行了相应的偏移，同样使用left、top、right或bottom属性设置偏移量。示例代码如下。盒模型定位其他属性1．z-index属性当多个盒模型重叠在一起时，z-index属性用于设置哪个位于最上层（即用户可见的那一层）。z-index属性的值是一个数字，是一个相对的概念，没有特别的值，可以任意设置。为多个盒模型设置z-index属性的值时，哪个盒模型的值最大，哪个盒模型就会显示在最上层。这对盒模型为绝对定位时比较有效，如果是浮动定位，则全部文档流按顺序显示。2．clear属性clear属性的意思是清除浮动。针对一些设置了float属性的容器，如果要让其不再浮动，单独成一行，则可以使用clear:both将浮动清除。盒模型定位其他属性3．display属性display属性通常用于设置某个元素是显示还是隐藏。display:none表示该元素被隐藏，将无法在页面中正常显示；而display:block表示该元素被显示。除此之外，display属性有一个非常特别的值，即display:flex，表示设置该元素为弹性布局。所谓弹性，指可以自由设置自适应高度和宽度、自适应内容，自由变换大小，自由设置显示顺序等，具备更加灵活的特点。在当前针对移动端的页面进行布局时，弹性布局是主流。弹性布局是盒模型中非常重要的一个知识点，4.6节将对其进行重点介绍。弹性布局弹性布局简介1．什么是弹性布局弹性布局可以很好地解决盒模型+CSS布局中存在的居中调整不方便、浮动重叠，以及细节调整过多等问题，也能够更好地适配移动端。弹性布局在针对移动端的页面布局中具有举足轻重的地位。2．弹性布局的原理弹性布局的核心概念有两个：弹性容器和弹性项目。弄懂这两个概念后，掌握弹性布局就简单多了。

3．弹性项目的排列方式弹性项目在弹性容器中的排列是分主轴和侧轴的，且主轴和侧轴是相互垂直的。无论是主轴还是侧轴，在页面中都是在水平或垂直方向进行选择的。弹性布局弹性布局相关属性弹性布局提供了非常多的CSS属性，根据使用的标签不同，可以将这些CSS属性分为两种：弹性容器专属属性和弹性项目专属属性。弹性布局弹性布局相关属性弹性布局弹性布局相关属性同时，在弹性布局中，如果将弹性项目（即#boxdiv）的每个盒模型的宽度都设置为1000像素，则可以看到浏览器会正常显示每个盒模型，且宽度进行了自适应调整，不会出现水平滚动条，其效果如图4-28所示。但是在非弹性布局中，由于浏览器宽度的限制，是无法对4个盒模型全部进行显示的，因此会出现水平滚动条。弹性布局富余空间富余空间是指在弹性容器一行中扣除该行所有弹性项目所占宽度之后的剩余空间。弹性容器针对富余空间的处理有以下两种方式。（1）作为弹性项目之间的间隙。（2）将空间分配给弹性项目，扩展弹性项目的宽度。负责将富余空间作为间隙处理的CSS属性有以下两个。（1）justify-content：处理主轴上的富余空间，其实就是设置弹性项目在主轴上的对齐方式。（2）align-content：设置侧轴上富余空间的处理方式。弹性布局弹性空间弹性空间指的是一个弹性项目本身的尺寸加上通过分配所得到的富余空间的总和。有的时候需要弹性项目有一定的尺寸自适应效果，以达到更好的页面效果，即对主轴或侧轴的富余空间不作为间隙处理，而是直接分配给弹性项目作为其空间的一部分。如何对此进行分配呢？每个弹性项目都有一个弹性因子专

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论