CSS使用小技巧

网页制作思路

从上到下，先整体，再局部
先标签，再css美化

常用布局名词

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

布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。
   即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
   例如： text-align 、 line-height 、 text-indent 等。
2. 如何让子元素，在父亲中 水平居中：
   • 若子元素为块元素，给父元素加上： margin:0 auto; 。
   • 若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
3. 如何让子元素，在父亲中 垂直居中：
   • 若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子总高) / 2。
   • 若子元素为行内元素、行内块元素：
     让父元素的 height = line-height ，每个子元素都加上： vertical-align:middle; 。
     补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

CSS书写顺序

1. 布局属性
2. 盒模型
3. 排版属性
4. 视觉属性
5. 变换与动画
6. 交互

.card {
  /* 1. 布局定位 */
  display: flex;
  position: relative;
  z-index: 10;

  /* 2. 盒模型 */
  width: 300px;
  height: 200px;
  margin: 20px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-sizing: border-box;

  /* 3. 排版与文本 */
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* 4. 视觉装饰 */
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.95;

  /* 5. 变换与动画 */
  transition: all 0.3s ease;

  /* 6. 交互 */
  cursor: pointer;
  overflow: hidden;
}

单行文字垂直居中

行高属性值 = 盒子高度属性值

图片水平对齐

给父元素设置text-align: center;

定位居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

版心居中

盒子要有宽度
margin: 0 auto;

清除默认样式

/* 全局重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 推荐启用内减模式 */
}

/* 清除列表样式 */
ul, ol {
  list-style: none;
}

/* 清除链接默认样式 */
a {
  text-decoration: none;
  color: inherit;
}

/* 清除按钮默认样式 */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* 清除输入框默认样式 */
input, textarea {
  border: none;
  outline: none;
  background: none;
}

隐藏元素的方式

方式一：visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏
元素看不见了，还占有原来的位置（元素的大小依然保持）
方式二： display 属性
设置 display:none ，就可以让元素隐藏
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高

元素之间的空白问题

产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：

1. 方案一： 去掉换行和空格（不推荐）。
2. 方案二： 给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。

行内块的幽灵空白问题

产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：

1. 方案一： 给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、top 均可。
2. 方案二： 若父元素中只有一张图片，设置图片为 display:block 。
3. 方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size 。

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}
.clearfix::after {
	clear: both;
}

flex 实现水平垂直居中

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

.outer {
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner {
	
}

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

.outer {
	display: flex;
}
.inner {
	margin: auto;
}

适配

flexible.js
根据不同的视口宽度，给网页中html根节点设置不同的font-size