前端css 技巧与概念补充

布局

版心：一个固定宽度并且水平居中的盒子，用来显示网页的主要内容

版心类名常用：container、w、wrapper

/*版心属性设置*/
.container {
  width: 1200px;
  margin: 0 auto;
}

重置默认样式

* {
  margin:0;
  padding:0;
}

常用布局名词

位置	属性名
顶部导航条	topbar
页头	header、page-header
导航	nav、navigator、navbar
搜索框	search、search-box
横幅、广告、宣传图	banner
主要内容	content、main
侧边栏	aside、sidebar
页脚	footer、page-footer

精灵图

• 目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度（CSS精灵技术/CSS Sprites/雪碧图）
• 原理：把网页中全部的小图整合到一张大图中
• 使用：div + background-position: x y
• 一般使用伪元素 + 精灵图，可以省去一个盒子

精灵图的移动全为x，y的反方向，故x，y像素值为负值

字体图标

字体图标（iconfont）是一种使用字体文件中的特定符号和图标来显示图形图标的方法。通常，这些符号和图标以矢量形式存储在字体文件中，可以通过CSS或其他样式表语言进行调用和使用，可以把字体图标当做字体来使用

字体图标优点：

• 可缩放性： 由于字体图标是矢量图形，因此可以轻松缩放而不失真
• 颜色控制： 可以使用CSS轻松更改字体图标的颜色，而无需修改图像文件
• 轻量化： 字体图标通常比相同图像的位图格式更小，因为它们只是文本文件，而不是大型图像文件
• 易于使用： 通过使用字体图标，可以像使用普通文本一样简便地在网页或应用中插入图标。只需使用特定的字体类别和字符代码，就可以轻松地插入所需的图标

CSS三角

CSS盒子边框为四个等边矩形

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

div {
  position: relative;
  top: calc(50% - 65px);
  left: calc(50% - 65px);
  height: 30px;
  width: 30px;
  background-color: red;
  border: 50px solid transparent;
  border-bottom-color: pink;
  border-left-color: skyblue;
  border-right-color: purple;
  border-top-color: yellowgreen;
}

通过缩短content部分长度且透明化其他边框部分，使其变成三角形

div {
  position: relative;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  height: 0;
  width: 0;
  border: 50px solid transparent;
  border-bottom-color: pink;
}

样式属性

• 鼠标样式（cursor）

属性	描述
default	小白（默认）
pointer	小手
move	移动
text	文本
not-allow	禁止

• 轮廓线outline

input {
	outline: none;
}

• 防止拖拽文本域

textarea {
	resize: none;
}

• 列表属性

CSS属性名	功能	属性值
list-style-type	设置列表符号	none：不显示前面的标识 square：实心方块 disc：圆形 decimal：数字 lower-roman：小写罗马字 upper-roman：大写罗马字 lower-alpha：小写字母 upper-alpha：大写字母
list-style-position	设置列表符号的位置	inside：在li的里面 outside：在li的外边
list-style-image	自定义列表符号	url（图片地址）
list-style	复合属性	没有数量、顺序的要求

• 表格属性

CSS属性名	功能	属性值
border-width	边框宽度	CSS中可用的长度值
border-color	边框颜色	CSS中可用的颜色值
border-style	边框风格	none默认值 solid实线 dashed虚线 dotted点线 double双实线
border	边框复合属性	没有数量、顺序的要求

vertical-align

vertical-align用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式（谁有问题给谁设置）

• 只对行内、行内块元素有效（浏览器把行内、行内块当做文字处理）

vertical-align: baseline (默认)| middle | top | bottom

baseline：使元素的基线与父元素的基线对齐

top：使元素的顶部与其所在行的顶部对齐

middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐

bottom：使元素底部与所在行的底部对齐

溢出文字隐藏显示

• overflow：控制元素溢出部分的显示与隐藏

  • hidden：溢出部分隐藏
  • visible：溢出部分可见（默认）
  • scroll：无论是否溢出，都显示滚动条
  • auto：根据是否溢出，自动显示或隐藏滚动条

• 单行文本

/* 强制一行内显示文本 */
white-space: nowrap; /* 默认 normal 自动换行 */
/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

• 多行文本

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

元素垂直水平居中

父元素定宽高

使用定位，绝对定位和相对定位均可。使用绝对定位时，父元素设置为相对定位。此处以子元素相对定位为例

• 四边属性为 0，margin 自动。该方法本质是脱标，然后使用margin：auto使四边边距自适应，得到垂直水平居中的效果（某些场景可能失效，不建议使用）

position: relative;
left:0;
right:0;
top: 0;
bottom: 0;
margin: auto;

• 盒子左上角移到中心后，再回移 宽高 的一半

position: relative;
left: 50%;
top: 50%;
/* 使用margin移动 */
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

/* 使用transform移动 */
transform: translate(-50%,-50%);

• 使用cal函数

position: relative;
/* 使用CSS3 cal函数 */
top: calc(50% - 5px);
left: calc(50% - 10px);

父元素不定宽高

• 父容器开启 flex 布局，随后使用 justify-content: center 和 align-items: center 实现水平垂直居中

display: flex;
justify-content: center;
align-items: center;

• 父容器开启 flex 布局，随后子元素 margin: auto

/* 父元素 */
display: flex;
/* 子元素 */
margin: auto;