20200820 王维

学习总结

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属性的异同,看着好像会,实际使用起来存在问题。

标签

评论

this is is footer