zoukankan      html  css  js  c++  java
  • 小白学前端04

    1.发现无论知乎还是百度百科的网页都实现了一个效果即在header栏里面元素全都是居中显示的

    2.类选择器也可以按照后代选择器一样  .conent .news{}仍是后代选择器的效果

    3.内联元素不能设置宽和高,那么css mastery的例子:
    .onntent .secondary{
        320px;
        ...
        display:inline;
    }  把display放置在首行的话,宽度就失效了吗?

    测试:
    .primary{ 500px;border: 0.1em solid grey;}
    .primary{ 500px;border: 0.1em solid grey; display: inline;}
    当.primary属性不加float时,加上display:inline,则真的宽度失效了
    但是加上float:left后:
    .primary{ 500px;float: left; border: 0.1em solid grey; display: inline;}
    display:inline的效果失效
    >>>网上的解释:浮动对象的display特性将被忽略,float在绝对定位和display为none时不会被应用

    4.重看了css mastery的关于相对、绝对定位和浮动的部分,又发现了很多以前误解的地方:

    1.绝对定位是什么:
    绝对定位是相对于最近的已定位(absulote/fixed/relative)的祖先元素,若无已定位的祖先元素则相对于初始包含块(而不一定是根元素)
    另附上知乎关于初始包含块的讨论:https://www.zhihu.com/question/19926700

    2.绝对定位的使用:
    在使用相对定位的祖先元素的情况下,完全可能只使用绝对定位就创建出整个设计(例如使文本段落对准大框的右下角),为此这些元素需要具有固定的尺寸,
    因为如果扩大绝对定位的框(例如通过增加字号),而周围的框不会重新定位,这样就会导致绝对定位的框产生重叠,从而破坏精心的布局(固定尺寸的布局)


    3.浮动是怎么动的? :
    浮动的框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘

    4.为什么要用clear?:
    浮动会让元素脱离文档流,不再影响不浮动的元素,实际并不完全如此,要了解css起初创建浮动属性的目的其实是为了实现文本围绕图像,按照head first html里面的说法其实是内联元素靠在浮动元素边界

    要想阻止内联元素围绕在浮动框的外边,需要对包含这些内联元素的块级元素应用clear属性,clear属性的值表示框的哪些边不应该挨着浮动框,有一个误解是,clear属性会自动的抵消前面的浮动,
    但是实际是,在清理元素时浏览器会在元素顶上添加足够的外边距,使元素的顶边缘垂直下降到浮动框下面:


    5.浮动与绝对定位的区别:
    对元素进行清理实际上让周围的元素为浮动元素留出空间——这解决了绝对定位的问题:因为自动调整了,就不再会产生重叠


    6.空元素清理:
    如图,clear是表示框的哪些边不应该挨着浮动框,但如图中所示,空元素的两边不都不挨着浮动元素吗?


    不,错误在于你忘记了float元素脱离了文档流,导致br元素顶上去了
    那照着书中的图,万一出现这种情况不还是不奏效吗?

    不,不会,测试如下,空元素顶上去后正好在float元素之下,即使br为行内元素,但是它也是替换元素,表现出了行框



    6.一个比较深的疑问:
    css mastery p51页写到为避免浮动元素导致包围的div不占据空间的现象,一共有四种方法:加空元素/浮动容器div/用overflow/用.clear:after来动态添加清除标记
    其中的2:.news{float:left;} .news img{float;left;} .news p{float:left;}这样由特殊性来看会先加载.news img和.news p属性那这样不容器元素已经变成了空?再加载.news浮动的时候还有用吗?


  • 相关阅读:
    java数据结构-循环链表实现
    java数据结构-普通链表实现测试
    java数据结构-普通链表实现
    java数据结构-排序算法-插入算法
    java数据结构-排序算法-快排算法
    java数据结构-递归算法-简单递归算法
    python------------------异常处理
    自定义Web框架
    Django框架第一篇
    Django框架之第二篇
  • 原文地址:https://www.cnblogs.com/giggling/p/6838990.html
Copyright © 2011-2022 走看看