一.HTML篇

1.常用标签

<!-- h1-h6 为标题标签，突出文字大小-->
   <h1>这是一级标题</h1>
   <h2>这是二级标题</h2>
   
<!--p 为段落标签，区分段落层次-->
	<p>这是第一段</p>
	<p>这是第二段</p>
	
<!-- a 为链接标签，可以点开路径-->
	<a href="https://www.baidu.com">百度</a>

<!--b或strong 为文本加粗标签，可以加粗文本-->
	<b>仅仅是样式加粗</b>
	<strong>不仅样式加粗，而且带有强调作用，比如文本会朗读两遍强调</strong>

<!--1.5 div 和span可以进行分组-->
	<div>这是第一组数据</div>
	<div>这是第二组数据</div>
	<span>这是的第三组数据</span>
	<span>这是第四组数据</span>
	
<!-- 1.6 常见的语义标签（无实际意义，仅仅是定义语义的标签，方便查看文档的组成）-->
	<header>我是页眉</header>
	<footer>我是页脚</footer>
	<main>我是文档的主要内容</main>
	<article>我是文档中的文章</article>
	<nav>我是导航区域</nav>
	<section>我是文档的一节内容</section>
	<aside>我是文档内容以外的内容</aside>
	
<!--1.7 img 图像标签-->
	<img src="https://article_icon.c91fb7e0.svg" alt="图片丢失了。">
	<!--viedo 视频标签-->
	<video src=""></video>

二.CSS篇

css详解

1 基础

1.1 颜色书写方式

1.2 单位

1.3 文本属性

1.4 边框

1.5 背景

1.6 阴影

1.7 轮廓

1.8 透明度

opacity：透明度

1.9 光标形状

cursor：光标形状

1.10 元素样式

表格样式

列表样式

元素样式

1.11盒子模型

1.12 选择器

1.13 动画

1.14 页面布局

1. flex布局，又称弹性盒子布局，任何元素都可以进行flex布局，只需要在父元素身上写display:fex即可，父元素称为容器，里面的元素称为item

• 添加在容器上的属性

*添加在item上的属性

2.技巧

文本在块元素中居中方法

在块级元素的style中写上
text-decoration:"center",inline-height:"块元素的高度

将不同的块级元素间隔一定间距

设定块元素的margin外边框即可

两个块级盒子竖直排列时magin合并问题

使用margin控制垂直间距时，会取两个块元素的最大值，此种外边距合并问题只会出现在垂直排列时。所以设置margin间距参数时，设置一个就可以了 。

一个大块级元素包裹一个小块级元素时，想让小块元素向下移动些，采用设置小元素margin时，会出现大元素和小元素同时向下移动，而小元素相对大元素位置没有变化的情况，此种情况称之为称为嵌套块元素坍塌

1. 给父元素定义上透明边框，比如border:1px solid transparent
2. 给父元素定义上内边距，比如padding-left:1px
3. 给父元素添加overflow:hidden

每种html元素都会自带内外边距，所以写代码前，可以先清除这些元素的内外边距

*{margin:0;padding:0}

元素内外边距书写规范

1.为了保证兼容性，书写行内元素边距时，尽量只书写左右内外边距；
2.书写块元素边距时，上下都没影响

调整图片img大小

可以给img一个块元素包裹，然后设置块元素大小，将img转化为块元素，宽度或者高度设置相对父元素100%即可

 .box{
        width: 100px;
        height: 100px;
    }
    img{
        display: block;
        width: 100%;
    }

3.scss语法

3.1基础语法

3.2 demo示例