学习笔记 ：
基于黑马前端视频学习的CSS3笔记
 黑马前端学习笔记
 查看某个前端技术是否兼容浏览器版本

HTML

VScode

1、Open In Default Browser =》 Alt+B
2、注释：Ctrl + /
3、查看 =》自动换行（Alt+Z）
4、往后缩进： shift+tab
5、快速复制粘贴： shift+alt+↓

常用标签

1、 <h1>~<h6> ，标题标签。
2、段落标签， <p> ，特点是段落之间存在间隙。独占一行。
3、换行标签： <br> ，水平线标签 <hr>
4、 文本格式化标签 ：
在这里插入图片描述
5、 图片标签 <img src==“图像URL” alt=”我是替换文本” title=”提示文本” />

【 注意点 】①title属性既可以用于图片标签，还可以用于其他标签。
②如果只设置width或height中的一个，另一个没设置的会自动等比例缩放。
【img标签有 行内块 元素的特点，但是在Chrome调试工具里面显示是inline】
6、 音频标签 ：
在这里插入图片描述

7、 视频标签 <video src=”” controls></audio> ，属性和音频标签一样。autoplay 自动播放（谷歌浏览器中需要配合muted实现静音播放）
8、 超链接标签 ： <a href=”” target=””></a>
取值：①_self 默认值，在当前窗口中跳转，覆盖原网页。
②_blank 在新窗口中跳转（保留原网页）。

绝对+相对路径

列表和表格

9、 列表标签 ：①无序列表 <ul></ul> ，ul标签中只允许包含li标签。
②有序列表： <ol></ol> ，ol标签中只允许包含li标签。
③ 自定义列表 ：
在这里插入图片描述【 显示特点 】 dd 前面会默认显示缩进效果（除去缩进需要用到css）。
dl 标签中只允许包含dt/dd标签。 dt/dd 标签中可以包含任意内容。
10、 表格标签 ：table（表格整体，可以包裹多个tr） > tr（表格每行，可以用于包裹td） > td（表格单元格，可以用于包裹内容）
【 表格的属性 】border、width、height（实际开发时针对于样式效果推荐用css）
【 表格标题和表头单元格标签 】
在这里插入图片描述
用法：

11、 表格的结构标签 ：

12、 合并单元格 ：①跨行合并（垂直合并）；②跨列合并（水平合并）

表单标签

input

在这里插入图片描述
【 占位符 】在网页中显示输入单行文本的表单空间。Type属性值：text；常用属性：placeholder <input type=”text” placeholder=”请输入用户名”>
【 控制placeholder的样式 】

【 单选功能默认选中 】
在这里插入图片描述
【 上传文件时选中多个文件 】 <input type=”file” multiple>

<input type=”submit” value=”免费注册”>

button

在这里插入图片描述
<button type=”reset”>重置</button>

下拉菜单

在这里插入图片描述

文本域

在这里插入图片描述

label标签

在这里插入图片描述

语义化标签

1、没有语义化的标签：<div独占一行，一行只显示一个。 <span 一行可以显示多个；
2、有语义化的标签：（以下标签在做手机端的时候用的比较多）
在这里插入图片描述

字符实体

在这里插入图片描述

网页与网站、SEO

网页与网站的关系

在这里插入图片描述

骨架结构标签

在这里插入图片描述

SEO三大标签

在这里插入图片描述

Ico图标设置

在这里插入图片描述
【 浏览器标题栏图标 ：直接放在根目录。写代码的时候直接快捷写法： link:favicon 】

版心

CSS

书写顺序

【 CSS书写 】1、定位，浮动，display；2、盒子模型：margin/border/padding/宽度高度背景色；3、文字属性。

基本选择器

【 CSS引入方式 】： <link rel=”stylesheet” href=””/>
1、 标签选择器 ：比如： p{color: red;}
2、 类选择器 ： .类名{css属性名：属性值;} ，①所有的标签上都有class属性，class属性的属性值称为类名。②类名可以重复，一个类选择器可以同时选中多个标签。③一个标签可以同时拥有多个类名，类名之间可以用空格隔开，比如 <p class=”red size”>222</p> 。
3、 id选择器 ： #id属性值{css属性名：属性值;} ，①一个标签上只能有一个id属性值；②一个id选择器只能选中一个标签。【id选择器一般都是配合js使用的】
4、 通配符选择器 ： *{css属性名：属性值;} ，找到页面中的所有标签，设置样式。（开发中用的极少。）

Font字体

1、 字体大小 ：font-size：数字+px。①谷歌浏览器默认文字大小是 16px ；
2、 字体粗细 ：font-weight：
在这里插入图片描述
3、 字体样式 （是否倾斜）：font-style；取值：①正常（默认值）：normal，②倾斜：italic。
4、 字体系列 ： font-family ：

5、【样式层叠的问题】

6、font复合属性：

文本样式和样式表

1、 文本缩进 ： text-indent ：①数字+px；②数字+em（推荐，1em=当前标签的font-size的大小）
在这里插入图片描述
2、 文本水平对齐方式 ： text-align ：取值①左对齐：left；②居中对齐：center；③right：右对齐。【注意】如果需要让文本水平居中，text-align属性给文本所在的标签（文本的父元素）设置。

3、 文本修饰线 ： text-decoration
在这里插入图片描述
4、行高： line-height ：取值①：数字+px，②倍数（当前标签font-size的倍数）

行高=上间距+文本高度+下间距 。行高的作用在于控制一行的上下行间距。
font复合属性的写法 ，比如：font：italic 700 12px/2 宋体；
5、 行高-垂直居中 ：【垂直居中的技巧】设置 行高属性值=自身高度属性值 。（前提是文字是单行的）
6、 颜色常见取值 ：
在这里插入图片描述
8、 标签水平居中 方法总结：

选择器进阶

后代选择器

(复合选择器)
在这里插入图片描述

子代选择器：>

(复合选择器)
在这里插入图片描述

并集选择器

在这里插入图片描述

交集选择器

在这里插入图片描述

伪类选择器

在这里插入图片描述

Emmet语法

简写语法，快速生成代码。
在这里插入图片描述
①div同级p标签：div+p回车
②ul有3个li，li里面的文字是1,2,3： ul>li{$}*3
③背景色：bgc = background-color
④创建类为left和right的div标签：.left+.right，然后按tab键。

背景

背景色

在这里插入图片描述

背景图

在这里插入图片描述

背景平铺

在这里插入图片描述

背景位置

在这里插入图片描述

背景属性连写

在这里插入图片描述

元素显示模式及转换

块级元素

在这里插入图片描述

行内元素

在这里插入图片描述

行内块元素

在这里插入图片描述

显示模式的转换

在这里插入图片描述

标签嵌套

在这里插入图片描述

CSS三大特性

继承性

在这里插入图片描述
【注意】如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式。
1、 a标签的color会继承失效 。
2、 h系列标签的font-size会继承失效 。

层叠性

在这里插入图片描述

优先级

在这里插入图片描述
【 叠加计算 】

Chrome调试工具

在这里插入图片描述
1.css中上一行代码出错会直接影响到下一行的代码。

PxCook

① 点击创建项目（Web）；
② 拖进来一张图片；
③ 双击打开，（如果是png的图）选择“设计”模式，[尺子：量尺寸；吸管：识别颜色]。【如果是psd格式的图，就选择“开发”模式】

盒子模型

基础

1、border：1px solid/dotted/dashed red；
2、padding：上右下左
【技巧】从外到内：从宽高到背景色，然后放内容，调节内容的位置，最后控制文字细节。

box-sizing自动内减

在这里插入图片描述
【一般放到*{}里面】

清除默认内外边距

在这里插入图片描述

去掉列表的符号

ul{list-style: none;}

版心居中

margin：0 auto;

外边距合并和塌陷

外边距合并

在这里插入图片描述

外边距塌陷

坑爹现象，想把子级元素往下挪，但是导致了父元素一起往下移动。
【外边距塌陷】父子标签，都是块级显示模式，子级加margin会影响父级的位置。
在这里插入图片描述
3.转换成行内块元素：在.son里面加上： display: inline-block;

行内元素的垂直内外边距

在这里插入图片描述

伪类和伪元素

结构伪类选择器

在这里插入图片描述

伪元素

在这里插入图片描述

浮动和清除浮动

网页中的div想要排在一行，一般都是用的“浮动”，而不是用的inline-block;

标准流

在这里插入图片描述

浮动

【 空白间隙 】如果两个div，宽高都有，想让它们两个在一行显示，用display：inline-block的话，会发现两个div中间有一个空白间隙，这是因为写代码时div标签换行了。
【 解决办法 】①所有的div都写在一行，但是可读性太差；②用浮动解决。
【浮动】在一行排列，宽高生效。浮动后的标签具备行内块的特点。float: left; float: right;
在这里插入图片描述

清除浮动

【注意】 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素 。父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置。
【原因】子元素浮动后脱离标准流，不占位置了。

直接设置父元素高度

在这里插入图片描述
【缺点】有些布局中不能固定父元素的高度，比如：新闻列表，京东推荐模块。

额外标签法

在这里插入图片描述

单伪元素清除法

和额外标签法的原理是一样的。
在这里插入图片描述

双伪元素清除法

在这里插入图片描述

给父元素设置overflow:hidden

【操作】直接给 父元素设置overflow:hiden ；优点是方便。也可以用来解决 外边距塌陷 问题。
在这里插入图片描述

学成在线项目

【创建文件夹】1、根目录：网站的第一级文件夹study；2、图片文件夹images；3、样式文件夹css；4、首页：index.html；
【网站的首页】所有网站的首页都叫index.html，因为服务器找首页都是找的index.html；
【布局】：从内到外，从上到下，从左到右。
【CSS】：浮动/display；盒子模型，文字样式。
【类名】1、版心：wrapper只负责版心效果；2、头部：header负责头部区域的样式；
【步骤】1、版心效果；

/* 版心 */
.wrapper {
    width: 1200px;
    margin: 0 auto;
}
<div class=”header wrapper”></div>

清除工作

2、清除工作：页面中大量的标签都有默认的样式需要清除；

* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
} 
li {list-style: none;}
a {text-decoration: none;}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }

3、header布局：查看images文件夹中logo的图片属性信息为42px；

/* 头部 */
.header {
    height: 42px;
    /* margin-top: 30px;
    margin-bottom: 30px; */
    margin: 30px auto;
}

4、 logo和nav布局；
【注意】如果一个区域是纯文字区域，可以不给宽，只给高就行。因为文字比较稳定，有多少个字，默认向后排列，靠文字的多少撑开排列。
5、 nav内容布局；为啥nav和h1都要浮动？
6、 Nav文字样式；
7、搜索-布局和文本框：
在这里插入图片描述
控制placeholder的样式：

按钮：

Input和button都是行内块元素，能在一行排，宽高都能生效。
这两个标签都是换行写的，所以样式生效后，不在一行排列（button被挤下来了）
【 行内块在换行写的时候会产生一个小的空白间距 】
解决的最好办法是： 给这两个标签加上浮动 。
发现加了浮动之后还是上不去，这时发现是尺寸出了问题。