一、定位

  • 网页常见布局:
  1. 标准流:块级元素独占一行 → 垂直布局,行内元素/行内块元素一行显示多个 → 水平布局
  2. 浮动: 可以让原本垂直布局的 块级元素变成水平布局
  3. 可以让元素自由的摆放在网页的任意位置, 一般用于盒子之间的层叠情况
  • 定位方式
    1. 静态定位
      {position:static;}

静态定位就是之前标准流，不能通过方位属性进行移动,
之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

  1. 相对定位{position:relative;}

相对定位的元素,不脱标,位置偏移之后还保留原来的位置
,位置偏移的时候,参考自身位置

  1. 绝对定位:{position:absolute;}

绝对定位的盒子脱标,不占据原来的位置

绝对定位的元素,如果所有的父元素都没有定位,它的位置偏移基于浏览器窗口

绝对定位的元素,如果父元素有定位,位置偏移参考离他最近的使用了定位的父元素

  1. 固定定位 {position:fixed;}
  • 固定定位, 将盒子固定到页面的某个位置，页面滚动条滚动，元素不跟随滚动条滚动

1.脱标，不占据原来的位置

2.固定定位位置偏移基于浏览器可视窗口

  1. 子绝父相:
  • 让子元素相对于父元素进行自由移动
  • 子绝父相,子元素绝对定位,父元素相对定位, 不脱标,在标准流占位置,不会影响后边的元素,子元素位置移动参考父元素
    如果父元素绝对定位,下边的大盒子会上来,造成布局的混乱
  • 使用子绝父相水平垂直居中的操作
    1.子绝父相

2.left：50%;

3.top：50%；

4.transform：translate（-50%，-50%）；

  1. 绝对定位的盒子居中方法
  • 向右走父元素宽度的一半,向左走自身宽度的一半,向下走父元素高度的一半,向上走自身高度的一半

margin: 0 auto 只对标准流设置了宽度的块元素水平居中有效

  • 对盒子设置宽高,
  1.   position: absolute;
  2.         left: 0;
  3.         right: 0;
  4.         top: 0;
  5.         bottom: 0;
  6.         /* 这个技巧子元素必须设置宽高 */
  7.         margin: auto;
  8.         width: 177px;
  9.         height: 177px;
  • 透明效果的实现
    • rgba控制单颜色透明 a是alpha是透明， 取值范围是0-1, 0.5的0可以省略掉
    • 控制元素整体透明度，取值范围0-1 ， 0.5的0可以省略掉
    • 元素整体透明度:opacity 1:表示完全不透明,0:表示完全透明
  • 脱标元素的特点
    • 脱标(浮动、绝对定位、固定定位)元素的特点
  1.   1. 块元素脱标之后不会默认父元素的宽了，默认宽高是0，内容会撑开宽高
  2.   2. 行内元素脱标之后可以直接设置宽高了
  1. 元素的层级问题
    • 定位元素(相等定位，绝对定位，固定定位)默认层叠顺序，元素越靠后，层叠顺序越靠上
    • z-index调整定位元素(相等定位，绝对定位，固定定位)层叠顺序， 值越大，越靠上，不带单位，可以为负值

二、装饰

  • 垂直对齐方式
    1. vertical-align: top; 顶部对齐
    2. vertical-align: baseline; 默认,基线对齐
    3. vertical-align: middle; 中部对齐
    4. vertical-align: bottom; 底部对齐
  • vertical-align能解决的问题如下
    文本框和表单按钮无法对齐问题

input和img无法对齐问题

div中的文本框，文本框无法贴顶问题

div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

使用line-height让img标签垂直居中问题

• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题

  • 光标类型 :
    设置鼠标光标在元素上时显示的样式
    • default 默认值 小白箭头

pointer 小手

text 文本

move 移动

help 帮助

not-allowed 禁止

  • 边框圆角:

  1. 正圆的做法，盒子是正方形，border-radius: 50%

  2. 胶囊按钮效果，border-radius: 高度的一半 ,盒子必须是长方形

Snipaste_2021-08-04_20-36-25.png

  • overflow溢出部分显示效果
    • overflow:visible; 默认值,溢出部分可见
    • overflow:hidden; 溢出部分隐藏
    • overflow:scroll; 无论是否溢出,都显示滚动条
    • overflow:auto; 根据是否溢出,自动显示或隐藏滚动条
  • 单行文本省略号

文本强制一行显示
white-space: nowrap;

溢出隐藏
overflow: hidden;

文本溢出省略号
text-overflow: ellipsis;

  • 元素本身隐藏 

    1. visibility:hidden;  隐藏元素本身,并且在网页中占位置<br />       display:none;   隐藏元素本身,并且在网页中不占位置<br />       display:block; 元素显示

  • 行内块元素垂直居中问题
    ```

  • 图片在盒子里边垂直居中, 图片设置vertical-align: middle, 将图片的父元素设置成高度和行高相等 ```
  • 精灵图的使用
    • 精灵图是将很多装饰类的小图片,放到一张大图上,减少服务器请求的次数,提升页面的加载速度(打开速度)

1.测量局部的大小设置为盒子的宽高

2.测量局部的坐标值设置为背景定位的负值

  • 背景图片大小
    • 设置背景图片大小
      写2个值,分别是宽高
      只写一个值,代表宽,高默认auto,等比例缩放
      写百分比,参考的盒子的宽高,不是图片的宽高
      contain 背景图片等比例缩放,有可能铺不满盒子
      cover 背景图片等比例缩放,铺满盒子,背景图片有可能显示不完整
    • background-size的连写 注意 前边必须有背景定位的值/ 后边是背景尺寸
  • 盒子的阴影
    • 第1个值 阴影的水平偏移量 正值向右 负值向左

第2个值 阴影的垂直偏移量 正值向下 负值向上

第3个值 阴影的模糊范围

第4个值 阴影的大小 可以为负值

第5个值 阴影的颜色

注意: 多组阴影用逗号隔开, inset内阴影

  • 文字阴影
    • 第1个值 阴影的水平偏移量 正值向右 负值向左

第2个值 阴影的垂直偏移量 正值向下 负值向上

第3个值 阴影的模糊范围

第4个值 阴影的颜色

  • 过渡属性:
    • 过渡是从一种状态到另外一种状态的变化,是属性值的变化, 需要触发条件, 过渡通常加在开始状态(all 全部属性过渡)
    • 单个属性过渡
      transition: background-color 1s;

多个属性过渡,用英文逗号隔开

transition: background-color 5s, border-radius 2s;

三、选择器拓展

  • 链接伪类选择器
    • a:link{ } 选中a链接未访问过的状态
    • a:visited{ } 选中a链接访问之后的状态
    • a:hover{ } 选中鼠标悬停的状态
    • a:active{ } 选中鼠标按下的状态
  • 焦点伪类选择器 {input:focus}

  • 属性选择器 

    1.  <p class="text"></p>

    class=属性名 text=属性值