跳至主要內容

排版

Emilia Zhen大约 3 分钟

居中

  • 块级元素居中:
margin: 0 auto; /* 必须要有宽 */
  • 行内块元素和行内元素居中:
text-align: center; /* 给父元素 */
  • 背景图片居中:
background-position: center center`;
  • 文字垂直方向居中：
line-heigth: 盒子高度;
  • 定位居中:
left: 50%;
top: 50%;
margin-top: 负高度一半;
margin-left: 负宽度一半;

图片的宽高和位置操作

插入图： 宽高通过 width height 位置 margin
图片居中: 父元素text-align:center;
背景图: 宽高通过 background-size: 宽 高;
位置: background-postion: x y;
背景图居中： background-postion:center;

浮动

  • 标准流 也叫文档流， 元素从上到下，从左到右的排列方式，就是标准流
  • 非标准流 浮动 + 定位
float: left;
float: right;

特点

  • 让盒子在一行上显示
  • 浮动的元素会跟文字紧挨着
  • 浮动元素会漂浮，在原位置上漂浮,只会影响后面的元素
  • 浮动的元素会自动转换为行内块元素

清除浮动

盒子被盖住的解决的 4 种方法

  • 额外标签法 在盒子末尾加上一个空标签
<div style="clear:both"></div>
  • 父元素添加
overflow: hidden;
  • 单伪元素清除浮动
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
} /* IE6、7 专有 */
  • 双伪元素清除
.clearfix:before,
.clearfix:after {
  content: '';
  display: table; /* 触发BFBFC清除浮动 */
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

定位

定位必须配合方位进行移动，如果不写方位单词默认left:0; top:0;点，但是位置可能未知

position: static; /* 静态定位 */
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位 */
position: fixed; /* 固定定位 */

相对定位

  • 参照自己移动
  • 脱标,但是占标准流位置

绝对定位

  • 参照浏览器进行移动，如果父元素有定位，参照父元素移动
  • 脱离标准流
  • 转行内块模式

固定定位

  • 参照浏览器移动
  • 脱标，并且脱浏览器(不随页面滚动而滚动)
  • 转行内块模式

定位的工作使用技巧

  • 子绝父相
  • 定位居中

层级

  • 默认定位元素的层级为 0， 没有层级的情况下，后面的覆盖前面的
  • 定位的元素数值越大，越在上面
  • 定位层级 z-index 属性值不带单位，可以是 0、正数，负数 2

弹性盒子

display: flex;

弹性盒子的作用： 剩余部分等均分。 弹性盒子的使用步骤：

  1. 给父盒子display:flex; 显示模式为弹性盒子
  2. 给子元素通过 flex 设置份数。 flex:2;
  3. flex-direction:row; 水平平均分 X 轴 主轴 column; 垂直平均分 Y 轴 侧轴

部分问题解决

边框的清除

border: 0;
outline: none;

文本域的缩放清除

resize: none;

行内块元素和文字基线对齐

vertical: middle; /* 或者 float+margin  */

行内块元素(img,input)与父元素之间有缝隙

display: block;

单词之间的间距

word-space: 10px;

文字超出显示省略号

/* 单行 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* 多行 */
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

文字两端对齐

.user-info-list {
  width: 240px;
  > li {
    border-bottom: 1px dashed #ddd;
    height: 30px;
    line-height: 30px;
    > span:first-child {
      width: 60px;
      overflow: hidden;
      vertical-align: top;
      display: inline-block;
      text-align: justify;
      text-justify: distribute-all-lines; /*ie6-8*/
      text-align-last: justify; /* ie9*/
      -moz-text-align-last: justify; /*ff*/
      -webkit-text-align-last: justify; /*chrome 20+*/
    }
    > span:first-child::after {
      content: '.';
      display: inline-block;
      width: 100%;
      overflow: hidden;
      height: 0;
    }
  }
}

卡券锯齿

background: radial-gradient(circle at 50% 50%, #fff 0, #fff 50%, transparent 0);
background-size: 14px 11px;
background-color: #c63f32;
background-repeat: repeat-x;
background-position: 0px 85px;
EmiliaZhen
Copyright © 2024 Emilia Zhen