1.定位 position

  1. position:absolute | relative
  2. relative: 相对定位
  3. 元素在页面上正常的位置。
  1. absolute 绝对定位
  2. 绝对定位的元素的位置相对于最近的相对定位的父元素，如果没有已定位的父元素，那么它的位置相对于<html>:
  4. relative和absolute都通过left,top,right,bottom移动
  5. z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素

父元素设相对定位，子元素设绝对定位

2. 元素垂直水平居中

  • 第一种

    1. 父元素设置parent{position:relative;}
    2. 子元素设置
    3. child{
    4. position:absolute;
    5. left:50%;
    6. top:50%;
    7. margin-left:-50%*child*width;
    8. margin-top:-50%*child*height;
    9. }

  • 第二种

    1. parent{
    2.   position:relative;
    3. }
    4. child{
    5.   position:absolute;
    6.   left:0;
    7.   top:0;
    8.   right:0;
    9.   bottom:0;
    10.   margin:auto;
    11. }

  • 第三种

    1. parent{
    2.   position:relative;
    3. }
    4. child{
    5.   position:absolute;
    6.   left:50%;
    7.   top:50%;
    8.   transform:translate(-50%,-50%)
    9. }

    3.定位的宽高继承问题

    ``` 父元素不设height,会获取子元素的height 子元素不设宽度width，会继承父元素的width

子元素设绝对定位之后，不会再继承父元素的width

  2. - 注意：给父元素设了position:relative;   子元素：position:absolute;   父元素的高度坍塌了
  3. - 最好给父元素一个高度
  4. <a name="VJQeT"></a>
  5. ## 4.css的几种引入方式
  7. - 外部样式表
  8. ```css
  9. <link rel="stylesheet" type="text/css" href="/c5.css">

  • 内部样式表（位于 标签内部）

    1. <style>
    2. p{color:pink;font-size:16px}
    3. </style>

  • 内联样式（在 HTML 元素内部）

    <p style="color:pink;font-size:16px">hello world</p>

    给同一选择器设置同一样式,离元素近的样式设置方式优先级高