前端的基础知识笔记(一)HTML入门 css入门（未完待续...）

盒模型
margin外边距（跟其他盒子的距离）
border边框（）
padding内边距
content内容
不同元素产生的盒子可能不同
一个元素产生什么样的盒子取决于他的css 的dispaly属性
border-方向-width 设置某一个边框的像素
border-方向-style 设置某个方向的边框样式 solid实线 dashed虚线 dotted点线 double双实线
border:大小 样式 颜色
transparent透明色
三角形
border：10px solid transparent;
border-left-color:red
padding内边距
1个值上右下左都是一样
2个值上下 左右
3个值 上 左右 下
4个值 上 右 下 左
margin外边距
1个值上右下左都是一样
2个值上下 左右
3个值 上 左右 下
4个值 上 右 下 左
内容盒 content content-box
填充盒 padding和content padding-box
边框盒 三个相加 content+padding+border border-box
改变盒子的计算规则
box-sizing：border-box； 会缩小内容区域 总款高不改变 实际宽高=设置的宽高=padding+border+content （如果加padding有横向滚动条的解决方案）
box-sizing：content-box默认值 改变设置的款高 实际宽高=设置的宽高+padding+border+content
注：ie浏览器的默认值是border-box
视觉格式化模型
要求：元素必须放在他的包含块中
定位体系
1.常规流（normal flow）
2.浮动（float）
float的默认值是none
3.绝对定位（absolute positioned）
position的默认值是static
判定定位体系
先看position的属性值有没有absolute positioned有就是绝对定位；没有就看
在看float的值是不是left和right有就是浮动定位 两个都没有就是常规流定位

盒模型中的尺寸
margin：px、em、%、auto 可以是负值
border：pa、em
padding：px、em、%
width：px、em、%、auto
height：px、em、%、auto %很少用
em：当前元素字体大小的倍数
%：包含块（父元素的值）的百分率
auto：自动按照不同的定位体系的规则计算
常规流（普通流 文档流 普通文档流）
常规流块盒水平居中
1.给块一个固定宽度
2.margin:0 auto
水平方向的尺寸必须等于包含块的宽度
垂直方向
margin为auto：opx
height为auto：取决于内容的高度

盒子位置
1.盒子在包含快递垂直方向上一次摆放
一次摆放按照HTML元素的书写顺序从上到下摆放
盒子在包含块中 占据的尺寸是整个盒子的尺寸

2.垂直方向上，若两个外边距相邻,则进行合并（折叠）
相邻：没有border padding content
垂直方向：水平方向上的外边距不会合并
两正取大 两负取小 正负相加
相邻边距的场景
1.兄弟集
a的下外边距和b的上外边距
2.父子集
情况1：父元素上外边距与第一个子元素的上外边距
情况2：父元素下外边距与最后一个子元素的下外边距
合并的解决办法
1.父元素加个border
2.父元素加padding去掉子元素的margin
浮动（float）
会脱离文档流 不占用原来的位置
原始目的文字环绕
margin：auto 取值是0
width：auto适应内容宽度
height：auto适应内容宽度
border-radius设置圆角边框
line-height行高（当行高等于高是 就可以设置文本的垂直居中）
常规流盒子和浮动盒子混合摆放
浮动盒子在摆放时，要避开常规流盒子
常规流盒子在摆放时，无视浮动盒子
常规流盒子的自动高度计算式 无视浮动盒子 高度塌陷
盒子的相对位置
position：relative；相对定位
position：static默认值
position：absolute绝对定位
position：fixed固定钉定位
在设置4个方向的便宜量（移动的像素值）
注 可以取负值 正值相反 负值相同
相对定位的元素包含块
position：fixed 包含块：视口（viewport）浏览器可视区域
在加上方向 ：取值
固定位置的宽度为auto，则为内容的宽度
设置flex后外边距与页面的第一个元素外边距折叠 就要设置个方向值。
固定定位的适用场景 广告 侧边栏 头部导航 返回顶部等
position：absoult绝对定位 子绝父相
堆叠级别（stack level）适用条件（position不等于static）
它5决定了元素谁显示在前谁显示在后
通常情况下堆叠级别越高，显示越靠前
通过z-index属性可设置元素的堆叠级别
建议取值是-3~3 默认值1
块级格式化上下文
overflow超出部分的显示方式 visible默认值超出正常显示
可以单独设置方向 overflow-x overflow-y
overflow：hidden影藏超出部分从padding开始影藏（可以解决外边距重叠，应为会创建BFC（格式化上下文）block format context）
overflow：auto水平方向超出有横向滚动条 垂直超出有纵向滚动条
overflow：scroll不管有没有超出 两个方向都会有滚动条
文本的断词规则：
默认情况：中文是标签符号或汉字，英文是标点符号或空格或单词
修改断词规则
word-break
取值break-all 中文是标签符号或空格 英文是标点符号或空格或字母
border可以省略颜色，
颜色是字体颜色 默认3px 应为至少要实现双实线的效果
块级格式化上下文（Block Formatting Context简称BFC）
是一块独立的渲染区域 ，规定了这个区域常规流块盒的布局
元素会在其内部创建BFC区域
根元素 HTML
浮动和绝对定位元素
overflow不等于visible的块盒
常规流计算高度时，考虑浮动元素
创建BFC元素，他的自动高度需要计算浮动元素（清除浮动）加在非浮动元素身上
创建BFC的元素，他的边框盒不会与浮动元素重叠 加在非浮动元素身上
创建BFC的元素，他不会和他子元素的外边距合并 加父元素身上
Flex弹性布局
容器 项目（和容器为父子集关系） 主轴（默认水平轴） 交叉轴
display设置为Flex，则当前标签为容器子元素为项目
功能：所有子元素一行显示
flex-direction 设置主轴方向 加在父元素
row 项目从左到有摆放（默认值）
row-reverse 主轴从右到左摆放
column项目从上到下依次摆放（交换主轴和交叉轴）
column-reverse交叉轴从右到左摆放
flex-wrap 设置是否换行
nowrap：不换行，即所有的项目显示在一行
warp 换行 （1.主轴是水平方向 项目宽度之和超出容器 2.主轴是垂直方向：高度之和超出容器高度）
warp-reverse 从右到左 从上到下排列 换行
flex-flow 主轴方向和换行的缩写
flex-flow：主轴方向（column/row) 是否换行（wrap/nowrap；
justify-content 主轴方向的对齐方式
flex-strat 起始点对齐 主轴是水平方向左对齐 主轴是垂直方向上对齐 默认值
flex-end 结束点对齐 主轴是水平右对齐 主轴是锤值下对齐
center 居中对齐
space-between 主轴水平方向：两端对齐 主轴垂直方向：垂直方向两端对齐
space-around 分散对齐 项目左右各一个值 每个值都相同 （值 项目 值*2 项目 值）
space-evenly 平均分配
align-items交叉轴对齐方式
flex-start 开始点对齐 交叉轴是垂直方向顶部对齐 水平方向左对齐
flex-end 结束点对齐 交叉轴是垂直方向底部对齐 水平方向有对齐
center 居中对齐
baseline 第一行文字的基线对齐 基线：英文本的第三条线
英文本上的 第一条topline 第二条middleline中线 第三条baseline基线 第四条bottomline底线
stretch：如果项目的高度是auto（不设置高也就是默认值auto） 将沾满整个容器 默认值
flex-content 多根轴线的对齐方式 （要和flex-wrap配合使用）
flex-start 多行顶部对齐
flex-end多行底部对齐
center多行垂直居中对齐
space-between垂直方向两端对齐
space-around 垂直分散对齐
space-evenly垂直平均分配
stretch 轴线占满整个交叉轴 项目没有高度的话高度撑满 默认值
在项目上设置的属性
order 进行项目的排序 作用：优化搜索引擎 重要的内容写在前面 页面展示需要放在其他位置的时候
默认值是0 取值越大越靠后 取值越小越靠前
flex-grow 项目的放大比例 剩余宽度分配
获取剩余空间 在按这个属性值分给有这个属性的项目
flex-shrink 项目的缩小
默认值是1 空间不足就会每个项目都平均缩小
空间不足时 属性0 就不缩小 想要哪个项目缩小的多一点就给大一点的数值
这个属性负值无效
flex-basis
基本不用 因为基本上都会给项目宽高
默认值auto
flex 是前三个的缩写
0 1 auto 默认值
auto（1 1 auto）
none（0 0 auto）

css重置文件 清除默认样式 先引入重置文件 在引入自己的css
word文档 中文=rand（段落个数） 英文 =lorem（段落个数）
flex-grow和flex的区别
flex-grow的计算尺寸是剩余空间的尺寸
flex的计算尺寸是剩余空间的尺寸+参与项目的尺寸
inline是行和的排列方式
block是块盒的尺寸
即多个 标签在一行显示
雪碧图
设置标的尺寸 雪碧图所引用图片的尺寸
background-imge 引入背景图片
书写格式：background-imge:url(“图片地址”)
3.设置图片的位置
图片标签

 <img src="图片地址" alt="图片替代文字附加信息" title="鼠标移入图片显示内容">

为了实现图片的等比例缩放 值设置高或者是宽 会自动按比例缩小或者放大
HTML新增（图片）
父元素：figure
子元素： img要展示的图片 figcaption图片说明