一、学习内容
CSS的浮动
传统网页的布局三种方式
标准流：就是标签按照规定好的默认顺序方式排列
1、块级元素：块级元素会独占一行，从上而下顺序排序
2、行内元素：行内元素会按照顺序，从左到右进行排序，碰到父元素的边缘会自动换行
浮动：
为什么需要浮动：
有很多情况是标准了无法完成或者不好完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列顺序
浮动的典型应用：
可以让镀铬块级元素一行排列显示
网页布局的准则：
多个块级纵向排列找标准流，多个块级元素横向排列找浮动
浮动的语法：
float属性可以创建浮动
属性值：left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
浮动的特性：
1、浮动的元素会脱离标准流（脱标）
2、浮动元素会一行显示并且元素顶部对齐
3、浮动会具有行内块元素的特性
4、浮动的元素不会压住自己下面盒子的文本内容，因为浮动的特性就是为了做到文字环绕的
浮动布局的注意点：
1、浮动和标准流父盒子的搭配
先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置
2、一个元素浮动了，其他的兄弟元素理论上也要跟着浮动
浮动的盒子只会影响后面的标准流，不会影响前面的标准流
清除浮动：
为什么要清除浮动
如果父盒子没有添加清除浮动，那么子盒子浮动不占位置，父盒子不指定高度的话，后面的标准流会紧挨着父盒子进行排列，所以要清除浮动
额外标签法（隔墙法）
w3c推荐的做法，但是我们实际工作中基本不用（结尾给块级元素清楚浮动；clear：both；）
给父级标签添加overflow属性
给父级添加after伪元素
父级添加双伪类元素
定位：
为什么要用定位？
当我们滚动屏幕的时候，定位可以将盒子固定到某个位置
某个元素可以自由在合资内移动位置，并且会压住盒子
定位的使用
定位=定位模式+边偏移
定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
定位模式：
值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
position：static（静态定位）
position的默认定位方式，食物定位的意思，没有边偏移，基本不用等于标准流
position：relative（相对定位）
特点：1、是相对于自己原本的位置进行移动的（参照点是自己原来的位置）
2、原来位置的标准流位置继续占有，后面的盒子依然以标准流的方式来对待他
3、相对位置没有脱标
position：absolute（绝对定位）
特点：1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准进行定位
2、如果祖先元素有定位（相对绝对固定位置）自已最近一级有定位的祖先元素为参考点进行偏移
3、绝对定位不占有原先的位置（脱标）
4、相对定位最大的最用就是给绝对定位当爹的（子绝父相）
position:fixed(固定定位)
概念：固定定位是元素固定于浏览器可视区域的位置，主要使用的场景：在浏览器页面某个元素需要固定在一个位置，不随屏幕滚动而滚动
特点：
1、以浏览器可视窗口为参照点
不跟父元素有关系
不随滚动条滚动
2、固定定位不在占有原来的位置（脱标）
position：sticky（粘性定位）
概念：是为了网页中元素达到一定的变偏移条件是，停止屏幕滚动效果 特点：
1、以浏览器德克士窗口为参照点移动元素
2、不占有位置（脱标）
定位的叠放次序
定位模式 是否脱标 移动位置 是否常用
static 不脱标 不能使用变偏移 很少
relative 不脱标 相对自身原来位置进行唯一 常用
absolute 脱标 相对于最近一级的有定位的父元素，如果父元素都没有，那么以浏览器为标准 常用
fixed 脱标 浏览器的可视区域 常用
sticky 脱标 浏览器的可视区域 很少
可以使用z-index来控制盒子的前后顺序（网页中的Z轴）
数值可以使正整数、负整数、0，默认是auto，数值越大，月考上
如果数值相同按照书写顺序，后来者居上
数字后面不加单位
只有定位的盒子才有Z-index属性
定位的拓展
绝对定位的盒子居中
加了绝对定位的盒子不能使用margin:0 auto；来水平居中，但可以通过计算来实现
1、left：50%；然盒子的左侧移动到父级元素的水平中心位置
2、margin-left：-150px；让盒子向左移动自身宽度的一半
3、垂直同理
定位的特殊性
1、行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
2、块级元素添加绝对定位或者固定定位，如果不给宽高，默认大小是内容本身的大小
脱标的盒子不会触发外边距塌陷的问题
浮动且对定位/固定定位，元素都不会触发外边距塌陷的问题
字体图标：阿里图标
元素的显示和隐藏
display：显示与隐藏
属性值：
none：隐藏对象
block：显示对象
display隐藏后不占原本的位置，后期经常与JS在一起使用
visibility：显示与隐藏
属性值：
hidden：隐藏
visible：元素可见
visibility属性用于指定一个元素的显示与隐藏
使用visibility：hidden来隐藏元素时，元素仍然占有原来的位置
overflow：益处显示与隐藏
属性值
visible：显示（不剪切也不添加滚动条）
hidden：将超出盒子部分隐藏掉
scroll：给盒子添加滚动条（不管内容超没超出父盒子高度都会显示滚动条）
auto：给盒子添加滚动条（文本超出父盒子高度则显示滚动条，没超出的话不会显示）
CSS其他技巧
1、精灵图
为什么要用精灵图
多张小的图片整合成一张大的图片给返回给浏览器，避免重复请求，减轻服务器压力
精灵图的使用步骤
1、获取所需要的小图标大小
2、设置一个盒子来放我们需要的小图片，尺寸和我们做需要的小图标大小一致
3、background-image：URL（）；将背景引入盒子
4、利用background-position来调整背景图片的位置，已显示我们所需要的图标，注：X和Y轴的像素值一般都是负值，最大是0
输入框删除外框：
代码：border:0;
删除内边框： outline: none;
2、鼠标的样式
属性 样式
cursor：default 默认的鼠标样式
cursor：pointer 小手鼠标样式
cursor：text 输入文本时的鼠标样式
cursor：move 鼠标拖动时的样式
cursor：no-allowed 禁止的鼠标样式
3、文本的上下对齐方式
vertical-align目的：为了让行内元素或者行内块元素按照不同的方式来进行对齐
文字的各个线说明
顶线、中线、基线、底线
vertical-align: baseline； 基线对齐（默认）
vertical-align: bottom; 底线对齐
vertical-align: middle; 中线对齐
vertical-align: top; 顶线对齐
备注：
图片的地步有空白的原因：图片默认和文字保持基线对齐，所以下方空白是为了给文字底部预留的空间
想让图片与文字沿中线对齐，可以直接使用verticalalign：middle；来实现
CSS三角制作
制作三角的步骤：
1、设置边框的宽度，样式、颜色设置为透明
2、将所需要的边框亚瑟设置为所需要的即可
CSS省略号制作：
步骤：
1、将文字强制一行显示
2、将超出盒子的文字给切掉
3、姜切掉的文字用省略号来代替
CSS滑动门制作
步骤：
1、a标签来实现精灵图左边
2、span标签来实现精灵图的右边
3、指定padding来城开盒子
二、问题
无
三、解决方案
无
|
