css布局|青训营

CSS的是什么

层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。

CSS的作用：

• 用来定义页面元素的样式
• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

CSS的语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {
    property: value;
}

• 选择器通常是需要改变样式的 HTML 元素。
• 每条声明由一个属性和一个值组成。
• 属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS的创建

当读到一个样式表时，浏览器会根据它来格式化HTML文档 插入样式有三种：

• 外部样式表(External style sheet)，简称外链
• 内部样式表(Internal style sheet)，简称嵌入
• 内联样式(Inline style)，简称内联

CSS选择器的特异度

CSS的继承

Css也存在一些继承
1.某些属性会自动继承其父元素的计算值，除非显示指定的一个值
2.显示继承

*{
    box-sizing: inherit;
}

html{
    box-sizing: border-box;
}

.some-widget{
    box-sizing: content-box;
}

CSS的初始值

1. CSS中，每个属性都有一个初始值

   1. Background-color 的初始值为 transparent
   2. Margin-left 的初始值为0

2. 可以使用initial关键字显式重置为初始值

   1. Background-color: initial

CSS的布局方式

Ⅰ.布局

1. 确定内容的大小和位置的算法
2. 依据元素、容器、兄弟节点和内容等信息来计算

Ⅱ.布局的相关技术

1.基础布局
1.布局图

2. width

1.  指定content box 宽度
2.  取值为长度、百分数、auto
3.  auto由浏览器根据其它属性确定
4.  百分数相对于容器的 content box 宽度

3.height

1.  指定 content box 高度
2.  取值为长度、百分数、auto
3.  auto取值由内容计算得来
4.  百分数相对于容器的 content box 高度
5.  容器有指定高度时，百分数才生效

4.margin

1.  指定元素四个方向的外边距
2.  取值可以是长度、百分数、auto
3.  百分数相对于容器宽度

使用margin:auto 水平居中

总结

本次课程主要介绍了CSS的一些基础概念，一些继承，和布局以及排版的相关知识，学会CSS不单学会CSS的属性的使用，更要学会它的更深处的知识。