css元素自动换行_CSS 知识总结

一、CSS介绍

• CSS指层叠样式表，其作用是给HTML提供了一种样式描述，定义了其中元素的显示方式。
• CSS使用最广泛是2.1版本，CSS3之后是2.1各模块的升级版

二、CSS语法

选择器 {
   属性名:属性值;属性名:属性值;
   /*注释*/
}

注意事项

• 所有符号都是英文符号，如果写错了，浏览器会警告
• 区分大小写，a 和 A 是不同的东西
• 没有 // 注释
• 最后一个分号可以省略，但建议不要省略
• 任何地方写错了，都不会报错，浏览器会直接忽略

三、调试方法

1. W3C在线验证器
2. VScode看代码颜色
3. Webstorm看代码颜色
4. 使用浏览器的开发者工具查看警告
5. Border调试法（最重要，做法是在某元素后添加border，若边框没出现，说明选择器错了或者语法错了

四、文档流

文档流就是文档流动方向

1、流动方向

• inline 元素从左到右，到达最右边才会换行
• block 元素从上到下，每个都另起一行
• inline-block 也是从左到右，每个元素成块在一行

2、宽度

• inline 宽度为内部inline元素的和，不能用width指定
• block 默认自动计算宽度，可用width指定
• inline-block 结合前两者特点，可用width指定

3、高度

• inline 高度由line-height间接决定，与height无关
• blokc 高度由内部文档流元素决定，可以设置height（脱离文档流后不算高度，float 与 position：absolut/fixed可以让元素脱离文档流）
• inline-block 跟block类似，可以设置height

4、文档流特殊情况：对block 内容超出 height 的高度，可以使用overflow弥补

overflow:hidden /*隐藏超出内容*/
overflow:visible /*直接显示溢出内容*/
overflow:scroll /*有滚轮，但不超出时都有滚轮*/
overflow:auto /*scroll的升级版*/

五、盒模型（box-sizing）

1、类型

• context-box 内容盒模型-内容就是盒子的边界
• border-box 边框盒模型-边框才是盒子的边界

2、宽度

• context-box width=内容宽度
• border-box width=内容宽度+padding+border

3、推荐

border-box更好用，因为可以同时指定内容、padding、border的宽度

5、小知识

margin合并

• 父子上下margin会合并
• 兄弟margin会合并

阻止合并的方法

• 父子合并用padding/border、overflow：hidden、display：flex挡住
• 兄弟合并用inline-block消除

六、CSS布局

1、float布局

步骤：

子元素css里加上float:left和width

在父元素添加clearfix类

.clearfix{
context:' ';
display:block;
clear:both;
}

经验：

• 设计时会流一些空间或者最后一个不设置width
• 不需要做响应式，这个时专门为IE准备
• IE 6/7有双倍margin bug（解决：IE 6/7把margin减半或加上display：inline-block）

2、flex布局

/*重点记住*/
/*父元素变成flex容器*/
.container{
    display: flex;/*or inline-flex*/
}
/*改变容器里item流动方向*/
.contant{
    flex-direction:row|column; /*item row横排、column竖排*/
}
/*item换行*/
.contant{
    flex-wrap:wrap;
}
/*item 横排对齐方式*/
.item{
    justify-content:center/space-between;/*横排 居中对齐 左右对齐*/
}
/*item 竖排对齐方式*/
.item{
    align-items:center;/*竖排居中对齐*/
} 

3、grid布局

/*重点记住*/
/*父元素变成grid容器*/
.container{
    display: grid;/*or inline-flex*/
}
/*行列设置*/
.container{
    grid-template-columns:40px 50px auto 50px 50px;/*列宽40px 50px 自动 50px 40px*/
    grid-template-rows:25% 100px auto;/*行宽25% 100px 自动*/
    /*还可以用fr 一份一份代替 1fr 50px 25% auto*/
}
/*单元格的间隙*/
.container{
    grid-gap:12px /*每个格上下左右之间间隙12px*/
    grid-row-gap:12px /*每个格左右之间间隙12px*/
    grid-column-gap:12px /*每个格上下之间间隙12px*/
}

/*快速布局 grid-template-areas*/
.container{
    grid-template-areas:
       "A A B"
       "C C B"
       "D D D";
}
.item1/2/3/4{
    grid-area:A/B/C/D;   /*例子 分item1 item2 item3 item4 类，grid-area属性为 A B C D*/
}

七、CSS定位

1、div的分层（从最底层到最顶层）

z-index:-1>background>border>块级子元素>浮动元素>内联子元素>z-index:1;

2、position

• position:relative 相对定位，一般给absolute元素做爸爸，配合z-index（层叠）
• positio:absolute 绝对定位，脱离原来位置另其一层（关闭按钮），鼠标提示，配合z-index，要善用left:100%、left：50%加负margin;
• position:fixed 悬浮框，烦人广告、回到顶层按钮，不要用到手机上

更多查阅

层叠上下文​developer.mozilla.org

八、CSS动画

1、浏览器渲染过程

• 根据HTML构建HTML树
• 根据CSS构建CSS树
• 将两棵树合并成一颗渲染树
• Layout布局
• Paint绘制
• Compose合成

2、CSS 动画的两种做法

a.transform 图形变换（先介绍）

/*位移 translate*/
transform:translateX(50px); /*X方向右移动50px*/
transform:translateY(50px); /*Y方向上移动50px*/
transform:translateZ(50px); /*Z方向上移动50px*/
/*z轴要添加视点，perspective:1000px */
transform:translate(x,y);
transform:translate3d(x,y,z);
/*缩放 scale*/
transform:scale(1.5); /*放大1.5倍*/
transform:scale(1.5，0.5); /*X方向放大1.5倍，Y方向放大0.5倍*/
transform:scaleX(1.5); /*X方向放大1.5倍*/
transform:scaleY(1.5); /*Y方向放大1.5倍*/
/*旋转 rotate*/
transform:rotate(360deg);/*顺时针旋转360度*/
transform:rotateX(60deg);/*按X轴顺时针旋转60度*/
transform:rotateY(60deg);/*按Y轴顺时针旋转60度*/

b.transition 过渡

• 作用：补充中间帧
• 语法：transition：属性 时长 过度方式 延迟
• dispaly:none=>block 无法过渡 改成visibility:hidden=>visible

c.animation

animation 与 @keyframes 配合

animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

语法：

animation: 1.5s infinite forwards xxx;

@keyframes xxx{
0% {
    transform:none;
  }
66% {
    transform:tranlateY(200px);
  }
100%{
    transform:translateX(200px);     
}

---

本篇文章版权归本人和饥人谷所有，转载请注明出处