css（三）

盒子阴影

  1、定义：向div元素添加影子
  2、使用：四个属性值 水平阴影 垂直阴影 影子模糊距离 影子的颜色
        box-shadow: 60px 30px 10px #ff0000;

浮动

1、标准流（文档流）：元素按部就班按照自身的特性排列 2、浮动定义：元素会脱离标准普通流的控制，移动到指定位置的过程 3、使用： (1)左浮动：float：left (2)右浮动：float：right


浮动造成影响

(1)浮动后的元素会脱离标准流，漂浮在其他没有浮动的盒子上边 (2)浮动后的两个块状元素会在同一行显示 (3)浮动后的元素不占有原来的位置 (4)浮动后的元素不会超出父元素的范围 (5)浮动后的元素自动的转化为行内块元素 (6)浮动后的元素不超过父元素的内边距

清除浮动

1、定义：清除浮动：并不是清除浮动，而是清除浮动所带来的影响 2、为什么要清除浮动？ ①浮动后的元素不会撑开的父元素的高度，因为浮动是不占位置的 3、如何清除浮动？ ①额外标签法：在浮动元素的后边加上标签 （1)<div style="clear: left;"></div>  （2)清除左浮动 clear: left （3)清除右浮动 clear: right （4)清除左右浮动 clear: both   （5)优点：通俗易懂，书写方便 （6)缺点：添加了额外的标签，结构化差 ②overflow属性：在父元素中添加 （1)overflow: hidden;  （2)overflow: scroll;  （3) overflow: auto;  （4)优点：但是代码简洁  （5)缺点：   盒子中多余的内容会被隐藏掉  ③使用after伪元素清除浮动：给父元素添加 （1).clearfix::after { content: ' '; display: block; clear: both; }  （2)优点：符合闭合浮动思想 结构语义化正确 （3)缺点：IE6-7不支持:after ④双伪元素清除浮动:给父元素添加after以及before伪元素 （1).clearfix::after, .clearfix::before {  content: '';display: table;clear: both; } （2) 优点：代码简洁 （3)缺点：IE6-7不支持:after

 

版心与布局流程

  1、版心定义：版心：网页中主体内容所在的区域
  2、布局流程：
        (1)确定页面的版心（可视区）。
        (2)分析页面中的行模块，以及每个行模块中的列模块。
        (3)制作HTML结构 。
        (4)CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
  3、概括布局流程
        由外到内、由大到小