九、CSS布局

一、通过内容来确定元素的宽度

　　HTML:　　　

　　　　<figure>

　　　　　　<img src="11.jpeg" alt="这是一直华南虎">

　　　　　　<figcaption>这是一直华南虎🐅</figcaption>

　　　　</figure>

　　CSS:

　　　　figure {

　　　　　　border: 1px solid #333;

　　　　　　max-width: 200px;

　　　　　　max-width: min-content;

　　　　　　margin: auto;

　　　　}

　　　　figure > img{

　　　　　　width: 200px;

　　　　　　max-width: inherit;

　　　　}

 

二、改变表格内容可以更改表格大小的特性

　　HTML:

　　　　<table><table>

　　CSS:

　　　　table { table-layout: fixed;}

 

三、元素满屏内容居中

　　CSS：

　　　　div {

　　　　　　padding: 0;

　　　　　　padding: 0 calc(50% - 450px);　　//控制宽度

　　　　　　background: #333;

　　　　}

 

四、垂直居中

　　1、固定定位的解决方案

　　　　1-1 calc:

　　　　　　.main {

　　　　　　　　position: absolute;

　　　　　　　　top: calc(50% - 50px);

　　　　　　　　left: calc(50% - 100px);

　　　　　　　　width: 200px;

　　　　　　　　height: 100px;

　　　　　　}

　　　　1-2 transform:

　　　　　　.main {

　　　　　　　　position: absolute;

　　　　　　　　top: 50%;

　　　　　　　　left: 50%;

　　　　　　　　transform: translate(-50%, -50%);

　　　　　　}

　　2、视口单位

　　　　.main {

　　　　　　width: 200px;

　　　　　　height: 100px;

　　　　　　margin: 50vh auto 0;

　　　　　　transform: translateY(-50%);

　　　　}

　　3、基于flexbox

　　　　body{

　　　　　　display: flex;

　　　　　　min-height: 100vh;

　　　　　　margin: 0;

　　　　}

　　　　.main {

　　　　　　margin: auto;

　　　　}

 

 五、将页脚固定在页面底部

　　body {

　　　　display: flex;

　　　　flex-flow: column;

　　　　min-height: 100vh;

　　}

　　footer {

　　　　flex: 1;

　　}