1 布局简介
![img_ae29a57a3c78d342cc1f0ae898bcc869.png](https://i-blog.csdnimg.cn/blog_migrate/0ea2d483a7265408fb545e5a60a7a179.png)
-
常用布局方法
2 布局方式(表格)
![img_f1adc258d289f3d954b7b22b45e8af79.png](https://i-blog.csdnimg.cn/blog_migrate/8c49e43f96a53e755f45cfa92a213ce3.png)
原生表格,已废弃
![img_9f6e436b4b7caa2e85d2074542c6860e.png](https://i-blog.csdnimg.cn/blog_migrate/60283f95bb7242d88ad162825e5f3677.png)
div 实现表格
![img_600731213a2282aa4e37942031001806.png](https://i-blog.csdnimg.cn/blog_migrate/b9ab7c9324ca606c3cf321caf38d89d0.png)
效果相同
3 一些布局属性
-
盒模型
content: 文字内容区
padding: 内容区到边框的留白区
border: 边框
margin: 离别的东西的距离 -
display/position
4 flexbox现代布局方式(弹性盒子)
![img_7390b1ba39c142a948c9a5e89a0b47c5.png](https://i-blog.csdnimg.cn/blog_migrate/c97731682d8be43adede0990a2ac8107.png)
![img_0ce5982d939b61e0ec17d3ae6cd90c5e.png](https://i-blog.csdnimg.cn/blog_migrate/1677becd066d8d73807d2d53a8c73a2f.png)
![img_adb01fcc87823a6364c9e42e053ed731.png](https://i-blog.csdnimg.cn/blog_migrate/cf086d61c5aa7286de8927fcf94ab9df.png)
![img_7a2ddb5fa81e5e1d8100e18b0a7f6f31.png](https://i-blog.csdnimg.cn/blog_migrate/71b91e2b46edc6cb60b02d5baed14597.png)
![img_d37aedb7a3511e4e8c13ea612dce8856.png](https://i-blog.csdnimg.cn/blog_migrate/d4685c9640a83838281a1d13a137b0ad.png)
5 float布局
![img_978aafccacb630ebf45c644149000fc8.png](https://i-blog.csdnimg.cn/blog_migrate/9681155e5d8c66f31a91a78bb5a67b44.png)
![img_7b47494f7914b5bc3a2b8d5cd67350a4.png](https://i-blog.csdnimg.cn/blog_migrate/606afe976c14e2fb259aaaba3316ba5e.png)
![img_d105685143e632e433ed5f2e8add9825.png](https://i-blog.csdnimg.cn/blog_migrate/96697c3de996c2f23ba4a7442dc984a2.png)
图文混排
![img_220a23db06de41317e81547cb0d83f2f.png](https://i-blog.csdnimg.cn/blog_migrate/45839dc038d03cebe61881eb5525e0be.png)
![img_a98b85eb4909be2e701a7c42e657c88d.png](https://i-blog.csdnimg.cn/blog_migrate/76caa6e0955ab8ed49d157efe75b8607.png)
![img_7e4dacc5e4dfcde3219f823bb876f66e.png](https://i-blog.csdnimg.cn/blog_migrate/80fed125c6d3e9a56b3bd1dfb122d8f3.png)
6 inline-block布局
![img_4b6a7d554cc1a70e3f6ffc904ec389be.png](https://i-blog.csdnimg.cn/blog_migrate/a0019989e9574e952d8488f29072cb70.png)
![img_a3593e375f9109f3766024230e709d6e.png](https://i-blog.csdnimg.cn/blog_migrate/3a5db76d0633379abe604e6836f781e9.png)
![img_37ff9399522aaf9b7e8ea6ffbd7a5240.png](https://i-blog.csdnimg.cn/blog_migrate/693c95cffdaf32429f6fe3c79728cbf8.png)
7 响应式布局(1)
![img_de51ffe1661b789184be6eec4c1cce33.png](https://i-blog.csdnimg.cn/blog_migrate/f5966748c5acac847ecdcd2e3971db53.png)
![img_2196fec928f0eecdbc2e2e264bd66ee6.png](https://i-blog.csdnimg.cn/blog_migrate/1ce3876fb45a94804e50225997676d04.png)
让页面适配移动端加此即可
![img_8d717833dc775c46daf831af43a9738b.png](https://i-blog.csdnimg.cn/blog_migrate/437532ba1e3b5a8f577ab115fd852c20.png)
![img_9ea875e6e2383e0310b24cc38b5abc53.png](https://i-blog.csdnimg.cn/blog_migrate/5e4341f889ffd1bb0af32c46e60a5ff0.png)
8 响应式布局(2)
9 主流网站使用的布局方式
![img_20802755a19bbccb8a6719da665947c1.png](https://i-blog.csdnimg.cn/blog_migrate/67007d93fbe56d50c16e5e2003eefc93.png)
![img_25b15a1ee927b5416cf83558e0cd7b71.png](https://i-blog.csdnimg.cn/blog_migrate/b4f14a7593914f012f484a125a7eaa04.png)
看出都是 float 浮动布局分左右
![img_2a722af8107a18e05b80f4502daf243b.png](https://i-blog.csdnimg.cn/blog_migrate/f1bd9b86f7368b554b606cbb0d022ab9.png)
结束时都 clear 清除浮动,且内容为空, display:table 或者 display:block 皆可
10 CSS面试题
![img_227d32187e3cd33ebb9c352b1d706f66.png](https://i-blog.csdnimg.cn/blog_migrate/9d986563b1109543784515353d624966.png)
![img_dfb2971acce67f428335b3ed16d0fe8e.png](https://i-blog.csdnimg.cn/blog_migrate/568c9993d2019e8ae3fcdc69a4ec7fb5.png)
![img_65ea1354a1f3904a8b2add8844fb2ca1.png](https://i-blog.csdnimg.cn/blog_migrate/cd4120e2d0cfe15f17d56cc1c8f74c87.png)
![img_e16c7e020038862d3ff703d540f3180e.png](https://i-blog.csdnimg.cn/blog_migrate/ba5e2abb78df161d3d6b1a86cb337342.png)
![img_3e468d70591ca493e70f0c06893d53a7.png](https://i-blog.csdnimg.cn/blog_migrate/0390af06ab7ab62c9be8fc016ed36f34.png)