布局与定位

相对定位、绝对定位

HTML和CSS高级指南之二——定位详解:大漠老师手把手教你,这次彻底搞懂定位问题

margin重叠
布局、overflow溢出
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

margin:auto;

居中问题

浮动float

创建一全页面的布局时,浮动是一种常用的方法,也是页面元素定位的一种基本功能。浮动可以让元素一个挨着一个。浮动可以创建一个自然流布局,同时充许元素设置自身尺寸和其父元素容器的尺寸大小。

css

清除浮动

overflow、clearfix

清除浮动(clearfix hack):清除浮动是什么,如何简单地清除浮动

清除浮动Clearfix

StackOverflow:Which method of ‘clearfix’ is best?:清除浮动黑科技完整解读

display

定位

技术文档:定位属性

 

top、bottom、right、left

position

visibility

 

Learn CSS Positioning in Ten Steps:通过具体的例子熟悉 position 属性

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

https://medium.com/youstart-labs/beginners-guide-to-choose-between-css-grid-and-flexbox-783005dd2412

CSS布局设计

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout_mode

Float浮动方式

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats

固定布局

三大布局方式

类似于BootStrap的栅格系统、Flexbox布局、Grid布局

https://juejin.im/entry/5a2f458af265da432840d1fd

https://zhuanlan.zhihu.com/p/46757975

流式布局

响应式布局

http://zh.learnlayout.com/

https://zhuanlan.zhihu.com/p/26259608

Flexbox布局

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges

技术文档:Flexbox属性

居中问题

https://www.cnblogs.com/moqiutao/p/4807792.html

flex处理方式

让一个元素比如图片在另一个元素里水平居中、垂直居中或水平垂直居中在以前一直是一个比较复杂的事情,但是有了flex布局方式之后,这一切就变得相对简单。

 

z-index

Grid布局

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Card

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

本节任务