发表于: 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比较棘手,设置出来后的位置很奇怪;页面布局还是比较弱

收获:太多了,上面的知识就是一部分,还有下次代码写不出来或者代码网页显示很奇怪的时候,不要一个人苦想,可以找找资料,或许资料里就有答案



返回列表 返回列表
评论

    分享到