今日知识点:
-
浮动布局
-
背景属性
-
显示与隐藏属性
-
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.浮动影响单向向下传递
-
任何类型的元素只要添加浮动属性就不用区分元素类型,变成了并排的块可以设置任何盒模型
属性
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预留位置。 右侧列固定同理
-
代码演示
-