CSS深入浅出|青训营笔记

THIM
77 阅读4分钟

image.png

CSS应用 --- 布局

几种布局中我最常用的是

  1. 常规流
  2. 弹性盒子
  3. 定位
  4. 网格布局（很少，用过一两次）

css定位（position）大坑！

  1. 为什么这么说呢，因为要是没有搞清楚，页面就很乱
  2. 要是一开始还不会封装组件，就会很惨

position 属性的五个值：

  • static fixed relative absolute sticky
  • sticky 是默认的，没有定位，按照文档创建的顺序形成文档流

sticky 在那些 top, bottom, left, right 调整下没有任何用

  • relative 相对定位元素的定位是相对其正常位置。
  • absolute绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素，那么它的位置相对于<html> [就是左上角]
  • sticky 定位很有意思。基于用户的滚动位置来定位
    1. 它的行为就像 position:relative;  而当页面滚动超出目标区域时
    1. 它的表现就像 position:fixed; ，它会固定在目标位置

层叠上下文

平面布局外还有层叠布局，比如 z-index可以调整哪个块级元素在最上面哪个在下面，opacity可以表示一个元素的透明度

  • z-index是相对的，只要你想先后的两个元素的大小保持在大的在上小的在下就可以
  • 比如说 z-index:"200"; 就在 z-index:"1"; 上面

动画效果

transition 属性设置元素当过渡效果

在设置这个元素之前，我们一般要先设置，这个元素在变化前后的状态变化。

image.png

比如说这个按钮在hover之前

image.png

和它被hover之后，就会有一个颜色变化，那这个过程就可以用transition

  • transition 效果需要指定多少秒或毫秒才能完成 transition-duration
  • 定义transition效果开始的时候 transition-delay

这两个是常用的除此之外还有

  • transition-property
  • transition-timing-function
animation

功能如其名 动画

基本但一般用久了才知道怎么用的用法是

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

image.png

布局视口（viewport）

可以在 <meta> 标签里面对viewport进行定义

顺便说一下这个编辑器有个点很惊喜 ，如图：

image.png

言归正传：

  • layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小

meta标签要写怎么写？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

image.png

最后一个模块

工程架构 CSS模块化

提示，以下规范和操作都是为了解决全局污染问题的出现，以及实现样式隔离

  • BEM 命名规范

BEM的命名规矩很容易记：

block-name__element-name--modifier-name

也就是模块名+ 元素名+ 修饰器名

  • vue-loader的 scoped 方案

鉴于我个人的理解就是，scoped就可以只在当前文档中生效，比如说我们创建vue的时候，主页App.vue里面的style样式就被默认为 scoped，其他外面的元素对我们这一页是不受影响的，它的 CSS 只作用于当前组件中的元素。

  • CSS Modules

我再来用简单说法解释一下，就是一般的css样式我们直接引用就可以，不需要做任何调整，但是当你在js中使用这个方式，CSS Modules 的时候，你的类型就会被完全替换掉，这样，这个样式就只会应用在这一个组件上面。

image.png

就会被替换为

image.png

  • 这个方法就可以很好的区分不同的class样式，其实就和第一个方法一样
  • 区别了每一个class类

要是还有不理解可以查一下相关的比如说。CSS工程化，模块化

image.png

CSS-in-JS

这个用过react的同学就很好理解，想入门react的可以看我这篇文章

react里面我们就是在 js里写上css和html

React 对 CSS 封装非常简单

const style = {
  'color': 'red',
  'fontSize': '46px'
};

styled-component

  • styled-components 是一个常用的css in js 类库
  • 可以直接npm下载
npm install styled-components
  1. 如何理解
  2. 还是按它的名字
  3. 样式组件化
  4. 没错的
  5. 就是把你写的样式放在js里面定义后
  6. 在html像引用组件一样引用它
const Sidebar = styled.section`
  margin: 0 auto;
  width: 300px;
  text-align: center;
`;

  <Sidebar>
avatar
文章
阅读
粉丝