1.1 布局模型——前端培训机构
与盒子模型一样是最基础、最核心的东西，但是布局模型是从盒子模型基础上进行布局的。
流动模型flow、浮动模型float、层模型：绝对定位、固定定位
流动模型flow
流动模型其实就是一个标准流模型，按照我们书写的html结构顺序，依次按照元素默认的类型在浏览器进行渲染；块状元素独占一行，非块状元素从左到右依次排列。
元素类型分类：
块状元素block
行内元素inline
行内块元素inline-block
浮动模型float
使用float属性设置元素脱标；
元素可以通过属性值left、right进行左侧或者右侧的贴边显示；
浮动出现的初衷是为了解决文字环绕的文字；
现在多用浮动解决块状元素在同一行进行排列的问题;
浮动可以使元素紧密排列；
浮动使元素具有块状元素的特性，可以设置宽高
浮动后元素让出原来的位置，后面的元素会顶上去，形成一个压盖效果
1.2 解决浮动问题
浮动使元素脱离文档流，那么为了正常文档结构的显示，我们可以使用属性clear来清除浮动，属性值有left 、right 、both(常用)
Ø 给父元素设置高度
Ø 给后面的正常文档流的元素设置clear:both
Ø 外墙法：在父元素和后面正常的文档流之间设置一个空元素div，给这个div设置clear:both
Ø 内墙法：父元素的内部最后添加一个空元素div，给这个div设置clear:both
Ø 给父元素设置overflow:hidden || scroll || auto;
Ø overflow本身的意思是为了处给出文本溢出的处理方式，hidden溢出隐藏，scoll滚动条
Ø auto自适应；这里可以解决父元素塌陷问题，它可以强制去匹配子元素的大小，并根据匹配到子元素的宽高进行包裹。另外一方面，它还可以解决嵌套元素外边距合并问题。
Ø 利用伪元素:after
| .clear:after{ display: block;/*明确类型*/ height: 0; content: '';/*设置空内容*/ clear: both;/*清除浮动*/ visibility: hidden;/*消失占位*/ } zoom: 1;/*兼容IE低版本*/ } |
1.3补充内容：
² 如何设置元素不可见
display:none 元素消失不占位
visibility:hidden; 元素消失占位
² 伪元素::after、伪类:hover、类class、元素element
元素：存在于html中的标签，是可见的结构
伪元素:通过css添加
类：标签元素的属性，存在于结构中
伪类：存在css中，需要用户或者浏览器一些操作才能实现的效果
² 浮动元素不存在上下外边距合并问题
一、 浮动应用：色块布局——前端培训机构
拿到效果图，先分析结构构成，从外层到内层进行分析；分析完成后，利用div + css进行布局，如果div块是水平排列，需要借助浮动改变默认的排列方式。最后往大块中填充小块，并在小块中填充内容，即完成效果。
| 1 |
二、 背景相关属性—前端培训机构
2.1 background-color 设置背景颜色
2.2 background-image 设置背景图片
属性值：url 统一资源定位符 加载图片的位置
2.3 background-size CSS3中属性，设置图片的大小
属性值：可以用像素值表示，也可以用百分比表示，还可以使用关键字cover contain
2.4 background-repeat 设置背景图片的平铺方式
属性值： repeat 默认。水平和垂直平铺(按照原图)
repeat-x 设置水平平铺
repeat-y 设置垂直平铺
no-repeat 设置图片不平铺
round 水平和垂直平铺(通过压缩的方式全部显示完整的图片)
space 完整显示平铺图片，剩余不能完整显示的部分不再平铺，将剩余空间平均分配到图片之间的距离
2.5 background-position 设置背景图片的位置
属性值： 英文单词表示、像素值、百分比
2.6 background-attachment 设置背景图片是否滚动
属性值 scroll 默认随页面滚动
fixed 不随页面滚动
| .box{ height: 400px; width: 400px; margin: 100px auto; padding: 100px; border: solid 20px green; /*设置背景颜色为红色*/ /*设置背景图片*/ background-image: url(./images/meng.jpg); /*设置图片的大小*/ background-size: 110px; /*设置背景图片的平铺方式*/ background-repeat:no-repeat; /*设置 不平铺背景图片的位置*/ /*background-position: right bottom; 右下角*/ /*background-position: bottom; 下边居中，center一般省略*/ /*background-position: center;*/ /*background-position: 100% 0; 右上角*/ /*background-position: 50% 100%; 底部居中*/ /*background-position: 0px 490px; 左下角*/ /*background-position: 245px 245px; 居中*/ background-position: -55px -55px; } |
背景是否随页面滚动 默认scroll 随页面滚动 属性fixed不随页面滚动
| body{ background-image: url(./images/bg3.jpg); background-repeat: no-repeat; background-size: 500px; background-attachment: fixed; } p{ height: 200px; margin-top: 100px; border: solid 1px; background: orange; 1 } |
Background-attachment应用：
Html代码：
| <p>呵呵呵</p> <p>呵呵呵</p> <div class="box"></div> <p>呵呵呵</p> <p>呵呵呵</p> <p>呵呵呵</p> <p>呵呵呵</p> <p>呵呵呵</p> |
CSS代码：
| p{ height: 200px; margin-top: 50px; border: solid 1px; background: orange; } .box{ height: 200px; border: solid 1px; background-image: url(./images/bg3.jpg); background-repeat: no-repeat; background-size: 100%; background-position: bottom; background-attachment: fixed; } |
三、雪碧图应用—前端培训机构
雪碧图又叫做CSS精灵，CSS Sprite。
在平时所在的页面上，可能会有很多特别碎小的图片，每一张图片的加载都需要请求服务器一次，增加服务器压力，且有可能会影响页面的加载速度。所以，习惯上会把这些碎小的图片集中到一张图片上进行加载，那么这样，只要图片加载一次，再次使用的时候去缓存中查找就可以了。就可以将多次请求变成一次。
| span{ display: inline-block; height: 136px; width: 127px; background-image: url(./images/zimu.jpg); background-repeat: no-repeat; background-position: -16px -16px; /*border: solid 1px;*/ } i{ display: inline-block; height: 137px; width: 87px; margin-left: 20px; background: url(./images/zimu.jpg) -246px -184px no-repeat; /*border: solid 1px;*/ } |
雪碧图应用：
设置相邻的两个行内级元素垂直对齐方式 英文单词 像素值；如果居中，那么一般给高度比较大的那个元素；
相邻的两个行内级元素默认是底部对齐
需求效果如下：
| <ul> <li><i></i><a href="">服装饰品</a></li> <li><i></i><a href="">鞋包饰品</a></li> <li><i></i><a href="">运动用品</a></li> <li><i></i><a href="">首饰饰品</a></li> <li><i></i><a href="">数码产品</a></li> <li><i></i><a href="">家电用品</a></li> <li><i></i><a href="">装修用品</a></li> <li><i></i><a href="">婴儿用品</a></li> </ul> |
| *{ margin: 0; padding: 0; } li{list-style: none;} a{ text-decoration: none; color: black; } ul{ width: 140px; margin: 100px; padding:10px 20px; line-height: 2; text-align: center; border: solid 1px #E3E3E3; } li{ font-size: 18px; border-bottom: solid 1px #E3E3E3; } li:nth-of-type(8){ border: none; } i{ display: inline-block; width: 24px; height: 18px; margin-right: 6px; /*设置相邻的两个行内级元素垂直对齐方式 英文单词 像素值；如果居中，那么一般给高度比较大的那个元素*/ vertical-align: middle; /*相邻的两个行内级元素默认是底部对齐*/ /*添加背景图片*/ background: url(./images/sidebar.png) 0px -2px no-repeat; /*border: solid 1px;*/ } /*结构性伪类选择器 nth-of-type || nth-child*/ li:nth-of-type(2)>i{ background-position: 0px -25px; } li:nth-of-type(3)>i{ background-position: 0px -50px; } li:nth-of-type(4)>i{ background-position: 0px -75px; } li:nth-of-type(5)>i{ background-position: 0px -100px; } li:nth-of-type(6)>i{ background-position: -41px -2px; } li:nth-of-type(7)>i{ background-position: -41px -98px; } li:nth-of-type(8)>i{ background-position: -41px -170px; } |