CSS基础笔记

参考

菜鸟教程

简写属性顺序

上右下左
上(左右)下
(上下)(左右)

盒子模型

重要

在盒子模型中设置元素的宽高是只是内容的宽高，实际盒子大小应加上padding、border、margin的大小

边框注意事项

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

轮廓outline

outline是不占空间的，既不会增加额外的width或者height

padding

padding的颜色由元素背景颜色决定

块和内联元素

块元素(block)占用了全部宽度，在前后都是换行符(如<p>,<div>,<h1>)
内联元素(inline)只需要必要的宽度，不强制换行(如<span>,<a>)

Position(定位)

static: 元素的默认值，即没有定位，遵循正常的文档流对象,不会受到 top, bottom, left, right影响
relative: 相对其正常位置,但原本所占的空间不会改变,经常被用来作为绝对定位元素的容器块
fixed: 元素的位置相对于浏览器窗口是固定位置,元素的位置与文档流无关，因此不占据空间
absolute: 绝对定位是相对于最近的已定位的父元素(没有则相对于<html>),与文档流无关,不占空间
sticky: 当页面滚动超出目标区域后表现为fixed

z-index

z-index属性指定了一个元素的堆叠顺序

overflow

注意

overflow 属性只工作于指定高度的块元素上

visible (默认): 直接溢出,不会滚动
auto: 溢出后有滚动条
hidden: 隐藏溢出
scroll: 显示滚动条(无论是否溢出)
inherit: 继承父类

Float

浮动方向是水平的
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素之后的元素将围绕它
浮动元素之前的元素将不会受到影响
把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻

清除浮动

clear 属性指定元素两侧不能出现浮动元素

对齐

元素居中对齐

指定宽度+margin: auto

文本居中对齐

text-align: center

图片居中对齐

img {
    display: block;
    margin: auto;
    width: 40%;
}

浮动对齐

建议

使用浮动对齐时应该先对 <body> 元素的外边距和内边距进行预定义,避免浏览器出现差异

如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出,此时我们可以在父元素上添加:

.clearfix {
    overflow: auto;
}

垂直居中对齐

padding

line-height

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

组合选择符

后代选择器(以空格分隔) :全部后代(子孙)
子元素选择器(以大于 > 号分隔) :只有直接子元素
相邻兄弟选择器（以加号 + 分隔）:紧接在另一元素后的第一个元素且同父元素
普通兄弟选择器（以波浪号 ～ 分隔）:所有后面的兄弟元素

box-sizing

padding(内边距) 和 border(边框) 也包含在 width 和 height

*{
    box-sizing: border-box;
}

弹性盒子

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

常用

justify-content
align-items
flex-wrap

其它

align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性

特殊

margin:auto 弹性子元素可以水平+垂直居中(设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间^[1])

flex
- auto: 计算值为 1 1 auto
- initial: 计算值为 0 1 auto
- none：计算值为 0 0 auto
- inherit：从父元素继承
- [ flex-grow ]：定义弹性盒子元素的扩展比率。
- [ flex-shrink ]：定义弹性盒子元素的收缩比率。
- [ flex-basis ]：定义弹性盒子元素的默认基准值。

见这里 ↩︎