显示与隐藏
1、display:none;
隐藏元素，不在占有原有位置。
display：block；除了转换为块级元素之外，同时有显示原色的意思。
2、visibility（可见性）：hidden； 继续占有原有位置
visibility：visible 元素可视
3、overflow（溢出）指定如果内容溢出一个元素的框时，会发生什么？？？
visible默认值，显示内容溢出盒子
auto：溢出的时候显示滚动条，不溢出就没有滚动条。
scroll：溢出的时候显示滚动条，即使没有溢出也会显示滚动条。
hidden：溢出的文字隐藏。
=如果有定位的盒子，请慎用overflow:hidden
提示工具
提示文本放在内联元素上(如 <span>) 并使用
类名class=“tooltiptext” （tooltip n.提示框）（tooltiptext n.提示文本）
提示工具显示在右侧
实例：
提示文本显示在右侧
需要使用 margin-left 属性 数字来源是使用宽度的一半来居中对齐，
.tooltip .tooltiptext { width: 120px; bottom: 100%; left: 50%; margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */ }
浮动
特性：1.脱离标准普通流的控制（浮）移动到指定的位置（动）俗称托标
2.不再保留原来的位置
3，如果多个盒子都设置了浮动，他们会按照属性值一行内显示并且顶端对齐排列（浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些，则会另起一行来设置）
4．任何元素都可以浮动，不论原先是什么模式，添加浮动之后具有行内块元素相似的特性。不用转换为块级|行内块元素，就可以设置高度和宽度。
5.一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
注意权重的问题
先设置盒子的大小，之后设置盒子的位置
边框形式
浮动的盒子只会影响后面的标准流
清除浮动
为什么要清除浮动呢？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0，就会影响下面的标准流。
语法
选择器{clear：属性值；}
值：left（清除左侧浮动的影响），right，both。实际工作中，几乎只用both
方法
1）额外标签法 不常用
2）父级添加overflow属性
3）父级添加after伪元素
直接复制调用即可
4）父级添加双伪元素
min-height、min-width
当我们不知道中间内容区域有多高，而又想让该区域的高度恰好能放下中间内容区域时，使用min-height;
不用
用
但min-width会继承父元素的width，min-height不会，
且 min-width适用于display:inline
Display: inline-block也可以但是会牵扯到其他元素
不可用于内联元素
hover
：hover前加空格，本身不会有：hover的效果，而后代会有：hover的效果
鼠标经过class="one"的盒子是背景不变，而经过one中其他div时，背景颜色发生改变
！important
使用建议：
• 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
• 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
• 永远不要在你的插件中使用 !important
• 永远不要在全站范围的 CSS 代码中使用
css图像透明
Opacity：（透明度）
当用户将鼠标悬停在图像上时，我们希望图片是清晰的。此时CSS是：opacity=1.
图像拼合效果
单个图像的集合，会降低服务器的请求数量，节省宽带。
eg:
img.home { width: height:
(需要的图片的高宽)
background:url() 0,0; }
url()中为图像的地址
0，0 定义背景图像和选择的位置（左0px，顶0px）
计数器
根据规则递增变量
counter（计数器）-reset（重置） 创建或重置计数器
counter-increment（增量） 递增变量
content 插入生成的内容
counter()和counters()函数 将计数器的值添加到元素
Eg：
过渡
元素从一种样式逐渐改变为另一种效果，要实现这一点，必须规定两项内容，
指定要添加效果的属性。
指定效果的持续时间。
多项要用都逗号隔开
例：
2D转换
2D变换方法：
- translate(X,Y),（向左，从顶部向下） 为正方向
- rotate（），在一个给定度数顺时针旋转的元素，单位deg
- scale(),该元素增加或减少的大小，取决于宽度(x轴)和高度(y轴)的参数，单位是倍数。
- skew()，单位,包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表相反方向倾斜skewX表只在X轴倾斜；skewY表只在Y轴倾斜
- matrix(),包含六个参数，旋转，缩放，移动，和倾斜功能。
CSS3 3D
rotateX围绕其在一个给定度数X轴旋转
rotateY围绕其在一个给定度数Y轴旋转
rotateZ
当同时有位移和其他属性时，需要把位移写到最前边
transform-style:flat
子元素不开启3D空间，默认的
transform-style:preserve ,子元素开启3D空间
写给父元素，作用于子元素
多列
column（列）
属性 column-*
• column-count指定须分割的列数
• column-gap指定列与列之间的间隙，单位PX
• column-rule-style列与列间的边框样式
• column-rule-width两列的边框厚度
• column-rule-color两列的边框颜色
• column-rule是column-rule-*的缩写
• column-span元素跨越多少列
• column-width列的宽度
CSS3用户界面
调整元素的尺寸，框尺寸，外边框
调整尺寸(Resizing)resize：both
resize属性指定一个元素是否应该由用户去调整大小
外形修饰（outline-offset）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
轮廓与边框的区别：轮廓不占用空间，可能为非矩形
Eg；border:2px solid black; outline:2px solid red; outline-offset:15px;
offset（偏移）
CSS3图片
- 圆角图
圆角图片:
img { border-radius: 8px; }
椭圆形图片:
img { border-radius: 50%; }
- 略缩图
使用border属性创建略缩图 - 响应图
自动匹配各种尺寸的屏幕
Max-width: 100% - 图片文本
- 图片滤镜
Filter: - 响应式图片相册
- 图片 modal（模态）
CSS按钮
Display: inline-block;
Font-size 设置按钮的大小
鼠标悬停按钮
使用：hover选择器来修改鼠标悬停在按钮上的样式
Transition-duration 设置hover效果的速度
🈲用按钮
我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)
cursor: not-allowed;
我们可以添加 cursor 属性并设置为 “not-allowed” 来设置一个禁用的图片:
按钮组
移除外边距并添加float：left； 来设置按钮组
带边框的按钮组
添加边框属性即可
框大小
box-sizing 属性在一个元素的width和height中包含padding（内边距）和border（边框）。
如果在元素上设置box-sizing：border-box；则padding（内边距）和border（边框）也包含在width和height中。
弹性盒子
定义弹性子元素如何在弹性容器内布局
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器
display：flex
display：inline-flex
定义为弹性容器
弹性子元素
属性
