html与CSS基础 | 青训营笔记

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

一、本堂课重点内容：

介绍了html的一些常用标签
介绍了几种选择器及其优先级
介绍了几种布局方式（弹性布局**）

二、详细知识点介绍：

HTML语法

1.属性值推荐用双银引号

2.某些属性值可以省略 eg required readonly

列表

<ol><li></li></ol>
<ul><li></li></ul>
<dl><dt></dt></dl>

input标签

//显示成滑块
<input type="range">

//输入数字
<input type="number" min="1" max="10">

<input type="data">

<textarea>hhhhh</textarea>

<p>
//复选框
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

  //单选框
  <p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

a标签

<a href="www.com">
<a href="www.com" target="_blank">

<img src=" " alt="Metal ssss" width="400">

//音频
<audio src="" controls></audio>
//视频
<video src=""controls></video>

<blockquote cite="https">

</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

//<em> 加强
<p>Tom is <em>gay</em></p>

第二部分 CSS

选择器：

id选择器
类选择器
属性选择器(优先级从高到低依次递减)

<a href="http://example.com">example.com</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

//访问后的颜色
a:visited {
  color: gray;
}

//鼠标悬停显示颜色
a:hover {
  color: orange;
}

//点击时的颜色
a:active {
  color: red;
}
//
:focus 链接和输入框按下后显示橙色的边框
:focus {
  outline: 2px solid orange;
}
</style>

组合

选择器组

[type="checkbox"]

显示继承：

*{
    box-sizing:inherit;}
html{
    box-sizing:border-box}
.a{
    box-sizing:content-box
}

CSS初始值

CSS求值过程

计算值：浏览器拿到值之后一般单纯的可以在resolving计算的值了但有些eg div设置width=100%这种需要实际布局时才能计算的话要放在formatting中

布局layout

常规流
- 行级
- 块级
- 表格布局
- Flex
- Grid布局
浮动
绝对定位

width 百分数相当于所在盒子content box的宽度 height 容器有指定的高度时百分数才生效

PS： margin collapse

以下两个div只有100px相隔

<style>
.a{
height:100px;
margin-bottom:100px
}
.b{
height:100px;
margin-top:100px

}
</style>

块级 vs 行级

块级	行级
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开成多行
适合所有的盒模型属性	盒模型中的width,height不适应

inline-block 本身是行级不能被拆散成多行

IFC 只包含行级盒子的容易会生成一个容器IFC IFC 内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素*

BFC

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow 值不是 visible 的块盒
display: flow-roo

display :overflow-hidden

不允许块行同级 so创建两个匿名的块级元素

flex布局

flex布局能够控制子元素的布局 flex布局能使div大小根据其内容大小来定 flex默认流向从左到右可以通过flex-direction改变

主轴侧轴

主轴：justify-content

侧轴： align-items(默认stretch)

flexibility弹性

.{
flex-grow:2;//原宽度×2
flex-shrink : //压缩
flex:100px = flex-basis:100px 就是宽度100
flex:2 1 //grow 2 shrink 1

}

grid布局

flex是单一方向的布局形式（水平） grid是二维的（水平竖直）如图：

grid布局是根据图中 1 2 3 4 的位置来进行区域划分的

三、课后个人总结：

html是做内容的而不是样式的，css传递的是样式

display:inline-block是行级布局整体是行但行的内部可以换行的不要搞错

flex弹性布局是很常用的布局方式，还要多了解其不同的布局方式

html与CSS基础|青训营笔记