复习：

布局模型三种方式：流动模型、浮动模型、层模型

1.浮动float

left right none

清除浮动clear:left || right || both

浮动会使父元素塌陷，造成结构不能按照正常的顺序显示，会影响其他结构：

1.1 给父元素设置高度

1.2 外墙法

1.3 可以在父元素后面同级元素上设置清除浮动

1.4 内墙法：父元素内部的结尾处添加一个空的div，设置clear:both;

1.5 overflow:hidden || auto || scroll;

1.6 利用伪元素::after（建议）

ele:after{

display:block;

height:0;

content:””;

clear:both;

visibility:hidden;

zoom:1;

}

2.设置元素不可见

visibility:hidden; 元素消失占位

display:none; 元素消失消失不占位

opcity 设置元素的不透明度，属性值从 0-1 从完全透明到完全不透明

3. 背景相关属性

Background-color 背景颜色

Background-image 背景图片

Background-repeat 设置背景图片的平铺方式

属性值：

Repeat

Repeat-x

Repeat-y

No-repeat

Round

Space

Background-size:图片的宽度图片的高度;

属性值可以是百分比像素值

注：如果只有一个参数，那么默认是宽度，高度自适应

Background-position:距离左边距离距离上边的距离;

属性值可以是百分比英文字母像素值

设置大背景居中 Background-position:50% top;

Background-attachment:scoll || fixed; 设置背景图片是否随页面滚动

注意;这个地方与元素位置无关，相对的是当前页面

多背景复合写法：

如果有多个背景图片，那么背景颜色的位置需要加在最后一个背景图片的前面

Background:image1 position/size repeat,

Image2 position/size repeat,

Color lastimage position/size repeat;

一、
雪碧图

又叫CSS精灵，CSSSprite;

引入雪碧图好处，减少http请求，可以使页面加载速度更快

雪碧图实现：利用背景相关属性实现，关键在于background-position位置的调整

淘宝案例：

特殊字母案例：

HTML代码：

<ul>

</ul>

CSS代码：

*{margin: 0;padding: 0;}

a{text-decoration: none;color: black;}

li{list-style: none;}

.ml1{

margin-left: 1px;

}

ul{

width: 291px;

height: 230px;

margin: 100px auto;

background: #f4f4f4;

/*overflow: hidden;*/

}

li{

float: left;

width: 72px;

height: 76px;

margin-top: 1px;

font-size: 12px;

text-align: center;

background: white;

}

display: block;

height: 24px;

width: 26px;

margin:13px auto;

background: url(./images/csssprite.png) -23px -26px;

/*border: solid 1px;*/

}

li:nth-of-type(2) i{

background-position: -95px -26px;

}

li:nth-of-type(3) i{

background-position: -169px -26px;

}

li:nth-of-type(4) i{

background-position: -241px -26px;

}

li:nth-of-type(5) i{

background-position: -23px -102px;

}

li:nth-of-type(6) i{

background-position: -95px -102px;

}

li:nth-of-type(7) i{

background-position: -169px -102px;

}

li:nth-of-type(8) i{

background-position: -241px -102px;

}

li:nth-of-type(9) i{

background-position: -23px -178px;

}

li:nth-of-type(10) i{

background-position: -95px -178px;

}

li:nth-of-type(11) i{

background-position: -169px -178px;

}

li:nth-of-type(12) i{

background-position: -241px -178px;

}

二、单行文本溢出省略号

/*设置单行文本溢出省略号*/

text-overflow: ellipsis;

/*设置强制不换行*/

white-space: nowrap;

/*溢出隐藏*/

overflow: hidden;

三、选项卡制作

HTML代码：

</ul>

<ul>

<li>谱写中朝友谊新篇，维护半岛和平稳定</li>

<li>习大大出席金正恩举行的欢送仪式结束访问回到北京</li>

<li>谱写中朝友谊新篇，维护半岛和平稳定</li>

<li>北京跨河桥也能成跳台？护城河边练跳水，您不要</li>

</ul>

<li>国内新闻国内新闻国内新闻国内新闻</li>

</ul>

<li>世界杯世界杯世界杯世界杯</li>

</ul>

</div>

CSS代码：

*{margin: 0;padding: 0;}

li{list-style: none;}

.clear:after{

display: block;

height: 0;

content: "";

clear: both;

visibility: hidden;

}

.container{

width: 300px;

margin: 100px auto;

padding: 10px;

/*border: groove 1px;*/

}

ul.menu{

box-sizing: border-box;

width: 282px;

margin: auto;

}

ul.menu li{

float: left;

width: 80px;

height: 30px;

line-height: 30px;

text-align: center;

border: solid 1px gray;

border-bottom: none;

}

ul.menu li:nth-of-type(2){

margin: 0 18px;

}

ul.menu li.on{

border-top-width: 2px;

border-bottom:solid 2px white;

}

ul.menu li:hover{

border-top-width: 2px;

border-bottom:solid 2px white;

/*设置鼠标样式*/

cursor: pointer;

}

.content{

box-sizing: border-box;

width: 300px;

margin-top: -2px;

padding: 20px 10px;

line-height: 32px;

border: solid 1px;

border-top-width: 2px;

}

.content>ul.hid{

display: none;

}

.content li{

/*设置单行文本溢出省略号*/

text-overflow: ellipsis;

/*设置强制不换行*/

white-space: nowrap;

/*溢出隐藏*/

overflow: hidden;

}

四、定位position

4.1 盒子模型：

W3C盒子模型与 IE盒子模型

盒子组成：margin border padding content

4.2 布局模型：

流动模型flow

display:block || inline || inline-block;

浮动模型 float

Float:left || right;

层模型 layer

Position:relative || absolute || fixed || sticky;

4.3 相对定位：relative

相对于自己本身，进行位置的移动，还占有原来的位置，并没有脱离标准流

配合四个方向值 top right bottom left

多个盒子存在的情况下，可能会形成压盖效果

div{

height: 200px;

width: 200px;

}

.box1{

background: red;

}

.box2{

/*设置相对定位*/

position: relative;

/*配合方向值进行偏移*/

top: -100px;/*向上走100个像素*/

left: 100px;/*向右走100个像素*/

background: yellow;

}

.box3{

background: blue;

}

4.4 绝对定位:absolute

绝对定位和浮动一样，脱离了标准流；会让出原来的位置；

配合方向值，相对于具有position相关属性的祖先元素

不写方向值，在父元素左上角

一般情况下，按照父相子绝

</div>

</div>

margin: 0;

padding: 0;

}

.container{

margin: 100px;

padding: 100px;

border: solid 1px;

position: relative;

}

div{

height: 200px;

width: 200px;

}

.box1{

background: red;

}

.box2{

/*设置相对定位*/

/*position: relative;*/

background: yellow;

}

background: orange;

/*设置绝对定位*/

position: absolute;

/*设置左上角*/

top: 0;

left: 0;

}

h1{

height: 100px;

width: 100px;

background: palegreen;

position: absolute;

left: 0;

}

.box3{

background: blue;

}

4.5 固定定位fixed

和绝对定位一样，脱离了标准流；让出标准流位置

配合方向值，它只相对于视口进行位置的设置

div{

height: 200px;

width: 200px;

}

.box1{

background: red;

}

.box2{

background: yellow;

}

.box3{

background: blue;

}

position: fixed;

right: 100px;

bottom: 140px;

}

4.6 粘性定位sticky

header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分

</div>

<ul>

</ul>

</div>

body{height:5000px;margin: 0;padding: 0;}

.header{

width: 100%;

height: 100px;

color: white;

position: fixed;

top: 0;

background: #000000;

}

.main{

width: 100%;

height: 200px;

margin: 200px 0 0;

background: yellow;

}

.nav{

width: 80%;

margin: auto;

background: #E3E3E3;

position: sticky;

top: 100px;

}

ul{

overflow: hidden;

}

li{

list-style: none;

float: left;

padding: 20px 60px;

}

五、压盖效果及顺序

浮动、固定定位和绝对定位，使元素脱离标准流，形成压盖效果；

相对定位没有脱离标准流，但是也可以形成压盖效果；

更多的时候，压盖效果我们用定位来完成，那么多个元素形成压盖效果时，就会存在压盖顺序的问题；

到底哪一个显示在上层，默认是后面的层叠掉前面的，脱离文档流的压盖标准流的；但是我们也可以通过属性 z-index 进行修改；

z-index 值越大，越靠上。

不设置定位，z-index是无效的

</div>

div{

height: 200px;

width: 200px;

}

#wrap{

/*border: solid 4px blueviolet;*/

position: relative;

}

div#box1{

background: red;

/*position: absolute;

top: 0px;

left: 0px;

z-index: 100;*/

}

div#box2{

background: yellow;

position: absolute;

top: 100px;

left: 100px;

/*z-index: 10;*/

z-index: -1;

}

div#box3{

background: green;

position: absolute;

top: 200px;

left: 200px;

/*设置层叠顺序*/

/*z-index: 1;*/

z-index: -10;

}

div#box4{

background: purple;

position: absolute;

top: 300px;

left: 300px;

/*z-index: 0;*/

z-index: -100;

}

效果展示图：

css源码笔记（五）—爱创课堂专业前端培训

复习：

1.浮动float

2.设置元素不可见

3. 背景相关属性

一、
雪碧图

二、单行文本溢出省略号

三、选项卡制作

四、定位position

4.1 盒子模型：

4.3 相对定位：relative

4.4 绝对定位:absolute

4.5 固定定位fixed

4.6 粘性定位sticky

五、压盖效果及顺序

猜你喜欢

css源码笔记（五）—爱创课堂专业前端培训

复习：

1.浮动float

2.设置元素不可见

3. 背景相关属性

一、 雪碧图

二、单行文本溢出省略号

三、选项卡制作

四、定位position

4.1 盒子模型：

4.3 相对定位：relative

4.4 绝对定位:absolute

4.5 固定定位fixed

4.6 粘性定位sticky

五、压盖效果及顺序

猜你喜欢

一、
雪碧图