CSS-Basic
文章目录

布局的参考网站: http://zh.learnlayout.com/

CSS

  • CSS 元素分类
    • 两种
    • 块级元素 (h1-h6, div, table, ul), 行内元素 (p, span, b, i)
    • display:block 元素可以设置高度 无法设置宽度, 并且会占一行
    • display:inline 元素可以设置宽高, 超出一行就换行
    • display:inline-block 令对象既有宽高的特性又能在同行内放置多个 elem
  • CSS 优先级
    • !important > 内联 > id > class > tag
    • important 比内联优先级高
  • position
    • absolute: 相对 position: static 以外的第一个父元素定位
    • fixed: 根据浏览器窗口定位
    • relative: 根据正常位置进行定位
  • CSS 的伪类
    • 伪类: 用于向某些选择器添加特殊的效果. 例如, a 标签的: link, :visited, :hover, :active; 以及 :first-child, :last-child.
    • 伪元素: 是 html 中不存在的元素, 用于将特殊的效果添加到某些选择器. 例如: before, :after, :first-letter, :first-line.css3 只新增了一个伪元素 ::selection(改变用户所选取部分的样式).

盒子模型

  • 记住从上到下排列关键字 mbp (速记: macbookpro)
  • Margin 靠近的时候可能会导致塌陷
  • 例如 ul-> li 添加了 margin top 10, bottom 5, 那么只会显示 10 因为 5 被覆盖了
  • 浏览器默认 margin = 8px

切换不同的盒子模型

使用 box-sizing 就可以切换

1
box-sizing: content-box|border-box|inherit;

content-box: 设置宽高不包含 padding 和 border (即 标准模式, 常用模式)
border-box: 设定宽高包含 padding 和 border (即 怪异模式, 早期版本的 IE 支持, 现在应该没什么浏览器会用这个模式了.)

  • 标准盒子模型
    • 高度和宽度仅仅是内容区的高度和宽度
    • 盒子的宽度 / 高度 = width/height + padding + border + margin
    • CSS 设置的宽度就仅仅是自己的 width/height, 不包含 mbp
  • 怪异盒子模型, 也就是怪异模式下的盒子模型
    • 高度和宽度不仅是内容区, 还包含了 padding 和 border
    • *CSS 设置高度宽度居然把 pb 也算进去 *

响应式布局以及移动端适配

  1. meta viewport: 让当前 viewport 的宽度等于设备的宽度, 同时不允许用户手动缩放.2. 媒体查询 (响应式)
  2. 动态 rem 方案

Flexbox 弹性布局

选用 Flex 布局的原因:

  • 灵活性高, 比传统布局配置简单得多

容器参数

  • flex-direction: 决定 主轴方向
  • align-items
    • 这个设定了在交叉轴上的对齐方式 (就是和主轴相垂直的那条轴)
  • align-content

新方法

1
2
3
4
5
<body>
  <header>HEADER</header>
  <article>CONTENT</article>
  <footer>FOOTER</footer>
</body>
1
2
3
4
5
6
7
8
9
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}

article {
flex: auto;
}

这部分中间内容会自适应

旧方法

缺点就是 footer 可能会覆盖内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <div class="page">
    <div class="header">11111</div>
    <div class="footer">22222</div>
  </div>

 .page{
    position: relative;
 }
.footer{
    position: absolute;
    bottom: 0;
}

// 另外可以给 page 设置一个 min-height

容器内元素参数

  • flex-grow: 放大比例
  • flex-shrink: 缩放比例
  • flex-basis: 缩放的基础值, 上方两个参数会根据这个值决定缩放后的大小
  • flex: 上方三个参数的同时设置
  • order
  • align-self: 单个项目的特殊对齐

居中的实现

优选方案

display:flex 方案

重点就是用到了 flex 这个属性, 兼容性也不错

1
2
3
4
5
6
div#xx p {
display: flex;
align-items: center; // 垂直居中, 必须和 display:flex 同时使用
justify-content: center; // 水平居中, 必须和 display:flex 同时使用
height: 200px; //p 的高度为 200, 但是内容显示在中央
}

次选方案

merge: 0 auto 方案

1
2
3
4
5
6
7
8
.center {
height: 200px;
width: 200px;
margin: 0 auto;
border: 1px solid red;
}

<div class="center">水平居中 </div>

CSS 哪些属性可以继承 (状态写成 inherit 的时候进行继承)

  • 字体相关: line-height, font-family, font-size, font-style, font-variant, font-weight, font
  • 文本相关: letter-spacing, text-align, text-indent, text-transform, word-spacing
  • 列表相关: list-style-image, list-style-position, list-style-type, list-style
  • 颜色: color
  • 可见性: visibility