CSS｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天 CSS基础知识笔记，选择器，盒模型，布局，

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

1.基础代码

h1{//给页面中所有的h1定义样式如下
    color:white;
    font-size:14px;
}

使用CSS 外链：css放在单独文件里面 👍
嵌入：嵌入到html标签里面
内联：写到标签属性style中

工作流程

3.选择器样式

*{//*表示通配选择器
    color:red;
}
//利用id设置样式
<h1 id="looo"><img src="xxx" />helllo world</h1>
#looo{
    ........
}
//给某一类设置样式
<ul>
    <li class="done">1</li>
    <li class="done">1</li>
    <li class="done">1</li>
</ul>
<style> 
.done{
        .......
}
li.done{....}/*只对列表的done生效，其他标签类别为done的不生效
</style>//包裹定义样式（以上例子都需要）

//属性选择器
<style> 
[disabled]{/*给所用具有禁用属性的标签定义样式*/
        .......
}
input[type="password"]{
        .......
}
a[href^="#"]{/*给href以#开头的定义样式*/
        .......
}
a[href$=".jpg"]{/*给href以.jpg结尾的定义样式*/
        .......
}
</style>

//伪类选择器
a:link {//对于超链接标签
    color: black;
}
a:visited {//访问过该链接
    color: gray;
}
a:hover {//鼠标移动到上面
    color : orange;
}
a:active {//鼠标按下去之后
    color: red;
}
:focus {//点击输入框或链接触发的状态
outline: 2px solid orange;
}
1i: first- -child {//给列表第一个元素定样式
    color: coral
}
li: last-child {
    border-bottom: none;
}

选择器组合

选择器组

body, hl, h2, h3, h4, h5, h6, ul, ol, 1i {
    margin: 0;
    padding: 0;
}
[type= " checkbox"]， [type= "radio"] {
    box- sizing: border -box ;
    padding: 0;
}

选择器优先级特异度：越特别，级别越高

4.具体样式定义

颜色
rgb(255,255,255)=#ffffff (十六进制)
hsl(0-300,0-100%,0-100%):色相、饱和度、亮度
添加透明度的话：rgba、hsla。a的取值是0-1，1表示不透明
字体

1)font-family可以一次指定多个字体，浏览器选择其中拥有的字体使用，最后可以加一个通用字体组(Sans-Serif Serif)
建议font-family中先定义英文字体、再定义中文字体

2)font-size:20px / 2em /80% ;(20个像素/2倍/ 80%)
font-style : italic(斜体)
font-weight : 500(字重，粗细？)

4)line-height 行高

5. 继承
1)一般文字可以找父级继承

2）显示继承

*{
    box- sizing : inhert;//开启继承
}

6.CSS求值过程
还要再看。。没懂😂
CodePen - 青训营/CSS/取值过程 (cdpn.io)

7.布局
常规流，浮动，绝对定位

常规流 padding内边距 margin外边距

padding可以统一设置一个或两个值，也可以设置四个值
边框border

当这个容器宽高设置为0时，只剩下边框，如果四个边颜色不一样时，如下图。可以用来设置三角形（将其他三部分设置为透明，只保留一部分）

margin

//自动时会达到水平居中的效果
margin-left : auto;
margin-right : auto;

🔷两个元素的边距不会叠加，而是取最大

替代盒模型

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

用上述样式，也就是使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。
而使用替代盒模型，使用上面相同的样式得到 (width = 350px, height = 150px)。

.box {
  box-sizing: border-box;
}
//如果让所有元素都使用替代模式
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

8.盒模型

一个被定义成块级的（block）盒子会表现出以下行为：

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

如果一个盒子对外显示为 inline，那么他的行为如下：

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为 flex 元素，会根据弹性盒子（Flexbox）规则进行布局。

<style>
div{
    display: flex;
}
.a, .b, .C {
    width: 100px;
}
.a {
    flex-grow: 2;//占剩余空间的2份
}
.b {
    flex-grow: 1;//占剩余空间的1份
}
</style>

Grid布局

9.position属性

static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流（类似于自身平移，不影响其他的）
absolute：绝对定位，相对非static祖先元素定位
fixed：相对于视口绝对定位（eg：滚动页面，导航栏不动）

CSS｜ 青训营笔记

CSS｜青训营笔记