版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1-4任务4：图文混排-人物介绍页面布局单元一：基本技能篇1-4任务4：图文混排-人物介绍页面布局（1）掌握元素的分类。（2）掌握CSS盒模型。（3）掌握CSS布局模型。（4）掌握清除浮动的方法。（5）能对页面进行简单的布局设计。能力要求学习导览任务概述对钱学森先生的人物介绍页面进行布局，包括添加HTML结构元素，运用CSS浮动布局和弹性布局完成页面布局。1-4任务4：图文混排-人物介绍页面布局任务思考（1）块级元素与内联元素有什么区别，是否可以互相转换？
（2）如何理解CSS盒子模型？
（3）为什么需要清除浮动？1-4任务4：图文混排-人物介绍页面布局元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：<header>、<nav>、<section>、<article>、<footer>、<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有：<img>、<input>1-4任务4：图文混排-人物介绍页面布局块级元素块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。<body><divstyle="background-color:#ccc;">div1</div><divstyle="background-color:#ccc;">div2</div><pstyle="background-color:#ccc;">段落1段落1段落1段落1</p></body>1-4任务4：图文混排-人物介绍页面布局内联元素内联元素特点：1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。设置display:block将元素设置为块级元素。设置display:inline将元素设置为内联元素。<body><ahref="">百度</a><ahref="">慕课网</a><span>Web前端技术</span><span>HTML</span><em>CSS</em></body>1-4任务4：图文混排-人物介绍页面布局内联块状元素内联块状元素（inline-block）同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。inline-block元素特点：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。1-4任务4：图文混排-人物介绍页面布局盒模型1-4任务4：图文混排-人物介绍页面布局打开“1-4/demo/box_model.html”，学习盒模型属性设置。子任务11-4任务4：图文混排-人物介绍页面布局盒模型内容(content)内容本身的宽=width内容本身的高=heightwidth1-4任务4：图文混排-人物介绍页面布局盒模型用于控制内容与边框之间的距离；会占据空间；可设置盒子模型上、右、下、左4个方向的内边距值；padding属性的值可以为0，即无内边距。例：padding:20px5px8px10px;/*同时设置4个方向大小不同的内边距*/padding:20px5px8px;/*同时设置3个方向的内边距，上20左右5下8*/padding:20px5px;/*同时设置2个方向的内边距，上下20，左右5*/padding:;/*同时设置4个方向大小一样的内边距*/也可以四个方向分别设置。例：左内边距设置为20pxpadding-left:20px;内边距(padding)1-4任务4：图文混排-人物介绍页面布局盒模型外边距(margin)用于控制元素与元素之间的距离，会占据空间；可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。分别设置4个方向的内边距和同时设置4个方向的内边距语法同padding属性设置方法类似。body的外边距本身是一个盒子，默认情况下，有若干像素填充。但不同的浏览器其默认的内外边距不相同，需要把内外边距都设置为0body,div{
margin:0;padding:0;}1-4任务4：图文混排-人物介绍页面布局盒模型边框（border）语法：border:border-width||border-style||border-color边框属性简写:同时设置边框的三个属性：border:3pxsolidblue;四个边框属性可以分开设置，同一个边框的三个属性也可以分开设置border-width:medium|thin|thick|length
宽度宽度宽度长度border-color:color//用十六进制（#000000）、rgb（rgb(0-255,0-255,0-255)）和英文(16种颜色名)border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset无边框隐藏点线虚线实线双线3D凹槽3D凸槽3D凹边3D凸边说明：边框有4条边，对其进行设置是按上-右-下-左的顺序（顺时针）作用于四个边框
1-4任务4：图文混排-人物介绍页面布局盒模型圆角边框border-radius）语法：border-radius:1-4length|%/1-4length|%<length>：由浮点数字和单位标识符组成的长度值。不可为负值。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。.box1{border-radius:40px;}.box2{border-radius:10px50px;}.box3{border-radius:10px50px40px;}.box4{border-radius:10px20px30px40px;}
1-4任务4：图文混排-人物介绍页面布局盒模型说明：（1）margin总是透明的，padding也是透明的。（2）border是不透明的。（3）margin可以定义负值，但border和padding不支持负值。（4）margin、border和padding都是可选的。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。（5）每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。盒子的大小并不总是内容区域的大小。（6）浏览器窗口是所有元素的根元素，也就是说html是最大的盒子，也有浏览器把body看做最大的盒子。1-4任务4：图文混排-人物介绍页面布局CSS布局模型
流动模型（Flow）浮动模型(Float)层模型（Layer)CSS3弹性布局（Flex）1-4任务4：图文混排-人物介绍页面布局流动模型
流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）1-4任务4：图文混排-人物介绍页面布局浮动模型
CSS的float属性能使CSS任意元素浮动。float属性值可以为left、right、none。none为默认值，表示不漂移该元素，浏览器以正常方式显示之。若设置为left或right，则表示将该元素漂移到左方或右方。示例html代码：CSS代码：<divid="content"> <divclass="box1">盒子1</div><divclass="box2">盒子2</div></div>.box1{float:left;width:200px;height:150px;background-color:#ff0000;padding-left:30px;padding-top:30px;border:10pxdashed#0daef3;}.box2{float:left;width:300px;height:150px;background-color:#00ff00;padding-left:30px;padding-top:30px;margin-top:20px;0;}1-4任务4：图文混排-人物介绍页面布局子任务2打开“box_model.html”，为盒子添加浮动。取消“#content”高度，观察页面变化。1-4任务4：图文混排-人物介绍页面布局清除浮动
从图中我们发现了一个问题，那就是黑色背景在盒子下方消失了，只剩下一部分高度。可见漂移元素不再受其父元素区域的限制，或者说漂移元素不会使其父元素的区域撑大。1-4任务4：图文混排-人物介绍页面布局清除浮动
使用clear属性可以清除浮动属性，用来防止内容跟随一个浮动的元素，迫使它移动到浮动的下一行。可以添加新的元素，应用clear属性或在下一标签的属性中直接写入清除clear属性。属性值的取值范围是：left，right，none。clear属性这种方法清除浮动是作用于浮动元素的父元素的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。.clearfix{zoom:1;}/*==forIE6/7Maxthon2==*/.clearfix:after{clear:both;content:'.';display:block;width:0;height:0;visibility:hidden;}/*==forFF/chrome/opera/IE8==*/after方法1-4任务4：图文混排-人物介绍页面布局子任务3添加清除浮动代码。1-4任务4：图文混排-人物介绍页面布局层模型
CSS中的position属性来实现，然后用z-index来控制层的层叠关系。position可以设置为以下五个值：static：默认值，表示以正常流的方式排版元素。1-4任务4：图文混排-人物介绍页面布局层模型
relative：元素仍难是页面流的一部分，浏览器先以正常模式排定所有元素，在最后一刻，浏览器将该元素偏移一定的位置（由top、left、right、bottom属性指定）。.box2{ position:relative; left:50px;}1-4任务4：图文混排-人物介绍页面布局层模型
absolute：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。.box1{ position:absolute; left:0px; top:0px;}.box2{ position:relative; left:150px;}.box3{ position:absolute; right:0; bottom:0;}1-4任务4：图文混排-人物介绍页面布局层模型
absolute：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。#content{width:600px;height:600px;background-color:#000000;padding-top:20px;position:relative;}相对定位可以和绝对定位混着使用的原则是：只要父div定义了定位属性，子div就会跟着父div的位置去再定位。1-4任务4：图文混排-人物介绍页面布局层模型
fixed：将元素从正常流中抽出，并摆在浏览器窗口指定的位置（由top、left、right、bottom属性指定），它使元素不随着页面的滚动而滚动，永远固定在浏览器的某个位置上。sticky：会产生动态效果，很像relative和fixed的结合，必须搭配top、bottom、left、right这四个属性一起使用，不能省略。1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
Flex是FlexibleBox的缩写，意为“弹性布局”，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
Flex是FlexibleBox的缩写，意为“弹性布局”，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
（1）Flex容器通过display:flex属性，可将元素声明块级弹性容器；通过dsplay:inline-fex，可将元素声明为行内弹性容器。Flex容器包含6个属性，分别为flex-direction、flex-wrap、flex-flow、justify-content、align-items以及align-content。1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
①flex-direction属性flex-direction指定主轴(maincross)的方向，即元素排列的方向。flex-direction:row|row-reverse|column|column-reverserow:水平方向，从左往右row-reverse:水平方向，从右往左column:垂直方向，从上往下column-reverse:垂直方向，从下往上1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
②flex-wrap属性flex-wrap属性，指定弹性项目的换行方式，即弹性项目超过一行时如何换行。flex-wrap:no-wrap|wrap|wrap-reverseno-wrap:不换行(默认)wrap:正常换行
wrap-reverse:换行，第一行在下方，从下往上换行1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
③flex-flow属性flex-flow属性，为flex-direction和flex-wrap的合并属性，其中第一个为flex-direction,第二个为flex-wrap。flex-fow:<flex-direction><flex-wrap>1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
④justify-content属性justify-content属性，指定弹性内容在主轴上的排列方式。justify-content:flex-start|flex-center|flex-end|space-between|space-aroundflex-start:从主轴起点(mainstart)到主轴终点(mainend)center:居中
flex-end:从主轴终点(mainend)到主轴起点(mainstart)space-between:均匀分布在行里，第一个元素边界与行起始位置边界对齐，最后一个元素边界与行结束位置的边界对齐
space-around:均匀分布在行里，两端子元素与行边界有间距1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
⑤align-items属性align-items属性，指定弹性项目在纵轴上的对齐方向。align-items:flex-start|center|flex-end|base-line|stretchflex-start:项目对齐纵轴的起点(crossstart)center:居中
flex-end:项目对齐纵轴的终点(crossend)baseline:基于基线对齐
stretch:拉伸(默认)，从起点(crossstart)到终点(croosend)1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
⑥align-content属性align-content属性，指定当主轴(mainaxis)随项目换行时，多条主轴线如何对齐。align-content:flex-start|center|flex-end|space-between|space-around|stretchflex-start:从纵轴起点(crossstart)到终点(crossend)center:居中
flex-end:从纵轴终点(crossend)到纵轴起点(crossstart)space-between:元素均匀分布在列里，第一个元素边界与列起始位置边界对齐，最后一个元素边界与列结束位置的边界对齐
space-around:元素均匀分布在列里，两端子元素与列边界有间距
stretch:拉伸(默认)，拉伸项目以布满纵轴长度1-4任务4：图文混排-人物介绍页面布局弹性盒子模型
（2）Flex项目尽管弹性容器已经有设置弹性项目的各种布局行为，但总有个别弹性项目需要自定义布局方式。Flex项目包含6个属性，分别为order、flex-grow、flex-shrink、flex-basis、flex以及align-self属性。①order属性，指定弹性项目的排列序号，数值越小越靠前。order:<integer>②flex-grow属性，指定弹性项目在有空余空间的放大比例。默认为0：表示即使有剩余空间也不放大。flex-grow:<number>③flex-shrink属性，指定弹性项目在空间不够时的缩小比例。默认为1：表示空间不够时项目将缩小。flex-shrink:<number>④flex-basis属性，指定弹性项目的基本长度。flex-basis:<length>⑤flex属性，为flex-grow、flex-shrink和flex-basis的
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年北京丰台区高三一模高考政治试卷试题（含答案详解）
- 施工单位个人工作总结模版
- 小学班主任教育故事案例
- 2025年终思想工作总结模版
- 图书角的布置与管理
- 阿坝职业学院《文学研究方法论》2023-2024学年第一学期期末试卷
- 陇东学院《拓展训练》2023-2024学年第二学期期末试卷
- 陕西中医药大学《幼儿园舞蹈创编》2023-2024学年第一学期期末试卷
- 陕西国防工业职业技术学院《国际贸易理论与实务一》2023-2024学年第二学期期末试卷
- 陕西学前师范学院《智能交通系统》2023-2024学年第一学期期末试卷
- 2025-2030中国融资租赁行业发展分析与投资战略研究报告
- 2024年北京市统计局招聘事业单位考试真题
- 2025年“铸牢中华民族共同体意识”应知应会知识竞测试赛题
- 2025年四川宜宾三中高三二模高考数学模拟试卷（含答案）
- 入职培训测试题及答案
- 境外项目合作居间协议书范本
- 网格员矛盾纠纷培训
- 2025年河南经贸职业学院单招职业技能测试题库学生专用
- GB/T 1346-2024水泥标准稠度用水量、凝结时间与安定性检验方法
- 2024年襄阳汽车职业技术学院高职单招职业技能测验历年参考题库（频考版）含答案解析
- 医疗机构性侵防护制度与措施
评论
0/150
提交评论