day05

1、css属性：overflow（溢出），属性值有auto（自动）、hidden（溢出隐藏）、scroll（滚动）、visible（可见的，默认样式）。auto与scroll的区别：auto会根据内容的多少自动添加滚动条，scroll不管内容是否有超出都会有滚动条
2、单行文本溢出显示省略号

// 单行文本溢出隐藏显示省略号
.div1{
       /* 设置宽度 */
       width: 200px;  
       /* 强制文本不换行（nowrap:不折行。wrap:折行，默认值。normal:折行） */
       white-space: nowrap;
       /* 溢出隐藏，超出容器部分进行隐藏 */
       overflow: hidden;
       /* 溢出显示省略号，超出的内容显示省略号.(clip：不显示省略号。ellipsis：显示省略号)*/
       text-overflow: ellipsis;
    }

3、基本的css样式

/* 获取页面中所有的标签，清除内外边距 */
* {
    margin: 0;
    padding: 0;
}
/* 获取页面中所有的列表标签，取消前面的小圆点或者序号 */
li{
    list-style: none;
}
/* 获取页面中所有的a标签，取消下划线 */
a{
    /* 取消下划线 */
    text-decoration: none;
}
/* 获取页面中的所有input标签、下拉标签、文本域标签，取消外轮廓 */
input,select,textarea{
    /* 点击时显示的外轮廓：取消 */
    outline: none;
}
/* 获取页面中所有的图片标签，取消边框 */
img{
    border: none;
}
/* 设置页面的默认字体以及字体大小 */
body{
    font-size: 16px;
    font-family: "微软雅黑";
}
/* 设置版心 */
.center{
    width: 1002px;
    margin: 0 auto;
}

4、写项目需要注意的点：I、每个模块都有版心，banner除外；II、版心以外的宽度，都用100%；III、导航用无序列表（套a标签）；IV、banner图尽量使用背景图；V、当盒子只有一个标签时，盒子可以省略；VI、导航（li只给浮动，a标签变成块级，所有样式给到a；VII、banner图，宁可变形，也要显示全。）background: url() no-repeat center center/100% 100%;
5、line-height的值为1，代表的是行高与字体大小相同。
6、图片下面会默认自带3-6px的留白（解决方法：第一个：给图片包裹盒子，设置盒子的高度等于图片的高度。第二种：把图片转化为块元素。第三种：给图片添加浮动，使其脱离文档流。）
7、元素类型：块级元素（独占一行、可以设置宽高。div、p、列表、hn、form）、行内元素（多个在一行显示、不能设置宽高。span、b、strong、u、ins。。）、行内块元素（特殊的行内元素，多个在一行显示，可以设置宽高。img、input）
8、元素类型进行转换：display：block、inline、inline-block、none，li的默认的元素类型是list-item
9、隐藏元素的方法：

 div{
    /* 第一种 */
    display: none; //会使元素完全从文档流中移除，不占据任何空间，相当于元素不存在。
    /*第二种 设置透明 */
    opacity: 0; // 会使元素变为完全透明，但仍占据原来的空间，相当于元素仍在文档流中，只是不可见
    /* 第三种 高度为0，溢出隐藏 */
    height: 0;
    overflow: hidden; //会使元素的高度变为0，元素不可见且不占据空间。
    /* 第四种 */
    visibility: hidden; //会使元素隐藏，但仍占据原来的空间，相当于元素仍在文档流中，只是不可见。
    }

10、定位

div{
      /* static:默认值，静态定位，没有特殊定位 */
      position: static;
  }

div{
      /* relative:相对定位，参照点是当前元素在正常文档流中的位置 */
      /* 不脱离文档流，相对于自己本身的位置，使用偏移属性来进行偏移 */
      position: relative;
      top: 100px;
      left: 100px;
  }

div{
    /* absolute:绝对定位.如果父元素有定位，那么相对于父元素来说，父元素没有定位，相对于浏览器 */
    /* 脱离文档流，参照物是离自己最近且有定位的父级盒子，如果所有父级盒子都没有定位，参照物是body */
    position: absolute;
  }

div{
    /* fixed:固定定位，配合着方位词，参照点是浏览器 可视窗口*/
    /* 脱离文档流，参照物是浏览器可视窗口，必须配合偏移属性 */
    position: fixed;
    left: 200px;
    top: 200px;
 }

 div{
    /* sticky:粘性定位，相对于带有滚动条的父元素 */
    /* 有一个阈值，触发之前是不脱离文档流，正常布局，触发之后相当于固定定位，阈值也是使用偏移属性设定 */
    /* 参照物是直属父级有滚动条的盒子，一般是body */
    position: sticky;
    top:200px;
 }

11、父相子绝（relative\absolute）:先找到要添加定位的元素，再找到其父元素添加相对定位即可。
12、z-index可以给负数，但是会掉到浏览器窗口下面，会看不到。
层级关系：I、两个盒子重叠，一个有定位，一个没定位，有定位的在上面。II、两个盒子重叠，两个都有定位，按照html标签顺序，标签在html页面下面的，显示在上面。
改变层级：z-index（默认值是0），属性值是数字，没有单位。没有定位的情况下，层级不生效。数字越大，层级越上。尽量不给偶数。
13、元素垂直水平居中（使用定位）：使用父相子绝，然后给子元素添加：top:50%;left:50%;margin-top:负子容器高度的一半；margin-left：负子容器宽度的一半

.father{
    width: 600px;
    height: 600px;
    background-color: aqua;
    position: relative;
}
.son{
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}