CSS提升
一、盒子模型
1、盒子模型简介
盒子模型（Box Model）
所有HTML元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。
盒子模型包含内容
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
各部分解释
Margin（外边距）：清除边框外的区域，外边距是透明的。
Border（边框）：围绕在内边距和内容外的边框。
Padding（内边框）：清除内容周围的区域，内边距是透明的。
Content（内容）：盒子的内容，显示文本和图像
2、边框样式
border：复合样式
border-color：边框颜色
border-width：边框宽度
border-style：边框样式
border-left：左边框
border-right：右边框
border-top：上边框
border-bottom：下边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型-边框样式</title>
<style>
div{
width: 300px;
height: 300px;
/*边框宽度*/
border-width: 2px;
/*边框颜色*/
border-color: blue;
/*边框样式*/
border-style: solid;
/*上边框 实线*/
border-top: 1px solid red;
/*左边框 点线*/
border-left: 2px dotted green;
/*右边框 虚线*/
border-right: 3px dashed blue;
/*下边框 双实线*/
border-bottom: 4px double purple;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
注意：
border-style：solid；（四边全是实线）
border-sytle：solid dotted；（上线为实线，左右为点线）
border-style：solid dotted double；（上为实线，左右为点线，下为双实线）
border-style：solid doteed double dashed；（上为实线，右为点线，下为双实线，左为虚线）
颜色、大小内推
3、内边距样式
paddding：复合样式
padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模式-内边距</title>
<style>
div{
/*特点：
1、内边距会撑大盒子
2、内边距不能设置为负值*/
width: 300px;
height: 300px;
border: 1px solid red;
/*上内边距*/
padding-top: 50px;
/*左内边距*/
padding-left: 50px;
/*右内边距*/
padding-right: 50px;
/*下内边距*/
padding-bottom: 50px;
}
</style>
</head>
<body>
<div>
我是盒子模式
</div>
</body>
</html>
注意：
padding：复合样式
当参数值为一个的时候：上下左右
当参数值为两个的时候：上下 左右
当参数值为三个的时候：上 左右 下
当参数值为四个的时候：上 右 下 左
4、外边距样式
margin：复合样式
margin-top：上外边距
margin-bottom：下外边距
margin-left：左外边距
margin-right：右外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型-外边距</title>
<style>
/*特点：
1、不会撑大盒子
2、可以设置为负值*/
div{
width: 200px;
height: 200px;
/*行内块状元素*/
/* 1、可以设置宽高
2、不会自动换行
3、当多个行内块状标签写在一起的时候，排列方式从左到右*/
/*display: inline-block;*/
}
#div1{
border: 2px solid green;
/*上外边距*/
margin-top: 20px;
/*!*下外边距*!*/
margin-bottom: 20px;
/*!*左外边距*!*/
margin-left: 20px;
/*!*右外边距*!*/
margin-right: 20px;
/*margin: auto;*/
}
#div2{
border: 2px solid red;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
二、CSS浮动
1、CSS浮动
文档流
像流水，流动的水，电磁流流动的是电磁，文档流流动的就是元素！可以将屏幕中显示的内容都可以一一对应为文档中的一个元素
CSS浮动
浮动，其实就是让元素脱离正常的文档流，当正常文档布局不能解决的时候，则需要脱离正常文档流。
CSS浮动优缺点
优点：使元素脱离文档流，按照指定的（左右）方向移动，遇到父级边界或者相邻元素停下来
缺点：浮动会带来高度塌陷的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#div1,#div2,#div3{
width: 100px;
height: 100px;
}
#div1{
background: red;
float: left;
}
#div2{
background: green;
float: left;
}
#div3{
background: blue;
float: left;
</style>
</head>
<body>
<div id="div4">
<div id="div1">我是红色div</div>
<div id="div2">我是绿色div</div>
<div id="div3">我是蓝色div</div>
</div>
</body>
</html>
2、解决高度坍塌的办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度坍塌的解决办法</title>
<style>
.clearfix:after{
content: " ";
display: block;
clear: both;
}
ul{
width: 400px;
/*height: 50px;*/
border: 2px solid darkgoldenrod;
/*overflow: hidden;*/
}
li{
list-style: none;
width: 60px;
height: 50px;
background: chartreuse;
float: right;
}
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<div class="rap1">生活不能给你的甜，或许我可以</div>
</body>
</html>
解决高度坍塌的办法：
1、给父级增加高度（不推荐使用）
2、给父级加overflow：hidden
3、添加一个空的div
4、使用伪元素：
.clearfix:after{
content: "";
display: block;
clear:both;
}
3、浮动的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的应用</title>
<style>
.clearfix:after{
content: "";
display: block;
clear: both;
}
ul{
width: 400px;
border: 2px solid blueviolet;
}
li{
list-style: none;
width: 50px;
height: 60px;
background: chartreuse;
float: right;
/*小圆圈*/
margin: 5px;
line-height: 50px;
text-align: center;
/*处理角度*/
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
</body>
</html>
浮动的特点：
脱离文档流
向左/向右浮动知道遇到父元素或者别的浮动元素
浮动会导致父元素高度坍塌
浮动元素不占空间
三、CSS定位
1、CSS定位
定位就是将元素定在网页中的任意位置
static
静态定位（没有定位）默认
relative
相对定位，相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置
absolute
绝对定位，没有占据位置，使元素完全脱离文档流；没有定位父级，则相对整个文档发生偏移；参考最近非static定位的父级进行定位
fixed
固定定位，相对于浏览器窗口进行
定位方形词：
left、right、top、bottom
2、relative相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
#rap1{
width: 100px;
height: 100px;
background: chocolate;
/*relative 相对定位*/
position: relative;
/*只有定位之后才有整个属性，否则没有*/
left: 50px;
top: 50px;
/*margin: 50px;*/
}
#rap2{
width: 200px;
height: 200px;
background: orange;
}
</style>
</head>
<body>
<div id="rap1">生活不能给你的甜，或许我可以</div>
<div id="rap2">生活不能给你的甜，或许我可以</div>
</body>
</html>
相对定位还是会占据原来的位置
3、absolute绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
#rap1{
width: 100px;
height: 100px;
background: chocolate;
/*relative 相对定位*/
/*position: relative;*/
position: absolute;
/*只有定位之后才有整个属性，否则没有*/
left: 50px;
top: 50px;
/*margin: 50px;*/
}
#rap2{
width: 200px;
height: 200px;
background: orange;
}
</style>
</head>
<body>
<div id="rap1">生活不能给你的甜，或许我可以</div>
<div id="rap2">生活不能给你的甜，或许我可以</div>
</body>
</html>
绝对定位类似与浮动，不会占据原来的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.dv3{
width: 50px;
height: 50px;
background: orange;
position: absolute;
/*相对于文档流定位*/
left: 50px;
}
.dv2{
width: 100px;
height: 100px;
background: deepskyblue;
/*有定位父级时，子相对于父级定位*/
position: absolute;
left: 50px;
}
.dv1{
width: 200px;
height: 200px;
background: olive;
position: absolute;
left: 50px;
/*父级和定位父级是两个概念*/
}
</style>
</head>
<body>
<div class="dv1">
<div class="dv2">
<div class="dv3"></div>
</div>
</div>
</body>
</html>
绝对定位，如果没有父级的话，是相对于整个文档定位，这里的父级定位和父级是两个概念。
如果有多个父级定位，会使用最近的那个定位
4、fixed固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
.fixed{
width: 200px;
height: 200px;
background: sandybrown;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body style="width: 2000px; height: 5000px">
<!--可以出现滚动条-->
<div class="fixed"></div>
</body>
</html>
5、层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级</title>
<style>
ul{
position: relative;
}
li{
width: 100px;
height: 100px;
list-style: none;
position: absolute;
}
.l1{
background: aqua;
}
.l2{
background: bisque;
z-index: 1;
/*默认都是0，数值越大，层级越高，类似ps的图层*/
}
.l3{
background: chocolate;
}
.l4{
background: salmon;
/*z-index: -1;*/
/*降级的事情一般不建议做*/
}
</style>
</head>
<body>
<ul>
<li class="l1">li1</li>
<li class="l2">li2</li>
<li class="l3">li3</li>
<li class="l4">li4</li>
</ul>
</body>
</html>
当多个窗口在一起的时候会有覆盖，那么到底该显示哪个，可以通过层级来控制，z-index默认都是0，可以通过这个来控制优先级
四、重置样式
1、ResetCSS
重置样式
浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致
公司里会根据每个公司的业务不同，会自己写一套属于自己公司的resetcss
我们可以使用别人提供的resetcss来去掉浏览器的样式，重新开始写自己的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重置样式</title>
<link rel="stylesheet" href="css/chognzhi.css">
</head>
<body>
<div style="width: 200px;height: 200px;background: red"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
