css基础（中）
常见的布局
位置的变动通过定位的left和top，调整边界用margin，盒模型通过margin、border、width来控制，只是改变了盒模型的大小等，实际上元素的位置并没有变动，只是盒模型的被改变的地方没有任何样式而已，没有填充背景和边框等。
三列布局
- 1.两边固定，中间自适应。
- 2.中间项的内容要完整显示。
- 3.中间项要优先加载
通过定位实现三列布局
通过定位实现三列布局，缺点是缩小到一定距离后，即使小于最小宽度了，会出现滚动条，但中间的内容依旧会丢失，故不推荐使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
/*最小宽度的取值为： (2 * left )+ right 或者 left + (2 * right) */
min-width: 600px;
}
div {
height: 100px;
}
.left,
.right {
width: 200px;
background: #bfa;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
right: 0;
top: 0;
}
.middle {
padding: 0 200px; /* 解决中间内容区的内容不能完整显示的方法 */
background: pink;
}
</style>
</head>
<body>
<!--
1. 两边固定，中间自适应。
2. 中间项的内容要完整显示
通过定位实现三列布局，缺点是缩小到一定距离后，即使小于最小宽度了，会出现滚动条，但中间的内容依旧会丢失，故不推荐使用
-->
<div class="left">left</div>
<div class="middle">
middle 11111 middle middle middle middle middle middle middle middle
</div>
<div class="right">right</div>
</body>
</html>
通过浮动实现三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/*最小宽度的取值为： (2 * left )+ right 或者 left + (2 * right) */
min-width: 600px;
}
div {
height: 100px;
}
.left,
.right {
width: 200px;
background: #bfa;
}
.middle {
background: pink;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<!--
1. 两边固定，中间自适应。
2. 中间项的内容要完整显示
3. 中间项要优先加载
通过浮动实现三列布局，缺点是在网速较慢的情况下会先加载左右两侧的内容，最后在慢慢加载中间的内容区的内容，用户体验感不好
即使是将中间项放到最上面也不行，中间项放到最上面，左右两侧就浮动不上去了，因为块级元素优先独占一行，默认独占一行。
块级元素特点(设置display:block就是将元素显示为块级元素)：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
-->
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">
middle 11111 middle middle middle middle middle middle middle middle
</div>
</body>
</html>
圣杯布局
圣杯布局中其实还是使用了相对定位，通过定位来实现布局确实不太好，所以圣杯布局也确实是有点缺点的，就是使用了定位来进行布局，可能会影响页面中三列布局中的各种元素的位置，不希望提升层级和改变文档流。
- 1.两边固定，中间自适应。
- 2.中间项的内容要完整显示。
- 3.中间项要优先加载。
元素与元素之间是有边界的，这个边界就是由margin来控制的，margin是盒模型的最外层。
为了解决下面的左右两侧的元素上不去的情况，则给中间的内容区也设置样式为浮动，并使用 clearfix 来清除浮动，（浮动元素在高度上是撑不开父级的，浮动元素的宽高是由内容区撑开的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-圣杯布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
.header,
.footer {
height: 80px;
text-align: center;
border: 1px solid;
background: #bfa;
}
.content {
padding: 0 200px;
/* 注意，设置了content元素的padding后，此时的内容区宽度已经变小了，若想让左右两侧的元素出来则需要通过给左右两侧元素设置相对定位，使其出来即可。 */
}
.content .middle {
float: left;
width: 100%;
background: pink;
/* padding: 0 200px; */
/* 此时不能如此设置，因为此时的width已经设置过了，再设置padding就相当于是给middle元素的左右增加了200px ，应该给content容器增加200px的左右padding*/
}
.content .left {
float: left;
width: 200px;
/* margin为负值，只改变元素的边界，不改变元素的位置 */
/* 设置左边元素的边界为向左移动一个content宽度，但注意，这样只是改变了边界，元素的位置并没有改变，
虽然元素上去了，这是因为left的边界改变了，content元素自动向下拓展了，此时的margin-left值必须要和content元素的width值完全相同 */
margin-left: -100%;
background: bisque;
position: relative;
left: -200px;
top: 0;
}
.content .right {
float: left;
width: 200px;
margin-left: -200px;
background: green;
position: relative;
right: -200px;
top: 0;
}
/* 清除content元素的浮动产生的影响 */
.clearfix: {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!--
1. 两边固定，中间自适应。
2. 中间项的内容要完整显示。
3. 中间项要优先加载。
圣杯布局技术点总结：
浮动：搭建完整的布局框架
margin为负值：调整旁边两列的位置（使三列布局显示到一行上）
使用相对定位：调整旁边两侧的位置（使两侧元素的位置调整到两头，暴露出来）
-->
<div class="header">
header
每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
</div>
<div class="content clearfix">
<div class="middle">
finally()
方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。
这避免了同样的语句需要在then()和catch()中各写一次的情况。
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">
footer
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
</div>
</body>
</html>
//注意，此时的元素的高度只是被默认撑开，左右两侧和中间内容区不会等高，可以通过伪等高布局来设置，但注意，伪等高布局的overflow需要设置为hidden，如果需要使用overflow的其他值的时候就不适合使用伪等高布局了。
修改的css样式如下：
<style type="text/css">
.content {
padding: 0 200px;
overflow: hidden;
/* 注意，设置了content元素的padding后，此时的内容区宽度已经变小了，若想让左右两侧的元素出来则需要通过给左右两侧元素设置相对定位，使其出来即可。 */
}
/* 设置伪等高布局，保证中间的三列布局是等高的，不会出现一个高一个低的现象 */
.content .middle,
.content .left,
.content .right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 600px;
}
/* 伪等高布局样式 */
.content .middle,
.content .left,
.content .right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
/* 隐藏多余的超出边界范围的元素 */
.content {
overflow: hidden;
}
/* 其他样式 */
/* 头部和尾部样式 */
.header,
.footer {
height: 80px;
border: 1px solid;
background: gray;
text-align: center;
}
/* 双飞翼布局样式 */
.content .middle {
width: 100%;
background: pink;
float: left;
}
/* 与圣杯布局的不同之处，需要在html中多加了一个元素标签 */
.content .middle .m-inner {
padding: 0 200px;
}
.content .left,
.content .right {
background: greenyellow;
width: 200px;
text-align: center;
float: left;
}
.content .left {
margin-left: -100%;
}
.content .right {
margin-left: -200px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>Header</h4>
</div>
<div class="content clearfix">
<div class="middle">
<div class="m-inner">middle<br /></div>
</div>
<div class="left">
left<br />
left<br />
</div>
<div class="right">
right <br />
right <br />
</div>
</div>
<div class="footer">
<h4>Footer</h4>
</div>
</body>
</html>
两者的不同之处：
-
两种布局方式都是把主列放在文档流最前面，使主列优先加载。
-
两种布局方式在实现上也有相同之处，都是让三列先进行浮动，然后通过负外边距形成三列布局。
-
两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个丛列相对定位。
双飞翼布局是把主列嵌套在一个新的父级块中，利用主列的左、右外边距进行布局调整（没有使用到定位）。
如果HTML和body的样式中均写了`overflow属性`，则HTML的滚动条依旧作用给文档流，而body上的滚动条则会作用给自己，即body上是否出现滚动条取决于body上的overflow属性值。
如果HTML或body其中一个的样式写了`overflow属性`，则滚动条会出现在文档流上。
禁止系统的默认滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-禁止系统默认滚动条</title>
<style>
/* 禁止系统的默认滚动条 */
html,
body {
height: 100%; /* 让body继承HTML的大小，HTML的大小又继承与浏览器视口的大小，即body的大小就是浏览器视口的大小 */
overflow: hidden;
}
</style>
</head>
<body>
<div style="height: 1000px"></div>
</body>
</html>
使用绝对定位模拟固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-使用绝对定位模拟固定定位</title>
<style>
/* 使用绝对定位模拟固定定位，移动端使用较多 */
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden; /* 隐藏文档流的滚动条，即系统默认的滚动条 */
height: 100%; /* 继承于初始包含块（文档流）的height的大小 */
}
body {
overflow: auto; /* 作用给自己 让body出现滚动条，实现禁止系统默认滚动条，通过元素的绝对定位模拟元素的固定定位 */
height: 100%; /* 继承于HTML元素的height的大小 */
}
.test {
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background: fuchsia;
}
</style>
</head>
<body>
<div class="test"></div>
<div style="height: 1000px"></div>
</body>
</html>
粘连布局（footer布局）
经典的“粘连布局”，我们有一块内容区< main>，当< main>的高度足够长的时候，< footer>应该紧跟在< main>元素的后面；当< main>元素比较短的时候（比如小于屏幕的高度时），我们期望这个< footer>元素能够“粘连”在元素的底部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
<title>前端小记-粘连布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
min-height: 100%;
background: pink;
}
.container .main {
padding-bottom: 50px;
/* 当main内容区域的元素过多，导致屏幕出现滚动条时，通过设置此属性来防止main内容区域和footer内容区域重叠，
此时虽然依旧有重叠，但重叠区域中main内容区没有元素，对整体没有太大影响 */
}
.footer {
height: 50px;
line-height: 50px;
background: #bfa;
text-align: center;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
main主体内容区域<br />
main主体内容区域<br />
</div>
</div>
<!-- footer布局要求元素必须要放在容器的外部， 不能放在container内部（main的下面）-->
<div class="footer">footer内容区域</div>
</body>
</html>
元素的垂直水平居中
已知宽高的元素的垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-已知宽高的元素的垂直水平居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
/* 必须要手动计算margin-left和margin-top的值，让元素的边界向左上移动当前元素的一半 */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: deepskyblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
哈哈哈哈哈哈，inner<br />
哈哈哈哈哈哈，inner<br />
</div>
</div>
</body>
</html>
方式二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-已知宽高的元素的垂直水平居中方式二</title>
<!--
绝对定位盒子的特性：
宽高由内容撑开
水平方向上：left + right + width + padding + margin = 包含块padding区域的尺寸。
垂直方向上：top + bottom + height + padding + margin = 包含块padding区域的尺寸。
-->
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
.inner {
position: absolute;
/* left、top、right、bottom四个元素均为0，margin必须为auto，缺一不可 */
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: deepskyblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
哈哈哈哈哈哈，inner<br />
哈哈哈哈哈哈，inner<br />
</div>
</div>
</body>
</html>
未知宽高的元素的垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-未知宽高的元素的垂直水平居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
/* 此属性中的百分比参照的元素自身的宽高，让其在x轴上向左平移自身的一半宽度，在y轴上向上平移自身的一半高度，z轴上不动 */
/* 但此属性的兼容性不太好，可能会存在兼容性问题 */
transform: translate3d(-50%, -50%, 0);
background: fuchsia;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
哈哈哈哈哈哈，inner<br />
哈哈哈哈哈哈，inner<br />
</div>
</div>
</body>
</html>
单行文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-单行文本垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 将行高设置的和元素的高度一致即可实现单行文本的垂直居中 */
.container {
height: 200px;
line-height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="container">哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>
</html>
图片的垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-图片垂直水平居中</title>
<style>
/* 此方式只对inline-block的元素有效,例如 img、input等，浮动，定位的元素都是不可以这样做的 */
* {
margin: 0;
padding: 0;
}
/* 在容器中通过after伪元素创建一个可以撑满行的元素（宽度为0，高度为100%），
设置display为inline-block，并设置vertical-align为middle，这样，容器下的图片就有了参照，
再设置容器下的img标签样式为vertical-align:middle，让两者的对其方式按照after伪元素的对其方式对齐，即可实现图片的垂直水平居中 */
.wrap {
height: 400px;
width: 400px;
border: 1px solid;
margin: 0 auto;
text-align: center;
}
.wrap::after {
content: "";
width: 0px;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.wrap img {
vertical-align: middle;
}
/*
vertical-align： 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素。
初始值：baseline 不可被继承
使用最多的是img和input元素，参照于行框中行内框最高的元素进行定位
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
*/
</style>
</head>
<body>
<div class="wrap">
<img src="./img/0000.png" width="200" alt="哈哈" />
</div>
</body>
</html>
字体相关的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-字体相关属性</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
font-size : 指定字体的大小，该属性的值会被用于计算em长度单位。
默认值：medium (Chrome下为16px，最小为12px，当这个值小于12px时均渲染成12px，当这个值为负数时，则会渲染成默认值16px)，可继承,
取值有很多种形式，但暂时只关注的三种值
px:像素
em:em的值的大小是动态的，当定义font-size属性时，1em等于元素的父元素的字体大小
% ： 参照父元素的字体大小
*/
/*
font-style : 选择font-family字体下的italic或oblique样式
默认值： normal 可继承
可选值：
normal：选择font-family的常规字体
italic: 选择斜体
oblique：选择倾斜体
*/
/*
font-weight :指定了字体的粗细程度，一些字体只提供了normal和bold两种值
默认值:normal 可继承
可选值：
normal：正常粗细，与400等值
bold:加粗 与700等值
lighter：比从父元素继承来的值更细
bolder：比从父元素中继承来的值更粗
100,200,300,400,500,600,700,800,900 数值化的规定字体粗细程度的方式，提供了除normal和bold之外更多的值
*/
/*
font-family:允许通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。属性的值用逗号隔开。
默认值：depends on user agent 可继承
*/
/*
font:简写属性,属性值书写顺序有要求，font-style 和font-weight必须在font-size的前面，font-family必须早font-size的后面
推荐形式：font:font-style font-weight font-size/line-height font-family
不建议使用此简写属性，可维护性太差，而且顺序不对的话，属性不会生效
*/
.wrap {
font-size: 30px;
font-style: normal;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div class="wrap">哈哈哈</div>
</body>
</html>
文本相关的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-文本相关的属性</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
行高：指上下文本行的基线间的垂直距离，
行距：指一行底线到下一行顶线的垂直距离
行距 = 行高 - 字体大小
内容区：底线和顶线包裹的区域
行内框：默认等于内容区域
如果要处理大量的文本，建议把行高设置的要比字体大
*/
/*
行高的使用：单行文本垂直居中
*/
/*
color: 前景色（字体颜色）
text-align:控制文本的居中形式，只对内联元素或行内元素有效
text-indent:控制首行缩进
text-decoration:underline用来画下划线
letter-spacing:控制字母与字母之间的间距
word-spacing:控制单词与单词之间的间距
white-space:控制文本是否换行（英文之间没有空格的是不会换行的）
*/
.wrap {
height: 200px;
line-height: 200px;
background: hotpink;
}
</style>
</head>
<body>
<div class="wrap">哈哈哈哈哈哈哈哈哈</div>
</body>
</html>
作 者：sweetheart1998
出 处：https://home.cnblogs.com/u/gujun1998/
如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
如果您觉得文章对您有帮助，可以点击文章右下角推荐一下！
