【定位·HTML】

定位布局可以分为以下四种：

静态定位（inherit）

相对定位（relative）

绝对定位（absolute）

固定定位（fixed）

一般的标签元素不加任何定位属性时，默认都属于静态定位，静态定位在页面的最底层属于标准流（普通流），在页面中没有特殊的操作方式和显示效果

固定定位fixed 属性

用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置。position: fixed;

javascript 复制代码

   .ad-l {
        position: fixed;
        top: 100px;
        left: 0;
      }

相对定位 relative 属性

相对定位是该元素的位置相对于它原始的位置（正常位置）来计算。

javascript 复制代码

position: relative;

绝对定位 absolute 属性

绝对定位，能把元素精确地放在任意位置。

javascript 复制代码

  .ad-l {
        position: absolute;
        left: 50px;
        top: 150px;
      }

浮动

使用 float 属性指定元素沿其容器的左侧或右侧放置

javascript 复制代码

float: left|right;

CSS3新特性

属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。

javascript 复制代码

 <style>
 //^开头
      a[href^="#"] {
        color: rgb(179, 255, 0);
      }
//$结尾
      a[href$="org"] {
        color: rgb(195, 0, 255);
      }
//*包含
      a[href*="un"] {
        background-color: rgb(0, 255, 149);
        color: white;
      }
    </style>
  <body>
    <ul>
      <li><a href="#">本地链接</a></li>
      <li><a href="https://www.lanqiao.cn">蓝桥云课</a></li>
      <li><a href="https://developer.mozilla.org">MDN</a></li>
      <li><a href="https://unsplash.com">Unsplash</a></li>
    </ul>
  </body>

子元素伪类选择器

子元素伪类选择器：选择某元素的子元素

javascript 复制代码

 div:nth-child(2) {
        background-color: rgb(0, 255, 128);
      }
      div:nth-of-type(4) {
        background-color: rgb(111, 0, 255);
      }

UI 伪类选择器

javascript 复制代码

  /*格式错误*/
      input:invalid {
        background-color: red;
      }
      /*格式正确*/
      input:valid {
        background-color: green;
      }
      
  电子邮箱：<input type="email" />

文本阴影

某些时候我们想让字体看起来更立体，更具艺术性，让人眼前一亮，可以给文字使用文本阴影属性。

使用 text-shadow 属性来给文本内容添加阴影的效果。

javascript 复制代码

text-shadow: x-offset y-offset blur color;

x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。

y-offset 是沿 y 轴方向的偏移距离，允许负值，必须参数。

blur 是阴影的模糊程度，可选参数。

color 是阴影的颜色，可选参数。

文本溢出

text-overflow 属性可以设置超长文本省略显示

javascript 复制代码

text-overflow: clip|ellipsis;

javascript 复制代码

 p {
        border: 1px solid blue;
        width: 100px;
        height: 50px;
        overflow: hidden; /*隐藏超出文本*/
        white-space: nowrap; /*强制单行显示*/
      }
      .poem1 {
        text-overflow: clip;
      }
      .poem2 {
        text-overflow: ellipsis;
      }

圆角边框

border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。

javascript 复制代码

border-radius: 取值;
//分开设置
border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;

javascript 复制代码

 border-radius: 140px 20px 30px 40px; /*四个圆角直径不同*/

盒子阴影

javascript 复制代码

box-shadow: h-shadow v-shadow blur spread color inset;

注意

给body，div标签元素加样式时，前面不加.

javascript 复制代码

  body{background-color: black;}

背景图像尺寸

javascript 复制代码

background-size: length|percentage|cover|contain;

多图背景

javascript 复制代码

 #content1 {
        background-image: url("icons8-rat-96.png"), url("nemuel.jpg");
        background-position: right bottom, left top; /*相对于父元素大小，老鼠图片右下角显示，大背景图片在左上角显示*/
        background-repeat: no-repeat, no-repeat; /*两张图片不重复*/
        padding: 15px;
        width: 400px;
        height: 260px;
      }