zoukankan      html  css  js  c++  java
  • 关于css阴影和浮动

    盒子阴影box-shadow

    box-shadow:0 0 1px #000 inset;

    水平  垂直   模糊  颜色 ;

       [1] inset代表框内阴影,不加inset代表框外阴影

       [2]第1个值为0时,代表左右边框阴影为1px范围
          第1个值为正整数 代表左边框阴影
          第1个值为负整数 代表右边框阴影
          同理
          第2个值为0 代表上下边框阴影
          第2个值为正整数 代表1px阴影距离上边框多少
          第1个值为负整数 代表下边框阴影设置

    (注意:box-shadow:0 0 10px 颜色 ;四周发光;)

    四、 float浮动问题

    [1] 元素的高度是由他的子元素来决定的,当一个元素的子元素都浮动后该元素就没有高度了

    [2] 当一个元素float 以后它的父亲,和兄弟认为它不存了

        它不再参与父亲高度的计算

        兄弟会占据他原来的位置

    [3] 它的宽度就不再独自占一行而是由他的文字(内容的宽度)来决定。

    [4] 不管怎么float 它都不会超过父亲的范围。

    [5] 谁先float 谁优先靠在父亲元素的左侧或者右侧(html标签在前面,就是先)

    [6]只要浮动元素前面有 内容无论行内还是块级浮动元素都会另起一行;

    [7]行内元素设置float 以后会转换为块级别元素

    [8]浮动元素都是从父亲的左侧或者右侧开始水平排列 ,如果父亲元素宽度容不下该元素,该元素就会另起一行

    [9] clear:left;指该元素左边不准出现浮动元素

        clear:right 右边不准出现浮动元素

        clear:both 该元素左右都不准出现浮动元素(无论怎样单独占一行)

    [10]只有父亲元素最后一个元素没有浮动 ,父亲元素的背景就会包括所有的子元素

    解决子元素都浮动后父亲元素没有高度的办法

    给该父亲元素添加 clearfix class名

    .clearfix:after{ content:""; display:block; clear:both; height:0; visiblity:hidden;}

    清除浮动的几种方法:

    下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 
    1,父级div定义 height

  • 相关阅读:
    TestCafe 快速上手(一)
    Github Page & Jekyll 搭建博客
    SQL注入学习笔记
    DVWA 渗透测试(SQL)平台搭建 XAMPP + Windows
    JavaScript小技巧
    react中引入css的方式有哪几种?区别?
    TypeScript 中接口的理解?应用场景?
    TypeScript 中枚举类型的理解?应用场景?
    Typescript 的数据类型有哪些?
    TypeScript 的理解?与 JavaScript 的区别?
  • 原文地址:https://www.cnblogs.com/langwo/p/7078316.html
Copyright © 2011-2022 走看看