CSS基础知识总结复习

一、CSS定义

CSS是用来定义页面元素的样式

• 设置字体与颜色
• 设置位置和大小
• 添加动画效果

二、CSS基本规则的结构

h1{                  /*选择器h1(给页面所有的h1定义样式)*/
    color:white;     /*属性color:属性值white*/      
    font-size:14px;  /*属性:属性值就是一个声明*/
}

三、在页面中使用CSS的方法

1. 外链

<link rel="stylesheet" href="/assets/style.css">

2. 嵌入

<style>
    p { margin:2px; }
</style>

3. 内联

<p style="margin:2px">hello</p>

四、选择器选择元素的方式

• 按照标签名
• 按照类名（可以多个元素有同一个类名）
• 按照id（id只能对于唯一一个元素）
• 按照属性 [disabled]{ } input[type="password"]{ }(支持正则表达式）a[href^="#"] a[href$=".jpg"]
• 按照状态伪类:focus { } a:hover{ }
• 按照DOM树中的位置（结构伪类）li:first-child { }
• 匹配所有* { }

五、选择器的组合

• 直接组合 input:focus（满足A同时满足B）
• 后代组合 nav a(选中该B，如果他是A的子孙）
• 亲子组合 section>p（选中B，如果他是A的子元素）
• 兄弟选择器 h2 ~ p(选中B，如果他在A后且与A同级)
• 相邻选择器 h2 + p(选中B，如果他紧跟在A后面）
• 选择器组input,p,li { }(相同属性和属性值的元素组合起来）

六、CSS选择器生效顺序

1.特异度：选择器特殊的程度，越特殊的选择器优先级越高

• 特异度排序：id > (伪)类 > 标签
• 同类选择器排序：例如同为id选择器，则看id的个数，个数越大越优先

2.显式继承

 * {
     box-sizing:inherit;
}
html {
    box-sizing:border-box;
}

上面代码的意思是，页面中所有元素的box-sizing都会继承父级组件的box-sizing（只要父级组件有设置box-sizing,没有的话就全局默认值）

七、CSS字体与排版

a {
    font-family:Sans-Serif,"微软雅黑"; /*设置字体*/
    font-style:italic;                 /*斜体，默认normal*/
    font-weight:100;                   /*取值范围100-900 默认normal400 加粗700bold */
    
    line-height:1.6;                  /*实际行高20px*1.6=32px*/
    text-align:center;                 /*居中排版*/
    letter-spacing:normal;             /*字符间距*/
    word-spacing:normal;               /*单词间距*/    

white-space

• normal 默认，合并空格，自动换行
• nowarp 强制不换行，合并空格
• pre 保留所有，包括空格换行
• pre-warp 保留空格，自动换行
• pre-line 合并空格，保留换行

八、CSS布局

1.布局相关技术

• 常规流
  • 行级display:inline
    • 默认创建一个行盒子（ifc：Inline Formatting Contexts）
    • 盒子在一行内水平摆放
    • 一行放不下时换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align决定垂直对齐
    • 避开浮动元素
  • 块级display:block
    • 创建一个bfc
    • 盒子从上到下摆放
    • 垂直margin合并
    • bfc内margin不和外面的合并
    • bfc不会和浮动元素重叠
  • 表格布局
  • FlexBoxdisplay:flex
    • 新的排版上下文
    • 可以控制子盒子的流向、顺序、宽高、水平垂直对齐、是否折行
    • align-items
    • Flexibility 设置子项弹性，有剩余空间会变大，空间不足会变小
    • justify-content

• Grid布局（二维网格）display:grid
  • grid-template-columns
  • grid-template-rows
  • 通过grid line编号来定位元素

• float浮动（有flex和grid后仅用于文字排版）
• absolute绝对定位
  • postion:relative 相对自己本应该在的位置进行偏移
  • postion:absolute 脱离常规流，相对最近的非static祖先定位
  • postion:fixed 脱离常规流，相对窗口定位
  • postion:sticky 顾名思义，粘性定位

2.盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-muNwsN4a-1662793388677)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f2a712ff06b44ccafc78bc4bce2f03d~tplv-k3u1fbpfcp-watermark.image?)]

• border
  • border-width
  • border-style
  • border-color
  • 四个方向：border-top…
  • 当box-sizing:border-box时，height和width包括了border和padding的宽度
• margin
  • margin-left:auto;margin-right:auto margin实现水平居中
  • margin collapse margin垂直上不会进行margin的相加，只会取最大值
• overflow 控制溢出的元素
  • visble
  • hidden
  • scroll