发表于: 2018-09-05 22:05:52
1 686
任务三最开始也还是挺狼狈,本来想用position定位图片的位置,结果发现无论是用absolute还是relative还是两者都用都无法精确定位,最后的位置都是很奇怪,后面查资料才知道是触碰了BFC。其实布局很重要,将图片分成三个部分,设置三个div,引入img全部修改成block,里面所有的数据值都是用em和百分比来代替。
关于BFC:
BFC全称:block formatting context,意思是块级格式化上下文,它是一个独立的渲染区域,只有块级盒子参与,规定了内部的块级盒子如何布局,并且与这个区域外部毫不相干(盒子内部的元素不会影响到这个盒子的外部元素,盒子外部的元素也影响不了这个盒子的内部);display属性为block,list-item,table的元素,都会生成块级盒子block-level box,并且参与BFC.
BFC的布局规则:
1.内部的盒子会在垂直方向一个接一个的放置;
2.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠;
3.每个元素的margin box的左边,与其父元素的border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此。
4.BFC的区域不会与float box重叠(个人理解就是浮动元素不会盖住普通流中的元素).
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是一样.
能够生成BFC的元素:
1.根元素;
2.float属性不为none;
3.position的值为fixed或absolute;
4.display为inline-block、table-cell、table-caption、flex、inline-flex;
5.overflow的值不为visible
关于position:
1.absolute,关于absolute有一个层模型必须要注意,当一个元素成为绝对定位元素时,它会脱离原来的层跑到上面的层去,意思就是它会脱离原来位置进行 定位。
2.relative,保留原来位置进行定位,它是相对于最近的有定位的父级定位,如果没有最近的有定位的父级就相对于文档定位。
3.fixed,相对于视窗定位。
如何进行自适应网页设计:
1.允许网页宽度自动调整(添加meta name="viewport" content="width=device-width,initial-scale=1.0")
2.不使用绝对宽度布局,多使用%和auto.
3.字体多用rem.
4.使用流式布局,谨慎使用绝对布局
text-align是针对文本的对齐方式,可以设置为left左对齐,center居中,及right右对齐;margin:0 auto;是用于设置块状元素的居中,用于调节<img>标签时,不能起作用,<img>是内联元素,可以把<img>转换为块状元素display:block;便可以使用margin:0 auto;
水平居中设置
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%
垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
今天完成的事情:任务三终于在我的摸索下完成了。
明天计划的事情:完成任务四加n+1篇代码
遇到的问题:position里面的absolute和relative比较棘手,设置出来后的位置很奇怪;页面布局还是比较弱
收获:太多了,上面的知识就是一部分,还有下次代码写不出来或者代码网页显示很奇怪的时候,不要一个人苦想,可以找找资料,或许资料里就有答案
评论