布局模型三种方式：流动模型、浮动模型、层模型
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;
}
visibility:hidden; 元素消失占位
display:none; 元素消失消失不占位
opcity 设置元素的不透明度，属性值从 0-1 从完全透明到完全不透明
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位置的调整
淘宝案例：
特殊字母案例：
|
<ul> <li><i></i><span>充话费</span></li> <li class="ml1"><i></i><span>旅行</span></li> <li class="ml1"><i></i><span>旅行</span></li> <li class="ml1"><i></i><span>旅行</span></li> <li><i></i><span>旅行</span></li> <li class="ml1"><i></i><span>旅行</span></li> <li class="ml1"><i></i><span>旅行</span></li> <li class="ml1"><i></i><span>旅行</span></li> <li><i></i><span>找服务</span></li> <li class="ml1"><i></i><span>旅行</span></li> <li class="ml1"><i></i><span>找服务</span></li> <li class="ml1"><i></i><span>找服务</span></li> </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; }
i{ 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代码：
<div class="container"> <ul class="menu clear"> <li class="on">国际新闻</li> <li>国内新闻</li> <li>世界杯</li> </ul> <div class="content"> <ul> <li>谱写中朝友谊新篇，维护半岛和平稳定</li> <li>习大大出席金正恩举行的欢送仪式 结束访问回到北京</li> <li>谱写中朝友谊新篇，维护半岛和平稳定</li> <li>北京跨河桥也能成跳台？护城河边练跳水，您不要</li> </ul> <ul class="hid"> <li>国内新闻国内新闻国内新闻国内新闻</li> <li>国内新闻国内新闻国内新闻国内新闻</li> <li>国内新闻国内新闻国内新闻国内新闻</li> <li>国内新闻国内新闻国内新闻国内新闻</li> </ul> <ul class="hid"> <li>世界杯世界杯世界杯世界杯</li> <li>世界杯世界杯世界杯世界杯</li> <li>世界杯世界杯世界杯世界杯</li> <li>世界杯世界杯世界杯世界杯</li> </ul> </div> </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; } |
W3C盒子模型 与 IE盒子模型
盒子组成：margin border padding content
4.2 布局模型：
流动模型flow
display:block || inline || inline-block;
浮动模型 float
Float:left || right;
层模型 layer
Position:relative || absolute || fixed || sticky;
相对于自己本身，进行位置的移动，还占有原来的位置，并没有脱离标准流
配合四个方向值 top right bottom left
多个盒子存在的情况下，可能会形成压盖效果
|
<div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> |
|
div{ height: 200px; width: 200px; }
.box1{ background: red; } .box2{ /*设置相对定位*/ position: relative; /*配合方向值进行偏移*/ top: -100px;/*向上走100个像素*/ left: 100px;/*向右走100个像素*/
background: yellow; } .box3{ background: blue; } |
绝对定位和浮动一样，脱离了标准流；会让出原来的位置；
配合方向值，相对于具有position相关属性的祖先元素
不写方向值，在父元素左上角
一般情况下，按照 父相子绝
|
<div class="container"> <div class="box1">盒子1</div> <div class="box2"> <p>盒子2</p> <h1></h1> </div> <div class="box3">盒子3</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; } p{ background: orange; /*设置绝对定位*/ position: absolute; /*设置左上角*/ top: 0; left: 0; } h1{ height: 100px; width: 100px; background: palegreen; position: absolute; left: 0; }
.box3{ background: blue; } |
和绝对定位一样，脱离了标准流；让出标准流位置
配合方向值，它只相对于视口进行位置的设置
|
<div id="top">top</div> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> <div class="box3">盒子3</div> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> <a href="#top"><img src="./images/hand-o-up.png"/></a> |
|
div{ height: 200px; width: 200px; }
.box1{ background: red; } .box2{ background: yellow; } .box3{ background: blue; }
a{ position: fixed; right: 100px; bottom: 140px; } |
|
<div class="header"> header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分 header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分 header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分header部分 </div> <div class="main"></div> <div class="main"></div> <div class="main"></div> <div class="nav"> <ul> <li>哈哈</li> <li>哈哈</li> <li>哈哈</li> <li>哈哈</li> </ul> </div> <div class="main"></div> <div class="main"></div> <div class="main"></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 id="wrap"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> </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; } |
效果展示图：
原文：https://www.cnblogs.com/Vhaomei0452/p/11358167.html