day05

今日知识点:

1. 浮动布局

2. 背景属性

3. 显示与隐藏属性

4. css图片

CSS背景

CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。

background-color

background-color 属性，设置元素的背景颜色。

常用的值

• color_name 规定颜色值为颜色名称的背景颜色（比如 red）

• hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。

• rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。

• transparent 默认。背景颜色为透明。

提示：背景应用于由内容和内边距、边框组成的区域

background -image

background-image 属性，为元素设置背景图像。

background-image:url(" 图片资源路径 ");

常用的值

• url(‘URL’) 指向图像的路径。

• none 默认值。不显示背景图像。

元素的背景默认绘制区域包括内边距和边框。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

我们也可以通过 background-repeat 属性可以改变背景图像的平铺方式。

background -repeat

background-repeat 属性，设置是否或如何重复背景图像。

常用的值

• repeat 默认。背景图像将在垂直方向和水平方向重复。

• repeat-x 背景图像将在水平方向重复。

• repeat-y 背景图像将在垂直方向重复。

• no-repeat 背景图像将仅显示一次。

background -position

background-position 属性，设置背景图像（由 background-image 定义）的起始位置。 背景图像如果要重复，将从这一点开始。

语法：background-position: xpos ypos;

一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定 了一个值，另一个值将是 50%。

取值

• 关键字：top、bottom、left、right 和 center ; 指定图像放置于元素内边距区域的位置，一个对应水平方向，另一个对应垂直方向。 左上角为：left top;

• 长度值 指定图像相对于元素 内边距区左上角的偏移量。左上角是 0 0，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上

• 百分比 指定百分数值将同时应用于元素和图像，左上角是 0% 0%；右下角是 100% 100%。 如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。

background简写

background是背景复合属性，在一个声明中设置所有背景属性。

语法：background:bg-color bg-image bg-repeat bg-position;

background: red url(“bgimage.jpg”) no-repeat left top;

• 当使用简写属性时，属性值的顺序为：:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

  如果某个属性不需要设置，可以省略。

  img和背景属性插入图片的区别:

  1. 背景图片以px精确控制图片位置 要比img灵活
  2. 加载顺序不同 img先加载  背景图后加载 
  ​
  适用： 跟数据没关系 起修饰作用的大图 用背景图 跟数据有关联的用img

CSS显示隐藏

display:

• none：隐藏该元素并且该元素所占的空间也不存在了。(文档结构里移除了)

• block; 显示元素

• 适合不频繁 鼠标移入 鼠标点击触发时

visibility:

• hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。（还在文档结构里 只不过透明度为0）

• visible 显示元素

• 适合频繁显示和隐藏

CSS图片

清除图片下间隙

原因：图片默认与文本的基线对齐

解决方法一：将图片显示为块

img{display:block;}

解决方法二：改变图片的对齐方式，

img{vertical-align:不为baseline}

图片居中

方法1：父元素{text-align:center}

方法2：img {display:block;margin:0 auto;}

CSS 浮动

学习目标

• 掌握浮动属性的应用

• 熟悉浮动元素的基础特性

• 能够说出浮动产生的的问题

• 掌握清浮动的方法

概述

网页中有很多布局效果，标准流normal flow没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）

·专业解决并排·： 行内，行内块，块 + 浮动----》并排！！

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

浮动属性

• float

  • left 左浮动

  • right 右浮动

  • float:none 不浮动(默认值 默认标准流)

浮动的基本特性

特性：

1.找父盒子左右边界 遇到浮动元素or行内类型元素立即停止浮动

2.浮动打破标准流状态，形成浮动流

3.浮动元素提升层次 压盖标准流元素 但是不压盖文本流

4.浮动影响单向向下传递

1. 任何类型的元素只要添加浮动属性就不用区分元素类型，变成了并排的块可以设置任何盒模型

   属性

float:left 靠近父盒子的左边界排放
float:right 靠近父盒子的右边界排放
每一个并排的盒子都必须写浮动！！！！
​
特性：
​
浮动元素会脱离标准流  不占据界面位置 形成了层次 压盖底下的标准流元素
标准流 但是不脱离文本流(文本环绕浮动元素放置！！)
浮动元素遇见浮动元素立即停止
​
          
影响：
    浮动子元素不占据界面位置，导致父盒子里没有内容撑开高度
    父盒子高度是0(height:0)-----高度塌陷！      
​
​

浮动的问题（为什么要清浮动）

• 子元素浮动导致父元素高度塌陷(height为0)（本质原因: 浏览器不计算浮动元素高度）

• 影响之后元素的布局

浮动带来的影响

浮动带来的影响：父盒子高度为0(高度塌陷！) 原因：

       因为浮动元素不占据界面位置 浏览器不会计算浮动盒子的高度！---父盒子高度为0
       下面的盒子上移被浮动盒子压盖！！
​
    解决办法了:
       (1) 给父盒子定高度 (height:npx;)
          缺点:不实际  因为有些父盒子他就不能定高 高度必须是auto
​
       (2) 利用BFC规则 
           BFC里有一条规则说：如果父盒子是BFC盒子，那么这个盒子里的浮动子元素
           也参与高度计算！！！！
           父盒子+overflow:hidden---父盒子触发成为密闭独立的BFC盒子！！！
​
           缺点：溢出隐藏的作用会把故意溢出的内容切掉！！！
                    
       (3) 专门创造一个css属性 清除浮动影响
           clear:left清除左浮动/right清除右浮动/both两侧都清
           clear:both;
           浮动气流是单向向下影响的！！！
​
           缺点：添加空标签  结构繁杂 不清晰的！！！
​
       (4)拿css代码创造标签插入到最后一个浮动子元素的下面就可以了！！
           css代码确实能创造元素---伪元素法
           .clearfix::after {
               content:'';
               display:block;
               clear:both;
           }

清浮动的方法

解决问题即清除动的方法

• 父元素固定高度法

  • 描述：给浮动元素的父元素固定高度

  • 缺点：不够灵活

  • 代码演示

• 父元素overflow方法

  • 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现

  • overflow:hidden/scroll/auto 触发BFC盒子的形成 ，只要是BFC盒子那么它内部的浮动子元素也会参与高度计算

  • 缺点：可能会隐藏内容或触发不需要的滚动条

• 额外标签法

  • 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both;

  • clear属性说明

    • 作用：清除浮动

    • 取值

      • left both right

      • 提示通常使用both,

    ==清除浮动影响的是只能块类型！！==

  • 缺点：代码冗余，影响代码可读性

• 伪元素:after

  • 描述：给浮动标签的父标签添加

    .clearfix::after{
         content:"";
         display:block;
         clear:both;
    }
    写到浮动子元素的父盒子身上

  • 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用

  • ie8-不支持双冒号 用单冒号 不考虑兼容性问题那就写双冒号

伪元素

伪元素作用：用css代码创造元素

语法如下:

 通过伪元素创造两个元素 插入到box盒子的内部 
​
 伪元素都是行内类型！！！
        
        E::after { 创造一个元素插入到E元素的所有内容之后
​
            content:"";//写伪元素文本
​
​
        }
        E::before {创造一个元素插入到E元素的所有内容之前
           content:"";
        }
           
      

== 注意：==

1. 一个元素只能有两个伪元素 ::after ::before

2. 伪元素必须要写content属性

3. 可以写:: 也可以写:

: 针对低版本浏览器(ie8及其以下)

:: 针对是高版本的浏览器

==适用场合：与数据没有太大关联 起到修饰作用的小盒子！！==

浮动特性应用实例

1、实例图文绕排

• 总结：浮动脱离文档流不脱离文本流

2、两列自适应

• 实现要点：单列定宽，单列自适应

• 浮动实现

  • 说明： 左侧列固定，左侧浮动，右侧列使用margin-left预留位置。 右侧列固定同理

  • 代码演示