❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：
文章目录
- 表布局
- 表层
- 表标题(caption)
- border-collapse
- 边框隐藏
- 表大小
- table-layout(表宽度)
- vertical-align
- 例子
- bootstrap样式1
- bootstrap表格
- 补充：CSS的变量使用
- 浮动布局
- BFC元素的特性
- 清除浮动
- 闭合浮动
- 例子（类似九宫格）
- 例子（字体变大）
- 通过伪元素和定位元素实现
- 通过表格
- 通过flex
- 例子（九宫格）
- 浮动布局
- flex布局
- 字典布局
- qq邮箱布局
表布局
- tr叫做行框，多个tr组成行组
<!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>Document</title>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
- 还可以通过改变display属性的值自己创造出表格
<!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>Document</title>
<style>
tr:first-child td:first-child {
position: sticky;
top: 0;
background-color: white;
}
section {
display: table;
}
div {
display: table-row-group;
}
span {
display: table-row;
}
em {
display: table-cell;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Lorem.</td>
<td>Ad?</td>
<td>Illo!</td>
<td>Tempore.</td>
<td>Non.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Excepturi?</td>
<td>Illo!</td>
<td>Tempore!</td>
<td>Quidem.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Omnis!</td>
<td>Voluptate!</td>
<td>Corrupti.</td>
<td>Iste.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Commodi!</td>
<td>Dolorum!</td>
<td>Molestiae.</td>
<td>Molestias.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Accusantium.</td>
<td>Repellendus.</td>
<td>Necessitatibus?</td>
<td>Obcaecati.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quam.</td>
<td>Nemo?</td>
<td>Culpa.</td>
<td>Porro?</td>
</tr>
</tbody>
</table>
<section>
<div>
<span><em>Lorem.</em><em>Accusantium.</em><em>Vitae.</em><em>Facilis.</em><em>Recusandae?</em><em>Dicta.</em></span><span><em>Lorem.</em><em>Deserunt.</em><em>Quo.</em><em>Enim.</em><em>Animi?</em><em>Nemo.</em></span><span><em>Lorem.</em><em>Neque.</em><em>Ut.</em><em>Facere?</em><em>Hic.</em><em>Temporibus?</em></span><span><em>Lorem.</em><em>Molestiae.</em><em>Qui.</em><em>Ipsum.</em><em>Perferendis.</em><em>Possimus!</em></span>
</div>
</section>
</body>
</html>
- 尽管CSS表模型是面向行的，但是列和列组只接受四种样式：border，background，width，visibility
表层
- 单元格->行->行组->列->列组->表
表标题(caption)
<!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>Document</title>
<style>
* {
background-color: rgba(0, 0, 0, 0.08);
box-shadow: inset 0 0 1px red;
}
table {
/*控制标题的位置*/
caption-side: bottom;
border: 8px solid red;
}
table caption {
padding-top: 20px;
margin-top: 5px;
border: 3px solid red;
text-align: left;
}
</style>
</head>
<body>
<table>
<caption>成绩单</caption>
<tbody>
<tr>
<td>Lorem.</td>
<td>Eos!</td>
<td>Laboriosam.</td>
<td>Nemo.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Cum?</td>
<td>Voluptate.</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Perferendis.</td>
<td>Cumque.</td>
<td>Ut!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Odit.</td>
<td>Non!</td>
<td>Repudiandae!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Atque!</td>
<td>Incidunt!</td>
<td>Vel.</td>
</tr>
</tbody>
</table>
</body>
</html>
border-collapse
- 通过border-collapse属性可以控制表格元素的边框,我们之前是通过< table border=“1”>来设置边框，当单元格不合并的时候，只能给table标签和td标签设置边框，tbody和tr不能设置，这样设置是给每个人都框上，然后再框整个的
- border-collapse属性可以控制单元格是合并还是拆分，collapse就是合并的意思，值有collapse和separate ，css2中默认是collapse，css2.1中默认是separate
- 通过border-spacing属性可以控制单元格之间的间隙，border-spacing ：10px 5px，水平方向10px垂直方向5px
- 通过在table中设置空单元格的样式 ，可以将空单元格给隐藏起来，通过empty-cells属性，值有hide和show
- 当单元格是合并的时候（border-collapse ： collapse），tr，td，col等七个标签都可以设置边框，但是当display值为table或inline-table的元素不能有任何内边距，但是表格可以有外边距，合并的表的外围边框与其最外单元格的边界之间不会有任何间隔。
边框隐藏
- 如果某个合并边框的border-style为hidden，它会优先于所有其他合并边框，这个位置上所有的边框都会隐藏
- 如果某个合并边框的border-style为none，它的优先级最低，这个位置上不会画出该边框，除非所有其他合并边框的border-style值都是none，border-style的默认值是none，这个是最低的
- 如果至少有一个合并边框的border-style值不是none，先看宽度，谁宽谁就优先，若有相同的宽度，则会考虑边框样式，采用double，solid，dashed，dotted的顺序；如果合并边框的样式和宽度都一样，但是颜色不同，则按下表顺序使用元素的颜色：td，tr，tbody，col，colgroup，table。
表大小
table-layout(表宽度)
- 有两个值可以指定单元格的宽度，一个是auto：不用指定任何单元格的宽度，完全由浏览器自动确定，另一个是fixed：这个是固定布局，width属性值不是auto的所有列元素会根据widht值设置该列的宽度
vertical-align
- 这个属性用在表单元格上的时候，设定的是单元格的内容在单元格内的垂直摆放
- 值有top，bottom，middle，baseline(一行的单元格中第一行的基线对齐)
例子
bootstrap样式1
<!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>Document</title>
<style>
div {
display: table;
border-collapse: collapse;
width: 100%;
border: 1px solid grey;
border-radius: 5px;
}
div * {
display: table-cell;
}
div span {
width: 1%;
border: 1px solid grey;
box-sizing: border-box;
border-radius: 5px 0 0 5px;
border-right: none;
white-space: nowrap;
}
div input {
width: 100%;
box-sizing: border-box;
border: 1px solid grey;
border-radius: 0 5px 5xp 0;
font: inherit;
outline: none;
}
div input:focus {
box-shadow: 0 0 0 5px #c2dbfe;
}
</style>
</head>
<body>
<div>
<span>aaaaaaaaaaaaaaaa</span>
<input type="text">
</div>
</body>
</html>
bootstrap表格
<!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>Document</title>
<style>
.table {
border-collapse: collapse;
width: 100%;
}
.table th {
text-align: left;
}
.table td,
.table th {
padding: 10px;
}
.table thead tr {
border-bottom: 2px solid #dee2e6;
}
.table tr {
border-bottom: 1px solid #dee2e6;
}
/*-------------------------------------------------*/
.table-sm td,
.table-sm th {
padding-top: 5px;
padding-bottom: 5px;
}
/*-------------------------------------------------*/
.table-striped tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
/*-------------------------------------------------*/
.table-hover tbody tr:hover {
background-color: #ececec;
}
/*-------------------------------------------------*/
.table-bordered td,
.table-bordered th {
border: 1px solid #dee2e6
}
/*-------------------------------------------------*/
.table-borderless td,
.table-borderless th {
border: hidden;
}
/*-------------------------------------------------*/
.table-striped-columns tr :nth-child(odd) {
background-color: #ececec;
}
/*-------------------------------------------------*/
.table-dark {
background-color: #212529;
color: white
}
.table-dark tbody tr:nth-child(odd) {
background-color: #2c3034;
}
.table-dark tr {
border-bottom-color: #373b3e;
}
.table-hover.table-dark tbody tr:hover {
background-color: #323539;
}
</style>
</head>
<body>
<table
class="table xtable-sm table-striped table-hover table-bordered table-borderless xtable-striped-columns table-dark">
<thead>
<tr>
<th>lorem</th>
<th>lorem</th>
<th>lorem</th>
<th>lorem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Provident.</td>
<td>Reprehenderit.</td>
<td>Quis?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nesciunt!</td>
<td>Excepturi?</td>
<td>Provident.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Unde?</td>
<td>In?</td>
<td>Quaerat?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Vero!</td>
<td>Odit!</td>
<td>Debitis.</td>
</tr>
</tbody>
</table>
</body>
</html>
补充：CSS的变量使用
<!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>Document</title>
<style>
div{
--size:60px;
width: var(--size);
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
浮动布局
- 浮动布局可以建立横向排列的布局，浮动布局不完全是定位布局，它也不是正常流布局，浮动元素属于半常规流，常规流就是别的元素可以感知到它，默认情况下块元素感知不到浮动元素（触发BFC时能感知到里面及外面的浮动元素），行内元素感知到浮动元素，浮动元素可以感知到浮动元素。
- 触发浮动布局就是p{float：left}，float值有left，right，none，默认值是none
- 浮动布局是外部布局，同样是外部布局的有定位，行内xx（行内块等），外部布局只改变元素自身的摆放，但不改变元素内部的布局。绝对定位和固定定位不能和浮动布局一起使用，因为他们都是外部布局；但是相对定位可以和浮动一起使用，此时是相对于浮动之后的位置相对偏移
- 当行内元素被浮动时，其不再是一个行内元素，而是成为一块框，设置宽，高，边框都是有效的
- 浮动元素的宽度auto很类似行内块元素和定位元素，先由内容撑宽，宽到与包含快一样宽，然后不继续变宽，而内容开始折行，最窄则是由最长的单词决定
- 浮动元素只能出现在块元素上下文中，不能出现在flex上下文，表格上下文，grid上下文，上下文就是内部的意思，即只能作为内部布局为块元素的元素的
- 不同情况下的包含块：常规流：离其最近的块级祖先；定位：相对定位的祖先；浮动：同常规流
<!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>Document</title>
<style>
table {
float: left;
}
section {
border: 8px solid red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Lorem.</td>
<td>Vero!</td>
<td>Accusantium!</td>
<td>Voluptates!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Vitae.</td>
<td>Rem!</td>
<td>Officia?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam!</td>
<td>Vero.</td>
<td>Nihil!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Laboriosam.</td>
<td>Repellendus?</td>
<td>Possimus!</td>
</tr>
</tbody>
</table>
<section>fdsfasfasdfsdaf</section>
</body>
</html>
- 多个浮动布局块组合的时候，尽可能左/右；左右尽可能不超出包含块；不能超过前面的所有浮动元素的最高点；不能超过所在行行框的最高点；也不能超过包含块的最高点
BFC元素的特性
- 自动变高以包裹自己的浮动后代
- 自动变窄以避开浮动元素，当不能变窄(定宽)时会下移以避开浮动元素
- 不让后代元素的margin跑到自己外面去
- 如何让一个元素包裹自己的浮动后代：解决方法就是触发BFC；如果触发BFC：1.定位2.让它浮动3.让它overflow：hidden/auto4.让它display：flow-root5.display： inline-block
- 就像html为什么能包裹住所有的元素，我猜它就是触发了BFC
清除浮动
- 某个块框通过向下移动，使其两边没有浮动元素 ，属性名是clear，值有left，right，both（下移动到两边都不与浮动元素重叠 ）
闭合浮动
- 某个块框通过增加自己的高度使其能够包含其浮动的后代元素(通过自己变大，使所有的后代浮动元素被自己包起来)，方法有：1.定高2.BFC3.在末尾放一个块元素(可以用.clearfix::after{content:‘’; display:block; clear:both;})，通过clear：both，则它会下移同时将父元素撑高，实现闭合浮动。
例子（类似九宫格）
<!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>Document</title>
<style>
* {
background-color: rgba(0, 0, 0, 0.08);
box-shadow: inset 0 0 1px red;
}
ul {
list-style-type: none;
padding: 0;
width: 150px;
margin: auto;
overflow: hidden;
}
li {
width: 50px;
height: 50px;
float: left;
}
li:nth-child(12n+1) {
height: 100px;
width: 100px;
}
li:nth-child(12n+8) {
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</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>Document</title>
<style>
span {
display: inline-block;
width: 100px;
height: 50px;
transition: 1s;
position: relative;
text-indent: -999999999px;
border: 1px solid red;
}
span:hover {
font-size: 24px;
}
span::after {
content: 'foo bar';
position: absolute;
left: 0;
bottom: 0;
text-indent: 0;
}
</style>
</head>
<body>
<span>foo bar</span>
</body>
</html>
通过表格
- 不能设置成display：table，因为vertical-align不继承，只是设置给了table，里面的td没有继承vertical-align
- 如果想要文字水平垂直居中，可以display：table-cell，然后vertical-align：middle；text-align：center；
<!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>Document</title>
<style>
span {
width: 100px;
height: 50px;
transition: 1s;
border: 1px solid red;
display: table-cell;
vertical-align: bottom;
}
span:hover {
font-size: 24px;
}
</style>
</head>
<body>
<span>foo bar</span>
</body>
</html>
通过flex
<!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>Document</title>
<style>
span {
width: 100px;
height: 50px;
transition: 1s;
border: 1px solid red;
display: flex;
align-items: end;
}
span:hover {
font-size: 24px;
}
</style>
</head>
<body>
<span>foo bar</span>
</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>Document</title>
<style>
ul {
list-style: none;
padding: 0;
width: 170px;
margin: auto;
overflow: hidden;
padding-bottom: 5px;
background-color: pink;
}
ul li {
width: 50px;
height: 50px;
border: 5px solid blue;
float: left;
margin: 0 -5px -5px 0;
position: relative;
}
ul li:hover {
border: 5px solid red;
z-index: 8;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
flex布局
<!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>Document</title>
<style>
section {
display: flex;
flex-flow: wrap;
width: 170px;
height: 170px;
align-content: start;
}
section div {
width: 50px;
height: 50px;
border: 5px solid blue;
margin: 0 -5px -5px 0;
position: relative;
}
section div:hover {
border: 5px solid yellow;
z-index: 8;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</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>Document</title>
<style>
* {
background-color: rgba(0, 0, 0, 0.08);
box-shadow: inset 0 0 1px red;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
section {
height: 100%;
}
header {
height: 60px;
}
aside {
float: left;
width: 100px;
height: calc(100% - 60px);
}
main {
height: 60px;
overflow: hidden;
height: calc(100% - 60px);
}
</style>
</head>
<body>
<section>
<header>
</header>
<aside></aside>
<main></main>
</section>
</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>Document</title>
<style>
* {
background-color: rgba(0, 0, 0, 0.08);
box-shadow: inset 0 0 1px red;
}
html,
body {
height: 100%;
margin: 0;
}
section {
height: 100%;
}
header {
height: 60px;
float: left;
width: 100%;
}
div {
height: 100%;
box-sizing: border-box;
border-top: 60px solid transparent;
}
aside {
height: 100%;
width: 100px;
float: left;
overflow: scroll;
}
main {
overflow: scroll;
height: 100%;
}
</style>
</head>
<body>
<section>
<header>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quas aspernatur adipisci exercitationem qui ullam
rem quidem! Dolorum, sunt accusamus ipsa praesentium esse debitis blanditiis eius sit voluptas totam laborum!
</header>
<div>
<aside></aside>
<main></main>
</div>
</section>
</body>
</html>
qq邮箱布局
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章
