CSSDay7(CSS布局 定位+装饰)

莫凡是莫烦
128 阅读7分钟

（补充）图片铺满

1、background-image: url(../images/right.png);
    background-size: contain;
    /* 中间铺满 */
 2、  width: 100%;
            /* 让图片完全铺满 */

水平居中

             left: 50%;
            /* 左侧是父元素的一半 */
            transform: translateX(-50%);
            /* 让子元素中心向左偏移一半，两句一起用达到水平居中的效果 */

一、定位

1.1 网页常见布局方式

(1) 标准流 1.块级元素独占一行 → 垂直布局

  1. 行内元素/行内块元素一行显示多个 → 水平布局

(2) 浮动

  1. 可以让原本垂直布局的 块级元素变成水平布局

(3)定位

  1. 可以让元素自由的摆放在网页的任意位置

  2. 一般用于 盒子之间的层叠情况

1.2 定位的常见应用场景

(1)可以解决盒子与盒子之间的层叠问题

• 定位之后的元素层级最高，可以层叠在其他盒子上面(hot)

image.png (2) 可以让盒子始终固定在屏幕中的某个位置(搜索框)

image.png

2.1 使用定位的步骤

（1）设置定位方式

➢ 属性名：position

➢ 常见属性值：

image.png （2）设置偏移值

➢ 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

➢ 选取的原则一般是就近原则 （离哪边近用哪个）

image.png

3.1 静态定位

➢ 介绍：静态定位是默认值，就是之前认识的标准流。

➢ 代码posistion:static;

➢ 注意点：

  1. 静态定位就是之前标准流，不能通过方位属性进行移动

  2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

3.2 相对定位

➢ 介绍:相对于自己之前的位置进行移动

➢ 代码： position：relative

➢ 特点：

  1. 需要配合方位属性实现移动

  2. 相对于自己原来位置进行移动

  3. 在页面中占位置 → 没有脱标

➢ 应用场景：

1.配合绝对定位组CP（子绝父相）

2.用于小范围的移动

3.3 绝对定位

➢ 介绍：相对于非静态定位的父元素进行定位移动（就近原则，没有的话相对于浏览器窗口移动）

➢ 代码：position：relative;

➢ 特点：

  1. 需要配合方位属性实现移动

  2. 默认相对于浏览器可视区域进行移动

  3. 在页面中不占位置 → 已经脱标

4.具备了行内块的属性，可以改变宽高，在一行显示

  1. 不能使用margin（居中）： 解决方案：使用left 和 top，以及transform改变位置 image.png ➢ 应用场景：

  2. 配合绝对定位组CP（子绝父相）： 这种设置会让子元素，相对父元素进行移动，对网页布局影响较小

2.在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！（随便改变已经决定好的定位也会影响网络布局，且因为父元素已经有其位置，与目标也没太大差别）

（案例）子绝父相水平居中案例-解决方法

  1. 子绝父相

  2. 先让子盒子往右移动父盒子的一半

• left：50%

  1. 再让子盒子往左移动自己的一半

• 普通做法：margin-left：负的子盒子宽度的一半

缺点：子盒子宽度变化后需要重新改代码

• 优化做法：transform：translateX(-50%)

优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码

（案例）子绝父相水平垂直都居中案例

image.png

  1. 子绝父相

  2. 让子盒子往右走大盒子一半

• left：50%

  1. 让子盒子往下走大盒子一半

• top：50%

  1. 让子盒子往左+往上走自己的一半

• transform：translate(-50%，-50%)；

3.4 固定定位

➢ 相对于浏览器进行定位移动

➢ 代码：position：fixed;

➢ 特点：

  1. 需要配合方位属性实现移动

  2. 相对于浏览器可视区域进行移动

  3. 在页面中不占位置 → 已经脱标

4.具备行内块特点（绝对定位也是）

➢ 应用场景：

  1. 让盒子固定在屏幕中的某个位置(banner)

3.4 元素层级问题

➢ 不同布局方式元素的层级关系：

• 标准流 < 浮动 < 定位

➢ 不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同

• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素 ！更改定位元素的层级： z-index:(越大越在上面) 默认是0 必须配合定位使用

二、装饰

1.1 认识基线

➢ 基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

1.2 文字对齐问题

➢ 场景：解决行内/行内块元素垂直对齐问题

➢ 问题：当图片和文字在一行中显示时，其实底部不是对齐的

image.png

1.3 垂直对齐方式

➢ 属性名：vertical-align

➢ 属性值：

image.png

！！！注意浏览器默认将行内和行内块元素当成文字处理，基线对齐

（拓展）项目中 vertical-align 可以解决的问题

  1. 文本框和表单按钮无法对齐问题 （middle）

  2. input和img无法对齐问题

  3. div中的文本框，文本框无法贴顶问题(top)

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

  5. 使用line-height让img标签垂直居中问题 (text-align:center)居中

➢ 注意点：

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

• 推荐优先使用浮动完成效果

2.1 光标类型

➢ 场景：设置鼠标光标在元素上时显示的样式

➢ 属性名：cursor

➢ 常见属性值：

image.png

3.1 边框圆角

➢ 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

➢ 属性名：border-radius

➢ 常见取值：数字+px 、百分比 ➢ 原理：

image.png ➢ 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！ （1） 画一个正圆：

  1. 盒子必须是正方形

  2. 设置边框圆角为盒子宽高的一半 → border-radius:50%（或者宽高的一半）

（2） 胶囊按钮：

  1. 盒子要求是长方形

  2. 设置 → border-radius：盒子高度的一半

4.1 溢出部分显示效果

➢ 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域

➢ 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

➢ 属性名：overflow

➢ 常见属性值：

image.png

扩展（overflow：hidden）：blog.csdn.net/hst_gogogo/…

5.1 元素本身隐藏

➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

➢ 常见属性：

  1. visibility：hidden

  2. display：none

➢ 区别：

  1. visibility：hidden 隐藏元素本身，并且在网页中占位置(所以一般不用)

  2. display：none 隐藏元素本身，并且在网页中 不占位置

➢ 注意点：（常用于js）

• 开发中经常会通过 display属性完成元素的显示隐藏切换

• display：none；（隐藏）、 display：block；（显示）

元素整体透明度

➢ 场景：让某元素整体（包括内容）一起变透明

➢ 属性名：opacity

➢ 属性值：0~1之间的数字

• 1：表示完全不透明

• 0：表示完全透明

➢ 注意点：

• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

（拓展）表格合并

image.png

（拓展）用CSS画三角形技巧

image.png

  1. 设置一个盒子

  2. 设置四周不同颜色的边框

  3. 将盒子宽高设置为0，仅保留边框

  4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明（transparent）

三、选择器拓展

1.1 链接伪类选择器

➢ 场景：常用于选中超链接的不同状态

➢ 选择器语法：

➢ 注意点：

•如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写

记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑

•其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态

2.1 焦点伪类选择器

➢ 场景：用于选中元素获取焦点时状态，常用于表单控件

➢ 选择器语法：

image.png

➢ 效果：

• 表单控件获取焦点时默认会显示外部轮廓线

3.1 属性选择器

➢ 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签

➢ 选择器语法

image.png

image.png

avatar
文章
阅读
粉丝