css
CSS3 新增了那些东西？
- 选择器
- 盒子模型属性：border-radius、box-shadow、border-image
- 背景：background-size、background-origin、background-clip
- 文本效果：text-shadow、word-wrap
- 颜色：新增 RGBA，HSLA 模式
- 渐变：线性渐变、径向渐变
- 字体：`@font-face`
- 2D/3D 转换：transform、transform-origin
- 过渡与动画：transition、`@keyframes`、animation
- 多列布局
- 媒体查询
动画
css 中如何开发动画
ransition 过渡动画：
transition-property：指定过渡的 CSS 属性
transition-duration：指定过渡所需的完成时间
transition-timing-function：指定过渡函数
transition-delay：指定过渡的延迟时间
animation 关键帧动画：
animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔
animation-iteration-count：定义动画的播放次数
animation-direction：指定是否应该轮流反向播放动画
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state：指定动画是否正在运行或已暂停
tranistion 和 animation 的区别
- 过渡没法精准控制动画每一帧，动画可以
- 过渡只能触发一次，动画可以无限循环
盒模型
css 中的盒模型有几种
- content-box：clientWidth = width+padding+border
- border-box：clientWidth = width
选择器
css 中的选择器权重大小是怎样的
每种 css 的选择器都有自己的权重值，important>style>id>class>elemnt,当选择器组合起来时，权重值的累加之和最大的选择器起作用。
单位
css 中的响应式单位
- rem：相对于网页的 html 节点的
font-size的大小来计算的，1rem = 100px,可以根据页面视口大小来调整 html 节点font-size的大小，从而控制页面元素的大小。 - em: 相对于父元素的
font-size的大小来计算的。 - vw: 相对于视口
width的1%。 - vh: 相对于视口
height的1%。 - vmin: 视口的宽度和高度中的较小值
- vmax: 视口的宽度和高度中的较大值
布局
css 中的布局技术
- float
- position
- flex
- grid
介绍 Flex 布局
- 弹性盒子布局：是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
容器属性
- 如何设置主轴方向：flex-direction
- 如何让子元素换行： flex-wrap
- 说出 space-between 和 space-around 的区别？
这个是 flex 布局的内容，其实就是一个边距的区别，按水平布局来说，space-between 是两端对齐，在左右两侧没有边距，而 space-around 是每个 子项目左右方向的 margin 相等，所以两个 item 中间的间距会比较大
子元素属性
- flex 是什么属性的缩写： flex-grow、flex-shrink 和 flex-basis
- align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
实践
CSS 外边距重叠问题及解决办法
- 只有块级元素
(display:block)会发生外边距重叠 - 外边距叠加存在两种情况：一是父子外边距叠加；二是兄弟外边距叠加。
.box1 {
height: 300px;
width: 300px;
background-color: antiquewhite;
margin-bottom: 100px;
}
.box2 {
height: 100px;
width: 100px;
background-color: aqua;
}
.box2 {
margin-top: 100px;
}
<div class="box1">
<div class="box2"></div>
</div>
- 解决方案
- 给父元素或子元素开启 BFC
- 用点东西将父子元素的边缘隔开
水平垂直居中
{
display: flex;
align-items: center;
justify-content: center;
poasition: absolte;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
使用 flex 布局开发一个一行两列，左边固定宽度，不会缩放，右边自适应的布局
.left {
flex: 0 100px;
}
.right {
flex: 1;
}
两列等高（使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同）
{
align-items: stretch;
}
多行文本溢出省略效果
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;
}
如何用 CSS 实现一个三角形
<div></div>
div {
width: 0;
height: 0;
border: 10px solid red;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
如何实现一个自适应的正方形
.square {
width: 10vw;
height: 10vw;
background: red;
}
.square {
width: 10%;
padding-bottom: 10%;
height: 0; // 防止内容撑开多余的高度
background: red;
}
如果一个元素出现滚动条，你想去掉这个滚动条，你该如何排查
- 首先查看是否元素中的子元素宽度超出
- 如果不超出，就看子元素的子元素宽度是否超出
移动端自适应布局方案
- rem
- em+%
font-size：10px 不起效果
- 原因：谷歌浏览器的字体最小限制为 font-size:12px；
- 解决方案：
手机端设置 rem 为单位：
html {
font-size: 100px;
}
.a {
font-size: 0.1rem；;
}
使用 transform:scale(0.8):
.a {
font-size: transform:scale(0.8)；
}