博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 全解析实战(四)-CSS 布局
阅读量:6167 次
发布时间:2019-06-21

本文共 329 字,大约阅读时间需要 1 分钟。

1 布局简介

img_ae29a57a3c78d342cc1f0ae898bcc869.png
  • 常用布局方法

    img_c14025af97513c1047778e3ca871027a.png

2 布局方式(表格)

img_f1adc258d289f3d954b7b22b45e8af79.png
原生表格,已废弃
img_9f6e436b4b7caa2e85d2074542c6860e.png
div 实现表格
img_600731213a2282aa4e37942031001806.png
效果相同

3 一些布局属性

  • 盒模型

    img_5c6afa1306b0763187cd11efe8cf12f8.png

    content: 文字内容区

    padding: 内容区到边框的留白区
    border: 边框
    margin: 离别的东西的距离

  • display/position

    img_27e8b706cf49f6025d4c1964db063f60.png
    img_bef6500adbc750a9da36028cc44a91d3.png
    img_43c5f6bcd238d6500154ec5bf3008cfb.png
    img_816eac1db34d45d230d420928f5dd593.png
    img_6a576361e26fb57f878883bcdaeca956.png

4 flexbox现代布局方式(弹性盒子)

img_7390b1ba39c142a948c9a5e89a0b47c5.png
img_0ce5982d939b61e0ec17d3ae6cd90c5e.png
img_adb01fcc87823a6364c9e42e053ed731.png
img_7a2ddb5fa81e5e1d8100e18b0a7f6f31.png
img_d37aedb7a3511e4e8c13ea612dce8856.png

5 float布局

img_978aafccacb630ebf45c644149000fc8.png
img_7b47494f7914b5bc3a2b8d5cd67350a4.png
img_d105685143e632e433ed5f2e8add9825.png
图文混排
img_220a23db06de41317e81547cb0d83f2f.png
img_a98b85eb4909be2e701a7c42e657c88d.png
img_7e4dacc5e4dfcde3219f823bb876f66e.png

6 inline-block布局

img_4b6a7d554cc1a70e3f6ffc904ec389be.png
img_a3593e375f9109f3766024230e709d6e.png
img_37ff9399522aaf9b7e8ea6ffbd7a5240.png

7 响应式布局(1)

img_de51ffe1661b789184be6eec4c1cce33.png
img_2196fec928f0eecdbc2e2e264bd66ee6.png
让页面适配移动端加此即可
img_8d717833dc775c46daf831af43a9738b.png
img_9ea875e6e2383e0310b24cc38b5abc53.png

8 响应式布局(2)

9 主流网站使用的布局方式

img_20802755a19bbccb8a6719da665947c1.png
img_25b15a1ee927b5416cf83558e0cd7b71.png

看出都是 float 浮动布局分左右

img_2a722af8107a18e05b80f4502daf243b.png
结束时都 clear 清除浮动,且内容为空, display:table 或者 display:block 皆可

10 CSS面试题

img_227d32187e3cd33ebb9c352b1d706f66.png
img_dfb2971acce67f428335b3ed16d0fe8e.png
img_65ea1354a1f3904a8b2add8844fb2ca1.png
img_e16c7e020038862d3ff703d540f3180e.png
img_3e468d70591ca493e70f0c06893d53a7.png

转载地址:http://wyyba.baihongyu.com/

你可能感兴趣的文章
虚机不能启动的特例思考
查看>>
SQL Server编程系列(1):SMO介绍
查看>>
在VMware网络测试“专用VLAN”功能
查看>>
使用Formik轻松开发更高质量的React表单(三)<Formik />解析
查看>>
也问腾讯:你把用户放在什么位置?
查看>>
CSS Sprites 样式生成工具(bg2css)
查看>>
[转]如何重构代码--重构计划
查看>>
类中如何对list泛型做访问器??
查看>>
C++解析XML--使用CMarkup类解析XML
查看>>
P2P应用层组播
查看>>
Sharepoint学习笔记—修改SharePoint的Timeouts (Execution Timeout)
查看>>
CSS引入的方式有哪些? link和@import的区别?
查看>>
Redis 介绍2——常见基本类型
查看>>
asp.net开发mysql注意事项
查看>>
(转)Cortex-M3 (NXP LPC1788)之EEPROM存储器
查看>>
ubuntu set defult jdk
查看>>
[译]ECMAScript.next:TC39 2012年9月会议总结
查看>>
【Xcode】编辑与调试
查看>>
用tar和split将文件分包压缩
查看>>
[BTS] Could not find stored procedure 'mp_sap_check_tid'
查看>>