这是我参与「第四届青训营」笔记创作活动的第1天

什么是CSS？

用来定义页面元素的样式

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

最简单的css样式：

h1{
color:while;
font-size:14px;
}

在页面中使用css

有三种方式：

外链

<!--外链-->
<link rel="stylesheet" href="/assets/style.css">

嵌入

<!--嵌入-->
<style>
li{
margin:0;
list-style:none;
}
P{
margin:len 0;
}
</style>

内联

<p style="margin:len 0"Example Content>

深入CSS

1.选择器的特异度（Specificity）

id
伪类
标签

继承

某些属性会自动继承其父元素的计算值，除非显式指定的一个值

显式继承
*{
    box-sizing : inherit;
}
html{
    box-sizing : boreder-box;
}
.some-widget{
    box-sizing : content-box;
}

初始值

1、css中，每个属性都有一个初始值

background-color的初始值为transparent
margin-left的初始值为0 2、可以使用initial关键字显式重置为初始值
background-color：initial

CSS求值过程

布局（Layout）是什么？

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

布局相关技术

常规流【行级、块级、表格布局、FlexBox、Grid布局】
浮动
绝对定位

各种属性

width

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

height

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

padding

指定元素四个方向的内边距
百分数相当于容器宽度

border

指定容器边框样式、粗细和颜色

margin

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

块级VS行级

1、块级——不和其他盒子并列摆放，适用于所有的盒模型属性 2、行级——和其他行级盒子一起放再一行或拆开成多行，盒模型重的width、height不适用

常规流Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内
常规流中的盒子，再某种排版上下文中参与布局

理解CSS|青训营笔记