盒子阴影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. Android开发 发布相关知识

    1 三种BuildSystem简介 注意:ADT不要用了,在2017版本已经没有了.而且这就是一个巨坑,以前打包cocos的时候,学习的时候用这个,ADT是eclipse中的一个集成的东东,已经绝版, ...

  2. 如何为根分区扩容(centos7为例)

    linux系统所有的文件都是存放在根分区中的,如果根分区容量即将耗尽,我们就需要给根分区扩容,我们可以使用lsblk命令来查看,系统的根分区实际是逻辑卷,所以想要扩展根分区只要将逻辑卷扩容就可以了.此 ...

  3. 【VS开发】关于SEH的简单总结

    尽管以前写过一篇SEH相关的文章<关于SEH的简单总结>, 但那真的只是皮毛,一直对Windows异常处理的原理似懂非懂, 看了下面的文章 ,一切都豁然开朗.  1997年文章,Windo ...

  4. logstash 处理信息规律研究

    1.input file path => "/opt/50910627.log" path => "/path/to/%{+yyyy/MM/dd/hh}.lo ...

  5. docker端口映射和容器互相访问

    端口映射 容器运行时如果没有指定端口,与外界是无法通信的,比如当前我们的有一台MySQL的docker container,当前容器正在运行mysql并提供3306端口 # docker ps CON ...

  6. 【转贴】GS464/GS464E

    GS464/GS464E GS464为四发射64位结构,采用动态流水线.其1.0版本(简称GS464)为9级流水线结构,在龙芯3A.3B.2H中使用.其2.0版本(简称GS464E)为12级动态流水线 ...

  7. 封装CURD

    <?php include ('ft.php'); $db=Danli::show(); //查询 //$re=$db->table('stree')->where(['name'= ...

  8. 滚动页面产生动画WOW.js的用法

    简介 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件.WOW.js 依赖 animate.css,所以它支持 an ...

  9. zookeeperAPI的常用方法

    zookeeper支持三种部署方式: 1 单机 2 集群 3 伪集群 删除节点 zkClient.delete(path);

  10. CentOS7部署HDP3.1.0.0

    Apache Ambari是一个基于Web的支持Apache Hadoop集群的供应.管理和监控的开源工具,Ambari已支持大多数Hadoop组件,包括HDFS.MapReduce.Hive.Pig ...