Python（三十六）CSS提升
2021-12-18 本文已影响0人
Lonelyroots
前端第三课CSS提升来啦！涉及的内容有box model：盒子模型；CSS floating：CSS浮动；CSS positioning and hierarchy：CSS定位和层级；reset styles：重置样式。
1. 盒子模型
1.1. 盒子模型（Box Model）
所有的HTML元素可以看做是一个div盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。
1.2. 盒子模型的包含内容
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括边距，边框，填充和实际的内容。
1.3.盒子 各部分解释
Margin（外边距）：清除边框外的区域，外边距是透明的。
Border（边框）：围绕在内边框和内容外的边框。
Padding（内边距）：清除内容周围的区域，内边距是透明的。
Content（内容）：盒子的内容，显示文本和图像。
border-top: pink 2px solid;：给盒子顶部加2px的标准线粉色边框。
double：双线；dashed：虚线；dotted：点线。
display: inline-block;：设置成行块元素，既可以在同一行，也可以设置宽高。
display: inline;：设置成行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box1{
width: 100px;
height: 100px;
/*!*solid标准线*!*/
/*border-top: pink 2px solid;*/
/*!*double双线*!*/
/*border-right: orange 5px double;*/
/*!*dashed虚线*!*/
/*border-bottom: blue 3px dashed;*/
/*!*dotted点线*!*/
/*border-left: darkblue 8px dotted ;*/
/*border-color: crimson;*/
/*border-style: solid;*/
/*border-width: 5px;*/
/*四边一起设置*/
border: green 2px solid;
/*!*内边距会把盒子撑大，不能设置成负数*!*/
/*padding: 20px;*/
/*padding-top: 20px;*/
/*padding-left: 20px;*/
/*!*上下 左右*!*/
/*padding: 50px 100px;*/
/*!*上 左右 下*!*/
/*padding: 50px 100px 60px;*/
/*上 右 下 左*/
padding: 40px 50px 60px 70px;
/*外边距*/
margin-top: 0px;
margin-left: 0px;
margin-bottom: 80px;
}
.box3{
width: 50px;
height: 50px;
border: blue 2px solid;
background-color: blue;
/*!*左右的外边距不重合直接相加，上下的外边距重合是取大值*!*/
/*margin-left: 45px;*/
/*margin-top: 50px;*/
/*margin外边距可以设置负值，外边距不影响盒子大小*/
/*!*上下左右*!*/
/*margin: 50px;*/
/*!*上下 左右*!*/
/*margin: 50px 100px;*/
/*小外边距（左）与大盒子（右）的左外边距相差50px*/
margin-left: -50px;
margin-right: -50px;
}
.box2{
width: 500px;
height: 500px;
background-color: crimson;
border: yellow 1px solid;
}
.box1,.box3{
/*!*行块元素，既可以在同一行，也可以设置宽高*!*/
/*display: inline-block;*/
/*!*设置成行内元素*!*/
/*display: inline;*/
}
</style>
</head>
<body>
<div class="box2">
<div class="box1">
Then
</div>
<div class="box3">
Then
</div>
</div>
</body>
</html>
2. CSS浮动
2.1. 文档流
文档流流动的是元素，可以将屏幕中显示的内容一一对应为文档中的一个元素。
2.2. CSS浮动
浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。
2.3. CSS浮动优缺点
优点：使元素脱离文档流，按照指定的（左右）方向移动，遇到父级边界或者相邻元素停下来。
缺点：浮动会带来高度塌陷的问题。
高度塌陷解决方式如下：
①给父级盒子设置高度，因为要随时调整，所以不推荐使用这种方法；
②新建一个空的div，给它设置高度，不过不推荐使用这种方法；
③给父级盒子设置overflow，不过会隐藏下拉框，所以不推荐；
④解决方法四：清除浮动，只有块状元素可以使用，推荐使用这种方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS floating</title>
<style>
/*div{*/
/* width: 100px;*/
/* height: 100px;*/
/* !*!*!*浮动主要起从上往下变成从左往右或从右往左的作用*!*!*!*/
/* !*!*从左往右浮动*!*!*/
/* !*float: left;*!*/
/*}*/
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*!*蓝色将橘色覆盖了*!*/
/*float: left;*/
}
.box3{
width: 100px;
height: 100px;
background-color: orange;
}
/*这样以后大盒子会产生高度坍塌，变为0*/
.box1,.box2,.box3{
float: left;
}
/*!*解决方法一：给父级盒子设置高度，因为要随时调整，所以不推荐使用这种方法*!*/
/*.box{*/
/* height: 100px;*/
/*}*/
/*!*解决方法二：新建一个空的div，给它设置高度，不过不推荐使用这种方法*!*/
/*.box4{*/
/* height: 100px;*/
/*}*/
/*!*解决方法三：给父级盒子设置overflow，不过会隐藏下拉框，所以不推荐*!*/
/*.box{*/
/* overflow: hidden;*/
/*}*/
/*!*解决方法四：清除浮动，只有块状元素可以使用，推荐使用这种方法*!*/
/*.box:after{*/
/* display: block;*/
/* content: "";*/
/* clear:both;*/
/*}*/
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
3. CSS定位
定位就是将元素定在网页中的任意位置。
3.1. 静态定位
static静态定位（没有定位），默认。
3.2. 相对定位
relative相对定位，相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置。
3.3. 绝对定位
absolute绝对定位，没有占据位置，使元素完全脱离文档流；没有定位父级，则相对整个文档发生偏移;参考最近非static定位的父级进行定位。
3.4. 固定定位
fixed固定定位，相对于浏览器窗口进行定位方形词;left 、 right、top、bottom。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS positioning and hierarchy</title>
<style>
*{
/*将网页自带的样式，外边距和内边距给去除，方便绝对定位使用*/
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 300px;
background-color: orange;
/*父级盒子最好用相对定位*/
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: crimson;
/*!*静态定位*!*/
/*position: static;*/
/*top: 50px;*/
/*!*相对定位，距离上边，往下移了50px，相对于外部的盒子*!*/
/*position: relative;*/
/*top: 50px;*/
/*!*绝对定位，是相对于网页，不过也相对设置了定位父级盒子的位置进行改变*!*/
/*!*子级盒子最好用绝对定位*!*/
/*position: absolute;*/
/*top: 200px;*/
/*!*固定定位，相对浏览器改变位置，如下方显示则在右下角*!*/
/*position: fixed;*/
/*right: 0;*/
/*bottom: 0;*/
}
.box2,.box3{
width: 100px;
height: 100px;
}
.box2{
background-color: yellow;
position: absolute;
top: 200px;
/*层级默认是0*/
z-index: 2;
}
.box3{
background-color: blue;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
4. 重置样式
浏览器在解析某些标签的时候,本身就自带了一些样式,导致我们写样式的时候就会效果不—致。在这里我们可以使用别人提供的 ResetCSS来去掉浏览器的样式，重新开始写自己的样式。
4.1. CSS文件代码（文件名称为04、reset styles.css）
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
4.2. HTML文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reset styles</title>
<link rel="stylesheet" href="04、reset%20styles.css">
<style>
.box{
width: 200px;
height: 300px;
background-color: orange;
/*父级盒子最好用相对定位*/
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: crimson;
}
.box2,.box3{
width: 100px;
height: 100px;
}
.box2{
background-color: yellow;
position: absolute;
top: 200px;
/*层级默认是0*/
z-index: 2;
}
.box3{
background-color: blue;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots
