css3

·一般font-size等都是用到文本的父元素上；因为line-height是每一行的高度，所以应用到li元素上？;而且对于设置边框的时候也要注意文本的父元素父元素框是哪个是谁，具体要给哪个框上样式
·图片垂直居中的方式和文本垂直居中的方式要有所了解
https://blog.csdn.net/weixin_37580235/article/details/82317240（元素水平和垂直居中的方法总结）
·元素图片在盒子内垂直居中的方法
一、使用flex实现垂直居中
利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择，因为IE8,9并不支持它。
现在，为了用flex实现垂直居中，我们首先要创建一个包裹着图片的div元素，然后给它定义一些基础属性。
div class=“flexbox”>
img src=“1.jpg” alt="">
/div>
CSS代码部分：
body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

二、利用Display: table;实现img图片垂直居中
html代码：
div class=“tablebox”>
div id=“imgbox”>
img src=“1.jpg” alt="">
/div>
/div>
CSS代码：
.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}
三用绝对定位实现垂直居中（推荐-兼容性好）
四 对于含有文字的块级元素 line-height=height 可以实现垂直居中，一般都是li？可以用？

• maxheight和minheight
  maxheight为最大高度，可以避免子元素撑开父元素
  minheight是给父元素设置一个最小高度，避免里面没有内容而没有办法撑开父元素，如果里面的元素越来越多，则高度也会越来越大。
• 盒子模型和box-sizing属性
  https://blog.csdn.net/huangpin815/article/details/76651680
  border-box的应用实例：（1）width=content+padding+border(此时，当div的宽度为50%时，而border和padding为px时，那么content会随着实际的宽度进行自动缩放；)
  （2）https://www.cnblogs.com/fxxkhigh/p/5431110.html，实现边框实现

关于伪类：hover的补充

• 通常会和变形和过度联系在一起

• 如果将过度放在：hover里，则为从刚开始到悬停状态的效果，如果不放在里面，则是从悬停状态过渡到原始状态的效果

• 块级元素的宽通常占一行，而行内元素通常为内容区的宽，这个在设置背景颜色时尤为明显 li{width: 80px;height:20px;line-height: 20px;text-align: center;padding-left:2px;border-radius: 0 10px 10px 0;border-left:2px solid black;background-color: red;margin:2px;transition: all linear 3s}
  li:hover{background-color: #f90;
  width:100px;transition: all 200ms linear}
  li a{display: block} //如果没有这行代码，将如何显示？
  li a:hover{background-color: #fff}

• p:hover span{} 当鼠标悬停在p元素上，对p元素的后代元素span进行操作

*css3新增选择器功能篇

• 元素选择器（无）

• 关系选择器（无）

• 属性选择器
  e[attr^=“val”]
  e[arrt$=“val”]
  e[attr*="val]

• transition:为transition属性单独添加一个类属性，动态添加这个类添加transition，在transition后添加位置实现过渡后的位置。

• 结构伪类选择器
  e:root e所在文档的根元素
  e:not(s) 选择所有不匹配简单选择符s的e元素
  e:empty 匹配没有任何子元素（包括text节点的元素e）
  e:target 匹配当前链接地址指向的e元素
  e:first-child css2
  e:last-child 匹配父元素的最后一个子元素e，注意e是子元素不是父元素
  e:nth-child(n) 匹配父元素的第n个子元素e
  e:nth-last-child(n) 匹配父元素的倒数第n个子元素e
  e:only-child 匹配父元素仅有的一个子元素e
  e:first-of-type 匹配同类型的第一个兄弟元素
  e:last-of-type 匹配 。。。最后一个兄弟元素
  e:only-of-type 同类型的唯一一个同级兄弟元素e
  e:ntn-of-type 同类型的第n个兄弟元素
  e:nth-last-of-type. 倒数

• ui元素状态伪类选择器
  :hover
  :checked 匹配用户界面form表单被选中状态的元素 （type类型为radio或checkbox）
  :enabled 用户界面form表单所有处于可用状态的元素
  :disabled 用户界面form表单处于禁用状态的元素

• 为元素选择符 css3中冒号都改成了双冒号
  :first-letter
  :selection 设置对象被选择时的颜色. ::selection选择器匹配元素中被用户选中或处于高亮状态的部分。
  ::selection只可以应用于少数的CSS属性：color, background, cursor,和outline

css3之文本、背景、边框

• 文本与字体
  text-shadow属性：(增加阴影，描边和发光)
  1. length（水平）||length（垂直）||opacity（不可为负数，为阴影效果的模糊距离,省略时默认为0，即没有模糊情况）||color（阴影颜色） 这些都是阴影的属性，与正文无关
  2. 还可以为阴影属性设置两种及两种以上效果 即添加多个 4属性达到描边、凸起、凹陷、发光的文字效果。
  3. 描边：1px 0px black,
  0px 1px black,
  -1px 0px black,
  0px -1px black;
  凸起:1px 0px black,
  0px 1px black,
  -1px 0px white,
  0px -1px white;
  凹陷:1px 0px white,
  0px 1px white,
  -1px 0px black,
  0px -1px black;
  没有偏移的发光效果:
  0 0 10px black;

  text-overflow:（溢出的文本处理）
  1.text-overflow:clip(直接裁切溢出的文本) || ellipsis（文本溢出时，显示省略标记…，代替最后一个字符） || ellipsis-word（文本溢出时，显示省略标记…，代替最后一个词）
  2. overflow: hidden; //溢出的文本隐藏
  white-space: nowrap; //强制文本单行
  text-overflow: ellipsis; //显示省略标记

  word-wrap:(设置或检索当前行超过指定容器的边界时是否断开转行)
  1.word-wrap: normal (默认的连续文本)|| break-word(边界内换行)
  word-break:(文本的字内换行行为) 比如对于单词compact
  换行 com
  pact

  @font-face：使用服务器端的字体
  1.@font-face{
  font-family:myfont//设置文本的字体名称
  src:url()//设置自定义字体的相对路径或绝对路径，可包含format信息，此属性只能. font-face 里使用
  以上两个属性是必要的，其他选择性使用
  2.@font-face{
  font-family:myfont;
  src:url(…/sdsds)
  }
  p{font-family:myfont//使用声明的自定义的字体}

• 色彩模式和不透明度
  hsl色彩模式
  1.hsl（length,percentage,percentage）
  length:颜色的取值，除以360所得的余数为0表示红色，60表示黄色等待。。
  percentage:表示颜色的饱和度，0%表示灰度，没有颜色，100%表示颜色最鲜艳
  percentage:表示颜色的明亮度0%为最暗 100%为最亮

  hsla色彩模式(含有不透明度)
  1.hsla(length,percentage,percentage,alpha)
  alpha表示不透明度,取值在0-1之间，
  rgba色彩模式（含有不透明度）
  1.rgba(red, green, blue,alpha)
  opacity属性（专门的不透明度属性）
  opacity:alpha||inherit

css3之背景

• 元素里定义多个背景图片：（只需要用逗号隔开，第一个声明的图片定位在元素顶部，其他的图片一次在其下排列）

background:
1.background-image:(url)

2**.background-origin**:指定背景的原点位置，默认情况是以元素边框以内的左上角为原点进行定位，取值可以为：border-box(边框区域开始) padding-box(内边距区域开始) context-box(内容区域开始的位置)

3**.background-clip**:指定背景的显示区域，取值为border-box,padding-box或者content-box
（和origin的区别是超过的会裁剪，而origin除了起始位置变了之后其余的不会裁剪）
4. background-repeat:平铺 或者不平铺

5.background-size:指定背景图片的大小
取值为length：数值，如果为一个值，剩下一个则为auto
percentage：为0%到100%之间的值，基于背景图像的父元素的百分比
cover:背景图像按比例缩放，保持图像本身的宽高比例，直至完全覆盖整个背景区域位置，可能会有裁剪
contain:按比例缩放，保持图像本身的宽高比例，正好适应（长度短的一个边与背景框的一个边大小相等），可以不会完全覆盖，
5. background-position：设置或检索对象的背景图像位置 左上 右上 左下 右下等等

css3之边框

border-radius:
拓展之两组半径的圆角 border-radius:20px/40px
·20px为圆角的水平半径 40px为圆角的垂直半径
·如果半径只有一组，则默认为垂直半径等于水平半径
·如果圆角的水平半径和垂直半径中任一个为0，则这个角就变成了直角

css3之灵活的盒布局（新型布局方式）

盒布局，多列布局，flex弹性布局

一、

开启盒布局 (一定要注意下面属性所在的位置，基本上是在父元素下面)
· display:box(-webkit-box、-moz-box)
·三栏布局要掌握（三个div）
·疑问？盒模型设置父元素的宽度没有效果？答：有效果，如果不设置子元素的宽度的话则子元素的宽度完全由内容撑开，高度同样也是，想要利用可以设置flex-grow来利用父元素剩余容量可以设置盒子本身的宽度来撑开父元素？

盒元素内部的布局方向（-webkit- ，-moz-）
·box-origin：(为什么竖着每一个子元素都可以完全撑开父元素的宽度，如果不设置子元素的宽度的话，横着却不可以？)
取值如下：（注意：盒子指的是box？应该是只要是盒子的元素）
1.horizontal：表示盒子元素从左到右编排它的子元素
2.vertival：表示盒子在一条垂直线上从上到下编排它的子元素
3.inline-axis：默认。沿内联轴编排它的子元素，表现为横向编排
4.block-axis:表示沿块轴编排它的子元素，表现为垂直编排
5.inherit：继承父元素中box-orient的值

元素的布局顺序
·box-direction
取值如下：
1.normal:按照正常顺序
2.reverse：逆序
3.inherit 继承

调整元素的位置
·box-ordinal-group: 取值为自然整数，从1开始，默认为1，子元素将根据这个值重新排序（看出来该属性是放在子元素下），值相等的取决于代码的位置.

新版css3盒子模型之flex弹性布局

疑问？盒模型设置父元素的宽度没有效果？答：有效果，如果不设置子元素的宽度的话则子元素的宽度完全由内容撑开，高度同样也是，想要利用可以设置flex-grow来利用父元素剩余容量可以设置盒子本身的宽度来撑开父元素？
在flex布局下，如果
flex-direction:将flex项目视在水平方向上还是垂直方向上(存在于父元素中)
取值为：row(默认)：从左到右
row-reverse:从右到左
colume:同样row，但是从上到下
column-reverse:从下往上

flex-wrap:换行操作（存在于父元素）
取值为:nowrap(默认值）：所有弹性项目都在一行上
wrap：flex项目换行操作
wrap-reverse：flex项目将从下到上换行

flex-flow: <‘flex-direction’> || <‘flex-wrap’>（综合了flex-direction和wrap属性，默认为row和nowrap）

justify-content:水平方向上元素的排列方式
取值为flex-start:
flex-end:
center:
space-between:
space-around:
space-evenly

align-items:垂直于justify-content的版本
stretch:拉伸填充(height不要设置，否则会无法拉伸填充)
flex-start:
flex-end:
center:
baseline:基于基线对齐

align-content（只有一行是不起作用）
取值为flex-start:
flex-end
stretch:
center:
space-around
space-between

（定义于子元素上）order:取值为整数，负数在前

下面说的三个属性都充分利用了父元素的剩余空间 :当有内容存在时还是有问题，还是多联系吧
https://www.cnblogs.com/ghfjj/p/6529733.html
(定义于子元素上)flex-grow如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间占用的空间是其他孩子的两倍，设置才能对剩余空间进行分配？

   **flex-basis:**兼容性不好，不行的话可以用width
   **flex-basis** :预先预定宽度，优先级高于width，如果width和basis的值为auto，则宽度由具体内容来定
   如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。如果子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器
   可以设置max-width 和min-width来限制basis
           https://www.cnblogs.com/ghfjj/p/6529733.html

flex-basis:(和width类似)（注意，默认的是不换行）
1.如果子元素没有设置宽度，则会有默认的width作为标准，或者是内容区，如果还有grow属性，则会完美填充剩余容量
2.如果子元素设置width属性，则元素的宽度由width决定，grow分配剩余空间。
3.在有width的前提下设置basis，优先级高于width，由basis决定（有关的为换行操作）。如果basis为0%，则相当于没有设置宽度，其宽度是由剩余宽度来决定
4.如果width和basis的值为auto，则宽度由具体内容来定
5. 如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。
6.块级元素能将块级元素撑开
7.可以设置max-width 和min-width来限制basis，basis无效
**flex-shrink:**按照比例进行缩小

总结flex属性： flex三属性：grow、shrink、basis（只有它可以使用单位和百分数）优先级按照该顺序；如果为3个值的话，必须2个是数字，一个是单位或者百分数，顺序可以改变；
flex: 1 1 1; 错误无法匹配
正确写法：
flex：1 1 40%；
flex: 1 40% 1
flex: 40% 1 1
等价于：
flex-grow：1
flex-shrink：1
flex- basis： 40%

flex: 1 40%
flex: 40% 1
等价于：
flex-grow：1
flex- basis： 40%

flex: 1 1
等价于：
flex-grow：1
flex-shrink：1

flex属性默认是0 1 auto
flex-grow为0，则存在剩余空间也不放大
flex-shrink为1，则空间不足该项目缩小
flex-basis为auto，则该项目本来的大小
2.flex:1相当于
flex-grow为1
flex-shrink为1
flex-basis为0%
（例：这里的计算过程是这样的：
由于item-1什么都没设，所以flex-basis为auto保持原来的大小即100px
item-2设置了flex:1，因为它的flex-basis为0%
所以剩余空间为：600 - 100 - 0% = 500px
因为item-2的flex-grow为1，所以这500px全部分配给item-2，所以item-2就为500px