缩放、浮动、ul标签小结详解。

1、缩放

缩放：
放大
缩小
​
语法：
transform: scale(x，y);
x：在水平方向进行缩放  宽度
y：在垂直方向进行缩放  高度
x与y值直接用逗号隔开
​
单位：数值
​
0：缩小为0，也就是没有了
1：默认值  不放大也不缩小
0-1：缩小
>1:放大
如果只写一个值的情况，x,y(宽高)同时进行缩放
负数：先翻转(180deg)后缩放
​
​
.box1 {
background-color: tomato;
/* 旋转 */
/* transform: rotate(30deg); */
​
/* 缩放 */
/* 宽度放大2倍 */
/* 高度放大3倍 */
/* w:200px h：150px */
transform: scale(2, 1.5);
}
​
.box2 {
background-color: yellowgreen;
/* 1 默认值，不放大也不缩小 */
transform: scale(1);
}
​
.box3 {
background-color: yellowgreen;
/* 0  缩小没了*/
transform: scale(0);
}
​
.box4 {
background-color: yellowgreen;
/* 0-1 缩小  w:50px h：50px*/
/* w:100px*0.5 =50px */
/* 如果只写一个值的情况，x,y(宽高)同时进行缩放 */
/* transform: scale(0.5,0.5); */
/* 宽高同时以0.5的比例进行缩小 */
transform: scale(0.5);
}
​
.box5 {
background-color: yellowgreen;
/* >1  放大  w:300px h：300px*/
/* w:100px*3 =300 */
transform: scale(3);
}
​
.box {
width: 100px;
height: 100px;
background-color: aqua;
margin: 100px auto;
​
/* 负数：先翻转(180deg)后缩放 */
transform: scale(-0.5);
transform: scale(-2);
}
​
​
缩放旋转复合写法
transform:旋转和缩放直接用空格隔开
旋转和缩放的顺序没有要求
 transform: scale(2) rotate(180deg);
​

2、浮动

 <!-- 浮动:可以使块级标签（独占一行的标签） 在一行显示-->
  <!--
     块级标签：h1-h6、p、 div、ul、li
     块级标签都是垂直布局，独占一行
     可以给块级标签设置浮动，让他们在一行显示
​
     给要在一行显示的块级标签设置浮动
​
     左浮动：float:left；  标签向左边进行浮动
     右浮动：float:right；标签向右边进行浮动
​
     标签设置浮动之后，没有设置框的时候，宽高由内容撑开
  -->
​
​
 ul li {
      float: left;
      /* float: right; */
      /* 给每个li设置左右20px的外间距 */
      margin: 0px 20px;
​
    }
​
    /* 给p标签设置浮动就可以在一行显示了
     */
    p {
      float: left;
    }

3、ul标签

无序列表
  
    语法：
  各列表项之间没有次序，各列表项之间为并列关系
  列表容器
  <ul>
    列表项
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
​
一般li里会嵌套a标签
​
注意：ul的直接子元素必须是li
li里可以嵌套任何标签
​
  应用场景：
      1.新闻列表
      2.导航
      3.商品列表
​
      块级标签
      特点：
      1.宽度在没有设置的情况下，默认跟父元素宽度一样大
      2.高度由内容撑开（小圆点--列表符-占位，所有没有内容的时候，高度显    示21px）
      3.垂直布局，独占一行
      4.自带外间距和内间距
      5.自带列表符
      6.去掉自带列表符：list-style:none;(给li、ul设置都可以)
​
​
  /* 这两种方式都可以去掉自带列表符 */
    ul {
      list-style: none;
    }
​
    ul li {
      list-style: none;
    }
​
​
/* 这两种方式都可以设置自带列表符 */
    ul {
      /* 设置列表样式类型 */
      /* 空心圆 */
      list-style-type: circle;
      /* 默认值 实心圆 */
      list-style-type: disc;
      /* 实心正方形 */
      list-style-type: square;
    }
​
    ul li {
      /* 设置列表样式类型 */
      /* 空心圆 */
      list-style-type: circle;
      /* 默认值 实心圆 */
      list-style-type: disc;
      /* 实心正方形 */
      list-style-type: square;
    }
​
​
 /* 一般用ul标签的时候，都会把自带样式清除 */
    * {
      /* 外间距 */
      margin: 0;
      /* 内间距 */
      padding: 0;
      /* 列表符 */
      /* list-style: none; */
    }
​
    ul {
      /* 列表符 */
      list-style: none;
    }
​
    /* 为什么要清除默认自带样式呢，因为在写页面的时候，这些间距样式需要重新设置，而不是用自带的样式 */