标签：CSS3 元素 li ul Html5 对齐 overflow 属性

一、属性选择器： ^='icon'、$='data'、*='-'

1.1、input标签中有value属性的控件

 input[value]{
      color: pink;
 }

1.2、input标签中有value属性并且值等于“ddd”的控件

input[value='ddd']{
      color: pink;
}

1.3、div标签中，有class属性，并且class属性值开头以“icon”**的所有控件

 div[class^='icon']{
   
  }

1.4、div标签中，有class属性，并且class属性值结尾是“data”的所有控件

div[class$='data']{ 
  
  }

1.5、div标签中，有class属性，并且class属性值包含“-”的所有控件

div[class*='-']{
  
 }

二、结构伪类选择器:ul li:first-child

2.1、ul中第一个子元素名字为li的元素

 ul li:first-child {
   
  }

2.2、ul中最后一个子元素名字为li的元素

 ul li:last-child {
   
  }

2.3、ul中指定子元素中第2个名字为li的元素

 ul li:nth-child(2){ 
  }

2.4、ul子元素中偶数(even)、奇数(odd)位名字为li的元素

  ul li:nth-child(even){
  }

2.5、所有的子标签循环给样式n从0开始

  ul li:nth-child(n){
  }

2.6、所有的子标签循环给样式n从0开始，依次是0,3,6,9....

ul li:nth-child(3n){
 }

2.7、所有的子标签循环给样式n从0开始，依次是1,4,7,10....

  ul li:nth-child(3n+1){
  }

2.8、所有的子标签循环给样式n从0开始，依次是5,6,7,8,9,

 ul li:nth-child(n+5){
  }

2.9、所有的子标签循环给样式n从0开始，依次是5,6,7,8,9,

  ul li:nth-child(n+5){
  }

2.10、所有的子标签循环给样式n从0开始，依次是5,4,3,2,1

 ul li:nth-child(-n+5){
  }

三、nth-child和nth-of-type

  <ul>
      <p></p>
      <li>1</li>
      <li>2</li>
   </ul>

   ul li:nth-child(1){
   }

   ul li:nth-of-type(1){
   }

区别：

nth-child：定位的是:ul子标签中第一个元素为li的元素

因为第一个是p标签，并不是li元素，所以找不到元素，无效

简单说:第一个元素必须是li，如果不是，则无效

nth-of-type：定位的是:ul子标签所有的li标签的第一个元素；

改变颜色的是

四、伪元素选择器

::before 在元素内部的前面插入内容

**::after ** 在元素内部的后面插入内容

伪元素：会创建一个元素，但是属于行内元素，但是在文档中是找不到的

  div::before {
   /* content必须写 */
   content: 'before';
   }

 div::after {
   /* content必须写 */
   content: 'after';
   }

1、div::before

  / /右侧小尖头
   div::before{
   position: absolute;
   right: 20px;
   top: 10px;
   font-size: 20px;
   content: '图标文字';
   }

2、清除浮动

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
 *zoom: 1;
 }

五、默认pading和border宽度会撑开盒子解决方法：

默认的是：box-sizing: content-box;会撑开盒子变大

设置为：box-sizing: border-box; 不会撑开盒子

六、图片变模糊（滤镜）

filter: 函数名()

filter: blur(5px);模糊处理，数值越大，越模糊

七、动态计算盒子宽度

css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少30px。
calc()函数用于动态计算长度值。
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

1、设置比父盒子减少30px

运算符"+ - * /"左右两边均要留空格（不留空格会出问题）

width: calc(100%-30px);

在less中使用以下样式宽度计算错误:

width: calc(100% - 30px);
计算出来是:width: 70%;

分析 : px也被解析成%进行了运算，这个的原因是calc属性在less下解析时会忽略运算的单位，统一使用第一个数值的单位（注意：很多文章上写的是按照百分比处理，这个说法是不正确的, 例如将100%换为100em，最终的结果是21em）

解决方法:

1、width: calc(~"100% - 30px");

"~"是less语法中的转义字符，允许你使用任意字符串作为属性或变量值。所以不会进行计算，将最终的计算交给了calc

2、width: e("calc(100% - 30px)");

"e"是一个方法，也是less中提供的。功能其实也是转义，接收一个字符串，返回一个不经任何处理的字符串，也是将最终的计算交给了calc

八、过渡、动画

transition: 要过渡的属性花费时间运动曲线何时开始;

1、属性：想要变化的css属性，宽度，高度背景颜色，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以

2、花费时间：单位是秒（必须写单位） 0.5s

3、运动曲线：默认是ease （可以省略）

4、何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认0s（可以省略）

一般配合hover使用

transition: all 1s;

  .box1 {
    width: 200px;
    height: 200px;
    transition: width 1s,height 1s;
   }
   .box1:hover{
    height: 500px;
    width: 500px;
   }

九、转换：移动

1、移动

（1）x、y轴移动100px，即top、left 为100px

transform: translate(100px,100px);

（2）X轴移动

transform: translateX(100px);

（3）Y轴移动

transform: translateY(100px);

（4）移动自身宽度的一半

transform: translateX(50%);

注意：

transform**不会影响其他布局，和绝对定位比较像

transform对于行内元素是无效的

2、旋转

（1）顺时针旋转45度:正值顺时针，负数逆时针

transform: rotate(45deg);

div img {
  transition: all 2s;
  transform-origin: left top;
}
div img:hover{
  transform: rotate(360deg);
}

（2）设置旋转的中心点:谁做的旋转写到谁的样式里面

默认中心点为

transform-origin: 50%,50%;

设置方位（left top bottom right center）

transform-origin: left top;

3、缩放(里面写数字，不能根单位，是只倍数)

transform: scale(x,y);

也可以设置中心点transform-origin

简写：宽高一样：大于1放大，小于1缩放

transform: scale(x);

注意：综合写法，如果位置不对，将影响位置

transform: translate() rotate() scale();

十、Flex:弹性布局

注意：父盒子设置为flex时:

float、clear和vertical-align属性将失效

父元素的属性：

1、flex-direction：属性决定主轴的方向（即项目的排列方向）

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap属性

nowrap（默认）：不换行。子元素过多装不开，会出现缩小子元素宽度问题

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

3、justify-content

justify-content属性定义了项目在主轴上的对齐方式

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐贴边，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

4、align-items属性（适用于交叉轴单行排列）

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

5、align-content属性（适用于交叉轴多行排列）

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

6、子元素的属性：

1、flex:子项目占用的份数

flex:0;

2、align-self控制子项目自己在侧轴的排列方式

align-self

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3、order属性定义子项目的排列顺序（前后顺序）

order:-1;

十一、overflow

overflow常用属性

1、overflow:auto ；内容会被修剪，超出设置的宽高后会出现滚动条

2、overflow:scroll;内容会被修剪，不管内容是否超出，都会出现滚动条的位置

3、overflow:visible;这个是默认值，内容不会被修剪，会出现在元素框外面。

4、overflow:hidden;内容被修剪，多余的内容被隐藏

5、overflow:inherit;从父元素那里继承overflow的值。

overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow-x

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

overflow-y

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

overflow的神奇用法

第一种用法：解决margin-top的传递问题

margin-top的传递问题:子元素的margin-top会把父元素一起带下来，给父元素加overflow:hidden即可解决

第二种用法：清除浮动带来的影响 --- 父元素高度塌陷

万能清除法

overflow:hidden
clear:both

第三种用法：显隐动画 --- 超出隐藏
第四种用法：单行文本超出省略

.sl{
  white-space:nowrap;/*不换行*/
  overflow:hidden;/*超出隐藏*/
  text-overflow:ellipsis;/*超出省略*/
  width:100px;/*注意要设置宽度*/
}

十二、webkit-overflow-scrolling

-webkit-overflow-scrolling属性是来控制元素在移动设备上是否有回弹的效果。

它有两个属性值：

auto:使用普通滚动，当手指在屏幕上离开时，滚动立即停止
touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

1、兼容性写法：

verflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */

bug

当你给一个元素设置过position:absolute;或者position:relative;后再增加-webkit-overflow-scrolling: touch;属性后，你会发现，滑动几次后可滚动区域会卡主，不能在滑动，这时给元素增加个z-index值就可以了。

-webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;

2、问题

但是的但是，-webkit-overflow-scrolling:touch这个属性真的是超级神坑，比如:

在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。(中招)
在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。
通过动态添加内容撑开容器，结果根本不能滑动的bug。(中招)
滚动中 scrollTop 属性不会变化
手势可穿过其他元素触发元素滚动
滚动时暂停其他 transition

解决方案：

方案一

<div id="app" style="-webkit-overflow-scrolling: touch;">
    <div style="min-height:101%"></div>
</div>
123

方案二

<div id="app" style="-webkit-overflow-scrolling: touch;">
    <div style="height:calc(100%+1px)"></div>
</div>
123

方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。

3、思考为什么会出现这个问题

Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。我们也就只能解决到这了。

总结

不得不感叹，这些神奇的黑魔法，看的奇奇怪怪但是真实的解决了实际的问题，毕竟css本身也是就是黑魔法本黑了，更不要说移动端这个天坑了。

十三、样式闪烁

.lampyellow {
  display: block;
  background-color: yellow;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: blink 600ms infinite;    
  -webkit-animation: blink 600ms infinite;
}

标签：CSS3,元素,li,ul,Html5,对齐,overflow,属性
From： https://www.cnblogs.com/huihuizhang/p/17120826.html

二、Html5和CSS3

一、属性选择器： ^='icon'、****$='data'、*='-'