定位

静态定位

相对定位

绝对定位

父子关系

居中

层级关系

<div class="one">one</div>
<div class="two">two</div>

div {
  width: 200px;
  height: 200px;
}

.one {
  position: absolute;
  left: 20px;
  top: 50px;

  z-index: 1;

  background-color: pink;
}

.two {
  position: absolute;
  left: 50px;
  top: 100px;

  background-color: skyblue;
}

/* 
    默认情况下, 定位的盒子  后来者居上 ,
    z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
    注意: z-index必须配合定位才生效
*/

装饰

垂直对齐

相关信息

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

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

光标类型

提示

使用属性cursor

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可点击
text	工字形，提示用户可选择文字
move	十字光标，提示用户可以移动
url	自定义图片

圆角边框

提示

使用属性border-radius

一个值：表示四个角是相同的

三个值：左上、右上（对角左下）、右下

四个值：左上、右上、右下、左下

圆

1. 步骤1

   盒子必须是正方形

2. 步骤2

   取值50%，超过50%无效果

胶囊按钮

1. 步骤1

   盒子要求是矩形

2. 步骤2

   值是盒子高度的一半

溢出效果

相关信息

指的是盒子内容部分超出盒子范围

属性值	效果
visible	默认值
hidden	溢出部分隐藏
scroll	无论是否溢出，显示滚动条
auto	根据内容自动显示滚动条

元素隐藏

警告

visibility:hidden浏览器正常渲染元素，display:none浏览器不渲染元素

透明属性

提示

使用属性opacity

三角形

1. 步骤1

   画一个盒子

2. 步骤2

   设置四周不同颜色边框，方便区分

3. 步骤3

   盒子高度改为0，仅保留边框

拓展

表格边框合并

焦点伪类选择器

属性选择器