学习总结

1.响应式布局

根据浏览器设备的不同而自动改变页面布局、图片和文字的效果，不影响用户的体验。

复杂页面不推荐使用响应式布局

响应式网页布局=流式布局+弹性容器+css3媒体查询

@media 条件 { 选择器{ 样式代码 } }

多个条件之间使用and连接，注意不要条件冲突

关键字：and并且 not取反 only仅仅

屏幕划分：超大屏xl：1200px以上；大屏lg：992px~1199px；中屏md：768px~991px；小屏sm：576px~767px；超小屏xs：575px以下

注意bootstrap不支持超小屏xs

2.栅格布局

父元素使用row，被分成相等的12份，主轴为x轴的弹性布局，可换行左右有15px的外边距

子元素使用col-*-n，设置子元素的最大宽度占父元素被分成12份的n份，中间的星号表示那种屏幕使用，可以不写，表示支持所有屏幕

offset-*-n列偏移 相当于margin-left，向右移动多少份， *表示划分的屏幕使用

3.弹性布局

align-content-*内容垂直对齐方式，容器内必须有多行的项目，该属性才能渲染出效果。

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

多行时align-content和align-items一起使用，显示align-content的效果

4.bootstrap组件

心得体会

align-content属性和align-items属性的异同，看着好像会，实际使用起来存在问题。