CSS笔记08

CSS笔记08

vertical-align: middle; 

这行代码经常和行内块元素搭配使用。
调整图片/特定被包裹的文字margin不会影响文字位置。

border-radius: 左上 右上 右下 左下;
border-radius: 左上+右下 右上+左下;

button默认水平居中垂直居中

父级切割子盒子：————————-
父级盒子里面嵌套一个比父级盒子大的子盒子，再把内容（如图片文字以及div等）放进子盒子，设置父级为overflow: hidden; 并给父级设置相应的边框，假装 拼起来即可（如九宫格）

• 行内和行内块元素可以看做字来用text-align: center;

• 行内元素没有上下边距

• 确保图片在同一序列大小一致：

• .recommend-r img{
    width: 100%;
    height: 100%;
  }

  • 选项卡切换布局常用 h3 + div
  • 操作的是li
  • 选项卡中不能用div做竖线
  • 选中的标签加一个xxx-current类

  养成大盒子包括一个大模块的习惯

过渡效果transition：
transaction: 过渡属性 花费时间 运动曲线 何时开始; 多个属性用逗号隔开。

liner匀速 ease指数 ease-in逐渐加速 ease-out逐渐减速

进度条做法： 盒子套盒子，两个盒子一样大，里面盒子给颜色，以内部盒子宽度加js计算

分页的制作：
全部用行内块
获得焦点（之后）：input:focus （类比hover）

crumb-wrap:面包屑导航
- 一般放在ul里面

• 预览图下面缩略图联动：div里面放ul，li浮动一字排开（ul给比较大的宽，即ul宽度比div宽），div用 overflow: hidden;

给浮动元素清除浮动可以解决无法使得两个浮动元素分两行显示的问题（浮动元素分行）

tab栏切换 一般是li套a
为保证大小位置不变，一般采用改边框颜色的方法，边框重合可以用margin-left: -1; ，再加上hover中给一个position: absolute;即鼠标放在盒子上即给定位浮起来。

    <style>
        .box{
            float: left;
            height: 200px;
            width: 200px;
            border: 2px solid #00f;
            margin-left: -2px;
        }
        .box:hover{
            position: relative;
            border: 2px solid #0f0;
        }
    </style>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

外边距塌陷(父亲包裹孩子，孩子有个margin值导致父亲跟着掉下来)：孩子有了定位和浮动，就不会出现，（之前采用的overflow: hidden;）

表单常用：<label for="">用户名：</label><span><input type="text"></span><span>用户名已注册</span>
文字右对齐：text-align: right;