美文网首页
Learn HTML&CSS the hard way

Learn HTML&CSS the hard way

作者: INTERNALENVY | 来源:发表于2016-06-05 01:02 被阅读18次

    文档流的概念指什么?有哪种方式可以让元素脱离文档流?


    文档流就是普通流,没有定位浮动什么样式的最开始的那一个层面,文档自上而下,从左到右按顺序排列。

    浮动,绝对定位可以脱离文档流。

    有几种定位方式,分别是如何实现定位的,使用场景如何?


    static         默认的定位方式,使元素存在于文档流中,可以不写

    absolute    绝对定位,使元素脱离文档流,并且按照top left right bottom属性布置位置,相对   于static以外的第一个父元素定位

    relative      相对定位,不脱离当前流,同样可以使用top等属性定位,不过是相对于自己

    fixed          同绝对定位,脱离文档流,不同的是会固定在窗口中,不随页面滑动

    absolute, relative, fixed 偏移的参考点分别是什么


    absolute 参考的是除static定位外的第一个有定位的父元素,如果父元素们都没有定位则参考根节点

    relative   参考自身

    fixed      参考浏览器窗口

    z-index 有什么作用? 如何使用?


    用于判断脱离文档流的元素们的优先级,数字越大优先级越高

    z-index:1;

    position:relative和负margin都可以使元素位置发生偏移?二者有什么区别


    都可以产生偏移,但是负margin会放弃之前占有的空间,而相对定位仍然占有之前的空间

    如何让一个固定宽高的元素在页面上垂直水平居中?


    position:absolute;

    left:50%;

    top:50%;

    margin-left:-halfpx;

    margin-right:-halfpx;

    浮动元素有什么特征?对其他浮动元素、普通元素、文字分别有什么影响?


    1.块排成一排

    2.内联元素支持宽高

    3.浮动元素自动变为块元素

    对其他浮动元素:先浮动的永远不会被后浮动的超过,浮动元素不会重叠

    对普通元素:可能会覆盖普通元素,使文档流中的元素发生偏移

    对文字:文字会跟随围绕浮动元素

    清除浮动指什么? 如何清除浮动?


    清除元素左右两侧存在的浮动元素

    clear:both/right/left;

    代码
    CODE

    CODE2

    花了两个多小时终于把页面写完了,自己有值得表扬和批评的地方。

    表扬的地方是认真了一些,放在以前,很多对不齐的地方可能就用像素值调整一下就过去了,这回按百分比来的,在各种浏览器窗口里都应该是居中的,算是经得起考验。

    该批评的是,这点东西自己几个月前就做过一遍,没想到这次还是卡了这么久,而且第二道三角形的题目开始完全没思路,只能参考同学的代码,发现大家这两道题都使用了:after和:before这两个伪类,虽然这两个类在task10的任务视频中并没有提及过。不知道大家是怎么想到用这个方法的。也许后面的视频中会出现?记得之前好像有一节答疑课老师似乎讲过这俩的用法,不过当时还没做到这个任务,印象不深,有时间好好温习一遍,不过第二道题,除了使用伪类,完全采用定位的方法应该也是可行的,不过坐标计算会相当麻烦吧。

    其实还有一个小问题,就是在设置header的时候,没有采用百分比设置,而是使用的相对定位,这里不使用绝对定位,让nav存在于heade的50%位置然后用负margin微调的方法是因为,一旦对header定位,图片和list的位置就会乱了,不知道怎么修改过来,所以采用了像素的方法。

    相关文章

      网友评论

          本文标题:Learn HTML&CSS the hard way

          本文链接:https://www.haomeiwen.com/subject/qtildttx.html