CSS 基础

盒模型

box-sizing:content-box; 块元素的width / height属性设置的是内容的尺寸，css2标准默认为此值。
box-sizing:border-box; 块元素的width / height属性设置的是内容加填充加边框尺寸。

宽40%,padding 10px的盒子

方案一：IE盒模型 box-sizing: border-box

<div style="width: 40%;padding: 10px"></div>

方案二：W3C盒模型 box-sizing: content-box

<div style="width: 40%">

    <div style="padding: 10px"></div>

</div>

方案三：CSS 表达式

<div style="width: calc(40% - 20px); padding: 10px"></div>

优先级

!important > 内联样式 > 样式表样式

选择器优先级：id(1,0,0) > class(0,1,0) > 元素(0,0,1), 组合选择器的优先级为所包含选择器的和
样式表优先级：内嵌样式表 > 导入样式表(@import) > 外链样式表 

display

block-level块级：block\table\flex\grid (div,p)

inline-level行内：inline (a,span,label)

inline-block-level行内块级: inline-block\inline-table\inline-flex\inline-grid (image, object, video, embed, textarea, input, audio, canvas, applet)

inline-block-level元素之间会有间隙，可以用浮动来去除间隙

position

包含块(Containing block)：一个元素的包含块是这个元素width\height\padding\margin\border百分比值的基数, 偏移量left\right\top\bottom的基点

初始包含块ICB (initial containing block): 根节点的包含块，起点viewport左上角，尺寸等于viewport

static元素的包含块：块级祖先元素的content box

relative元素的包含块：块级祖先元素的content box，但偏移量的基点不是它的包含块，而是文档流当前位置

absolute元素的包含块：有定位祖先元素的padding box，直到ICB

无偏移的绝对定位：absolute、fixed，如果不写left和top，位置处于其在文档流中的位置，此时可以用margin（可以是负值）来调整位置。

float

浮动对display的影响

1、对flex\inline-flex元素 不起作用

2、inline\inline-block -> block

3、inline-table -> table

4、table-row\table-column\table-cell\table-caption\table-row-group\table-column-group\table-header-group\table-footer-group -> block

margin: auto

水平方向上：block元素的margin box宽度默认是整行，确定content box的宽度后，设置margin:0  auto，margin会自动占满整行，两边平分

垂直方向上：{

    position: absolute; top: 0; bottom: 0; // 确定margin box高度

    height: 100px; // 确定 content box 高度，高度不确定，可以设置为fit-content

    margin: auto 0; // 垂直方向margin自动沾满，上下平分

}

垂直方向上margin合并

垂直方向上的块级元素之间margin会合并，块级元素和浮动元素之间会合并，浮动元素之间不会合并

第一行子元素（非BFC，非inline-table\inline-caption）的margin-top作用在父元素(无border和padding)外部，并和父元素的margin-top合并。margin-bottom同理

行框（line box）

实际font-size: text-top~text-bottom，文字的实际显示高度可能比设置的font-size大

实际行高（行框高）：top~bottom，可能比line-height的值大

每行的行框高一样的情况下计算行距：

行距：top~text-top + text-bottom~bottom = top~text-top * 2 = 实际行高 - 实际font-size

半行距：行距/2 = top~text-top

一行文字的高度 = 行框高

多行文字的高度 = 行框高 * 行数 - 行距

行框高计算

一个元素内的每一行的行框高都可能不一样，某一行的行框高取以下五个行高来源的最大值

1、当前元素的实际font-size

2、当前元素line-height。默认为normal，会比实际font-size大一点。设为1或100%则等于实际font-size。

3、这一行inline类型子元素的实际font-size

4、这一行的inline类型子元素的line-height。未设置line-height，则从父元素（当前元素）继承。如果继承来的是数字或normal，那么基准是子元素的font-size。如果继承来的是%，那么基准是父元素的font-size。

5、这一行的inline-block类型子元素的margin box高度 + 这个子元素与当前元素之间的垂直方向错位。inline-block元素只会和一行inline元素同行。vertical-align为baseline时会和当前元素有错位。

格式化上下文（Formatting Context）

BFC元素（block formatting context）

1、根元素

2、float 不是 none

3、position: absolute, fixed

4、display: inline-block\flex\inline-flex\grid\inline-grid\table-cell\table-caption\flow-root

5、overflow 不是 visible

6、column-count 或 column-width 不为 auto

7、column-span：all

8、contain: layout\content\strict

BFC元素与普通元素的区别

1、普通元素的第一行子元素的margin-top作用在父元素(无border和padding)外部，BFC元素的则作用在内部。margin-bottom同理。

2、普通元素的浮动子元素不会撑高父元素，BFC元素的则会

3、普通元素不会横向避开浮动元素，BFC元素则会

选择器

CSS 选择器参考手册

重点：伪类 :nth-child(2n+1)

媒体查询 Media Query

<link>中

<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/gt-960px.css">

当页面宽度大于等于960px时，载入样式表gt-960px.css

<link rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:960px)" href="css/gt-600px-lt-960px.css">

当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css

<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="css/lt-600px.css">
当页面宽度小于等于600px时，载入样式表lt-600px.css

CSS文件中

@media screen and (min-width:960px){

}

参数

媒介类型：screen、print、handheld、all

屏幕参数：width(布局宽度)、height、device-width（屏幕宽度）、device-height、orientation屏幕方向（landscape横屏、portrait竖屏）、resolution（像素密度 dpi）、device-pixel-ratio（缩放比dpr）

CSS3

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS3

一、静态效果

       1、背景：多背景、背景尺寸（background-size）、背景范围（background-origin）

       2、圆角（border-radius）

       3、阴影（box-shadow）

       4、渐变

             线性渐变：background-​​image: linear-gradient(top left, #FFFFFF 50%,rgba(255,255,255,0) 100%) ;

                                 参数为方向和颜色节点（Color-Stops），方向可用角度表示，如 90deg  

             径向渐变（放射渐变）：radial-gradient(red, yellow, rgb(30, 144, 255));

             重复渐变：repeating-linear-gradient 和 repeating-radial-gradient     

      5、滤镜 （ filter ）

二、文本效果

       1、文字阴影（text-shadow）

        2、换行溢出（word-wrap、word-break、white-space、text-overflow）

        3、字体（@font-face）, 注意，字体文件所在的服务器需要配置允许跨域

三、变换效果（transform）：变换发生在定位以后，对元素整体进行变换，字体背景子元素都会随之变换

       1、平移：translate()

        2、旋转：rotate() 

        3、缩放：scale()

        4、旋转：skew()

        5、3D平移：translate3d()

        6、3D旋转：rotate3d() 

        7、3D缩放：scale3d()

四、动态效果

       1、过渡：transition: width 2s;

                         参数为过渡项和过渡时间，即元素的过渡项的值发生变化时，用给定的过渡时间，从原值过渡到新值。

                         CSS伪类控制的样式值变化：div:hover{  width:300px;  }，此时出现的过渡动画常用于菜单

                         JS脚本控制的样式值变化：只要改变元素的样式值，即可得到平滑的动态效果，无需处理变化的过程。

       2、动画

见：动画 与 过渡_真真-真真的博客-CSDN博客

五、界面交互

       1、多列布局（column）     

       2、可伸缩（resize）
 

CSS伪元素选择器
1、文本伪元素
first-line 伪元素用于向文本的首行设置特殊样式；
first-letter 伪元素用于向文本的首字母设置特殊样式。
2、插入伪元素
before 伪元素可以在元素的内容前面插入新内容，同时设定其样式；
after 伪元素可以在元素的内容之后插入新内容，同时设定其样式。
插入图片：
h1:before
{
content:url(logo.gif);
}
插入文字：
h1:after 
{
content:‘logo’;
color:"red"
}

CSS伪类选择器
1、锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移到的链接*/
a:active {color: #0000FF} /* 点中的链接 */
2、first-child 伪类
选择第一个子元素
3、CSS3新增了许多类似于first-child 的伪类

内核前缀
-o- opera浏览器
-ms- IE浏览器
-moz- Firefox浏览器
-webkit- Chrome和Safari浏览器

布局

 固定布局(Fixed Layout) 采用px作为block的单位。
流动布局(Fluid Layout) 采用%百分比作为block的单位，指定min-width和max-width。
弹性布局(Elastic Layout) 采用em作为block的单位。
响应式布局(Responsive Layout) 其实和前三者没有必然关系，主要是通过mediaqueries兼容不同的屏幕大小。

伸缩布局 css3 flex 

一、两列居中自适应

<style>
body{ margin:0; padding:0; }
.main{ width:80%;margin:0 auto; height:600px;}  //主体左右居中
.left{ width:20%; float:left;height:600px;background:#ccc;}//左浮定宽
.right{ width:80%;float:right; height:600px; background:#FCC; }//右浮定宽
</style>
<body>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>

二、三列自适应

<style>
body{ margin:0; padding:0;}
.left{ position:absolute; left:0; top:0;width:20%;height:600px; background:#ccc; }  //绝对左定宽
.right{position:absolute; top:0; right:0;width:20%;height:600px; background:#FCC;}//绝对右定宽

.main{margin:0 20%;height:600px; background:#9CF}//左右定边距
</style>
<body>
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</body>

三、左侧固定导航

<div style="margin:0 auto">
<div style="position:fixed;width:200px"></div>
<!--不设置偏移，使得它在主体的左侧-->
<div style="margin-left:200px">
</div>

FFC（Flex Formatting context）

flex容器（flex container）

用于一维布局

{

    display: flex\inline-flex

    flex-direction: row(默认值)，row-reverse, column, column-reverse // 主轴(main axis)方向

    flex-wrap: nowrap(默认值)，wrap(向下盘绕)，wrap-reverse(向上盘绕) // 盘绕方式

    flex-flow: flex-direction flex-wrap // 合写形式

    justify-content: // 一根主轴上项目的分布方式

        flex-start(默认值，向主轴起点main start靠拢)

        flex-end(向主轴终点main end靠拢)

        center(向主轴中点靠拢)

        space-between(两侧贴边，平均分隔)

        space-around(项目间两等份间距，项目与边框一等份间距)

    align-items:  // 一根主轴上项目的对齐方式

        flex-start(在交叉轴起点cross start上对齐)

        flex-end(在交叉轴终点cross end上对齐)

        center(居中对齐)

        stretch(默认值，伸展未设置高度的项目)

        baseline(以项目的第一行行框的baseline对齐)

    align-content:  // 多根主轴在容器里的分布方式

         flex-start(向交叉轴起点靠拢)

         flex-end(向交叉轴终点靠拢)

         center(向交叉轴中点靠拢)

         stetch(默认值，多根主轴平均铺满容器)

          space-between(两侧贴边，平均分隔)

          space-around(主轴间两等份间距，主轴与边框一等份间距)

}

flex项目(flex item)

    失效属性：float\clear\vertical-align

{

    order: 数字  // 排列序号，默认0

    flex-grow: 数字 // 放大比例，默认0

    flex-shrink: 数字 // 缩小比例，默认1

    flex-basis: 尺寸 // 项目在主轴方向上的尺寸，默认auto

    flex: flex-grow flex-shrink flex-basis // 合写形式

    align-self: align-items 有的值 // 用来覆盖容器设置的align-items

}

GFC(grid formatting context)

用于二维布局

网格容器(grid container)

{

    display: grid\inline-grid

    grid-column-gap: 尺寸 // 列网格线(column grid lines)宽度

    grid-row-gap: 尺寸 // 行网格线(row grid lines)高度

    grid-gap: grid-column-gap 和 grid-row-gap 合写

    # grid-template-columns: 100px 30% auto 1fr; // 每一列的宽度，1fr表示剩余空间的1等份

    # grid-template-columns: repeat(auto-fit, 380px); // 每列380px，列数自动
    
    # grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); // 每列宽300px到1fr[即整行]之间，列数自动（尽可能多列），网格拉伸填满整行
    
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); // 每列宽300px到1fr[即整行]之间，列数自动（尽可能多列），每行当作有足够多网格来排列，存在的网格只会适当拉伸
   
    grid-template-rows: 100px 100px; // 每一行的高度

    justify-items: start\end\center\stretch // item在网格单元(grid cell)中横向分布方式

    align-items: start\end\center\stretch // item在网格单元中纵向对齐方式

    justify-content: start\end\center\stretch\space-around\space-between\space-evenly // 列在容器中的分布方式

    align-content: start\end\center\stretch\space-around\space-between\space-evenly // 行在容器中的分布方式

    /* 合并网格单元方法一 */

    grid-template-areas: "area1 area1 area2" "area1 . area2" // 设置每一个网格单元分别属于哪个网格区域(grid area)，点表示不属于任何区域

    grid-template: grid-template-columns、grid-template-rows、grid-template-areas 的合写

}

网格项目(grid item)

{

    grid-area: area1 // 网格区域名称

    /* 合并网格单元方法二 */

    grid-column-start: 1 // 起始列网格线序号

    grid-column-end: 2 // 结尾列网格线序号

    grid-row-start: 1  // 起始行网格线序号

    grid-row-end: 2  // 结尾行网格线序号 

    grid-column: grid-column-start 和 grid-column-end的合写

    grid-row: grid-row-start 和 grid-row-end的合写

    justify-self: 用于覆盖justify-items

    align-self: 用于覆盖 align-items

}

多列布局

multi-column

{

    column-width: 列宽

    column-count: 列数

    column-gap: 列距

    column-rule: 列边框

    columns: clumn-width 和 column-count的合写

    .item{
        break-inside: avoid;  // 避免项目内截断
    }

}

多列布局，元素的排列顺序是 先在第一列从上往下排，再在第二列从上往下排...，最终能使多列差不多高

CSS变量

CSS

:root{ // css变量的作用域，这里是根元素

    --font-size: 20px; // --开头的属性就是CSS变量

}

div{

    font-size: var(--font-size, 24px)  // 使用CSS变量，--font-size无效时使用默认值24px 

    --color: blue;

}

div.test{

    color: var(--color) // --color的作用域包括div和div之下的元素

}

HTML

style里也可以定义CSS变量

JS

element.style.setProperty("--bg", "black") // 设置 CSS变量