13. 界面样式与布局技巧

13.1 css三角

原理概括：只设置边框，需要朝向哪边的三角就让其他的边框进行透明

• 用css 边框可以模拟三角效果
• 宽度高度为0
• 4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
• 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

/* CSS 实现三角形 */
.triangle {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #333;
}

div {
  border: 1px solid #ccc;
}

13.2 css用户界面样式

13.2.1 鼠标样式

/* 鼠标样式 */
div { cursor: pointer; }   /* 手型 */
div { cursor: default; }   /* 默认 */
div { cursor: move; }      /* 移动 */
div { cursor: text; }      /* 文本 */
div { cursor: not-allowed; } /* 禁止 */

13.2.2 轮廓线 outline

去除表单轮廓线

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框

/* 边框复合写法：粗细 样式 颜色 */
div {
  border: 1px solid #ccc;
}

文本域：

此时会有一个空白区域

写在同一行就不会出现这个问题

文本域是行内块元素，一定记住！！！

结果：

文本域尽量放在一行

知识回顾：cols是列，rols是行

它可以进行拖动，显然这是我们不愿意看到的

使用resize进行解决

input {
  outline: none;  /* 取消表单轮廓线 */
}

此时就无法通过右下方实现拖动了

13.2.3 vertical-align 属性应用

实现一个盒子中的文字和图片对齐

用于设置一个元素的 垂直对齐方式 ，但是它只针对于行内元素或者行内块元素有效

图片和文字默认是基线对齐

input {
  outline: none;  /* 取消表单轮廓线 */
}

13.2.3.1 图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了

13.2.3.2 解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

例如：

/* 行内块/图片与文字垂直对齐 */
img {
  vertical-align: middle;
}

主要解决方法有两种：

1. 给图片 添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

2.把图片转换为块级元素 display: block

两个块级盒子里边放了img图片，此时两个图片一个在上一个在下，但是是有间隙的，不像两个块级元素那样之间是没有间隙， 这是因为对齐方式的原因，加一句

img {

vertical-align:middle;

}

13.2.4 溢出文字用省略号显示

效果：

单行文本溢出显示省略号--必须满足三个条件：

/* 解决图片底部空白缝隙 */
img {
  vertical-align: middle;
  /* 或 */
  display: block;
}

13.2.5 多行文本溢出显示省略号

效果：

多行文本溢出显示省略号， 有较大兼容性问题 ，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

/* 解决图片底部空白缝隙 */
img {
  vertical-align: middle;
  /* 或 */
  display: block;
}

由于后台人员可以操作每行多少字，所以最好从后台出发来实现该功能

13.3 常见布局技巧

巧妙利用一个技术更快更好的布局：

1. margin负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. CSS三角强化

13.3.1 margin负值的运用

应用场景：

每个盒子都加边框，第一个的最右侧与第二个的最左侧会进行重合，通过margin负值可以解决该问题

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

/* 边框复合写法：粗细 样式 颜色 */
div {
  border: 1px solid #ccc;
}

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

/* 相对定位：相对于自身原位置移动，原位置保留 */
.box {
  position: relative;
  top: 10px;
  left: 20px;
}

加上上述代码会发现：

只有最后一个盒子边框显示的全，其他盒子右侧边框显示不全

解决方式1： 加相对定位，可以理解为在保留原位置的同时飞的更高一些了

/* 相对定位：相对于自身原位置移动，原位置保留 */
.box {
  position: relative;
  top: 10px;
  left: 20px;
}

解决方式2：

父盒子每个都是相对定位的话，用z-index提高层级就可以

div {
  position: relative;
  top: 10px;
  left: 20px;
}

13.3.2 文字围绕浮动元素

应用场景：

实现结构图：

巧妙运用浮动元素不会压住文字的特性

代码显示：

.box {
  float: left;
}
```Css
/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

div, p, h1, ul, li { /* 块级元素：独占一行，可设宽高 */ display: block; }

对行内元素转换为行内块元素之后，就可以设置宽和高了

<img style="max-width:100%" src="/images/feishu/assets/2024-10-10-Html和CSS学习-107.png">

此时要实现整体居中可以使用text-align:center

```Css
/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

最终展示结果：

/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

13.4 CSS 三角强化 案例

13.4.1 原理

/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

13.4.2 实例

.left {
  float: left;
}
.right {
  float: right;
}

13.5 css的初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化

简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）

每个网页都必须首先进行 CSS初始化。

这里我们以 京东CSS初始化代码为例。

在网页右键查看网页源代码

找到css的link引入语句

然后ctrl+f 输入body

①

②

③打开了网页上传压缩的代码

④从body前可以查看这个网页的初始化代码

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1