• 前端学习(二)


    什么叫浮动:

    问题:现在有两个div,我希望将两个div放在同一行上?

    页面上块级元素单独占一行,行内元素可以一行放多个,这样的格式叫做标准流(文档流),normal flow.(浏览器默认排序方式)。

    如果要让两亿块级元素同时放在一行中,这个时候就必须脱标(脱离标准流。)

    1  Float: left/float:right

    浮动分为两种:左浮动,右浮动。

    浮动可以理解为:在一个游泳中,标准流是我们在池底放盒子,浮动就相当于放的这个盒子“飘起来了”。“飘起来了”的盒子会遮住池底盒子。

    浮动的特点:

    1)浮动找浮动,不浮动找不浮动

    2)浮动的盒子中上对齐,并且左浮动与右浮动位置相反的。

     3)浮动只会影响当前盒子以下的内容,以上的内容不会影响。

    总结:浮动的出现,使得页面的布局更加灵活,但是一般情况能够不使用浮动的话,尽可能的不要使用浮动(浮动相对于SEO来说不太友好,因为它脱离标准流)。

    4)如果一个div没有设置高,这个div中的所有的元素都浮动了,那么这个div的高是0;

    Css中常用的属性:

    List-style:none;去掉li标签之前小点

    text-decoration:none;去掉超链接的下划线

    Margin: 0 auto;让div居中(div是一个块级元素)

    让文字居中:

    水平:text-align:center;

    垂直:line-height:height;

    浮动:

    Float:left/right;

    清除标签中默认的内外边距:

    * {margin: 0 ;padding: 0}

    背景图片可不可以将容器撑开。

    一个div不能放两张背景图片。

    SEO中有个特点:

    如果将关键字全部放在一起,那么SEO会认为你这是在作弊。

    约定:在制作网页的过程中,如果涉及到了页面的宽高的问题,最好用width和height去解决,才用padding,最后才考虑margin.

    因为margin在布局中会存在兼容性的问题,

    1)ie6的双边距bug。(使用了浮动,浮动之后用margin-left)

    2)边距合并现象:(只出现块级元素:不包括行内元素以及行内块级元素)

    如果两个同级的div上下排序,上面div有下margin,下面的div有上margin,就会出现边距的合并现象,两者之间的取值是按最大值来计算。

    3)父子元素之前的边框合并现象:

     

    如果父子元素之间没有边框,那么给子元素设置一个margin-top,那么父元素也会拥有这个属性。

    解决方法:

    A)给父元素设置边框。

    B)给父元素一个属性:overflow:hidden.(这个强制记住)

    4)如果给页面的第一个div设置浮动,页面的第二个div不浮动,但是有margin-top,那么将来第一个浮动的div会加上第二个div的margin-top显示。

    浮动影响:

    如果在一个大的没有设置高的div中有两个小的div,那么这个大的div的高就是这两个小div之和,但是一旦两个小的div都浮动了,那么大的div就没有高了---------浮动之后div不会撑开父容器。

    浮动清除:

    1)(不属于清除浮动,可以使用这种方法消除浮动影响)

    设置具体的高度。(可以用尽量用)

    但是,有时间页面上的某些容器,不能直接设置高度,那么高度不能确定,必须使用清除浮动。

     2)清除浮动:

    Clear:left   clear:right   clear:both

  • 相关阅读:
    Vue 计算属性(四)
    Vue 方法与事件(三)
    Vue 基本指令使用(二)
    Vue 项目开发环境搭建(一)
    SpringBoot 整合 Dubbo
    Nginx 中 include 指令使用
    Nginx 中 root 和 alias 的使用区别
    JS动态修改网站图标以及标题
    vue中使用轮播图插件carousel,克隆的图片点击事件无效的解决办法
    根据 url + fileName下载文件,并更改文件名
  • 原文地址:https://www.cnblogs.com/famensaodiseng/p/6640128.html
Copyright © 2020-2023  润新知