盒子阴影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

关于css阴影和浮动的更多相关文章

  1. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  2. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  3. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  4. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  5. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  6. CSS:CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  7. [CSS]float&clear浮动

    CSS float 属性 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.  可取的值 ...

  8. CSS盒子的浮动

    web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...

  9. 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

随机推荐

  1. python高级 之(一) --- 函数类型

    函数 模块 模块: 一个py文件就是一个模块, 每个模块之间是可以相互访问的 访问之前需要进行导入 分类: 1.系统提供的模块 math random 2.自己自定义的,自己封装的常用功能的的py文件 ...

  2. 【POJ - 3187】Backward Digit Sums(搜索)

    -->Backward Digit Sums 直接写中文了 Descriptions: FJ 和 他的奶牛们在玩一个心理游戏.他们以某种方式写下1至N的数字(1<=N<=10). 然 ...

  3. 解决incorrect 'only available in ES6' warning (W119) with options `moz: true, esversion: 6` 报错问题

    很多同学在新建vue项目时,会遇到 incorrect 'only available in ES6' warning (W119) with options `moz: true, esversio ...

  4. ubuntu 16.04 server 扩容(LVM)磁盘

    因为发现我的本地server出现磁盘满了的情况 所以进行lvm的扩容 1 查看磁盘情况 df -h 原本发现 /dev/mapper/ubuntu1604--vg-root 这个磁盘满了 所以要进行扩 ...

  5. 一个SQL注释引发的线上问题

    最近开始服务拆分,时间将近半个月.测试阶段也非常顺利,没有什么问题. 但上线之后的第二天,产品就风风火火的来找我们了,一看就是线上有什么问题.我们也不敢说,我们也不敢问,线上的后台商品忽然无法上架了, ...

  6. [python] 格式化方法 format

    先介绍包含的所有规则 花括号声明{}:用于渲染前的参数引用声明,花括号里可以用数字代表引用参数的序号,或者变量名直接引用. 从format参数引入的变量名 冒号: 字符位数声明 空白自动填补符的声明 ...

  7. 接口自动化框架 - httprunner 引用unittest

    httprunner其中一个比较好的点就是利用type动态创建类,使用setattr动态增加方法和属性. 将维护的用例进行转变为继承unittest.Textcase的类,很好的与unittest结合 ...

  8. hello1的web.xml解析

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.1" ...

  9. 链表--笔记--数据结构(C++版)王红梅--自我思路整理与梳理

    看到这篇文的很多人大概都知道链表是个什么玩意了.简单说就是一个又一个的指针,指针之间用指针连接起来. 本文的阅读   适合有c++基础的人群 以下: 这叫做一个结点. 这就是一个链表.我们主要使用的是 ...

  10. 2019.11.9 csp-s 考前模拟

    2019.11.9 csp-s 考前模拟 是自闭少女lz /lb(泪奔 T1 我可能(呸,一定是唯一一个把这个题写炸了的人 题外话: 我可能是一个面向数据编程选手 作为一个唯一一个写炸T1的人,成功通 ...