-
HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么，结构。
-
CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子，样式。
-
文件名：名称.扩展名(后缀名)。
-
扩展名：决定了文件被什么应用程序打开。
-
元素展示到页面中的效果，应该由CSS决定。所有元素与展示效果无关。
-
语义化的作用：为了搜索引擎优化（SEO）。为了让浏览器理解网页，阅读模式、语音模式。
-
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格。（特例，在pre元素中的内容不会出现空白折叠，它有一个默认的css属性。）
-
实体字符：
< > © & -
绝对路径：当跳转目标和当前页面的协议相同时，可以省略协议（例如：href=“//www.baidu.com”）。
-
相对路径 ：以
./开头，./表示当前资源所在的目录，可以书写../表示返回上一级目录，相对路径中./可以省略。 -
布尔属性，在HTML5中，可以不用书写属性值。
-
video标签的兼容性写法(部分浏览器，只有静音情况下可以自动播放)。
<video controls autoplay muted loop style="width:500px;"> <source src="media/open.mp4"> <source src="media/open.webm"> <p> 对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器 </p> </video> -
语义化容器元素
header: 通常用于表示页头，也可以用于表示文章的头部 footer: 通常用于表示页脚，也可以用于表示文章的尾部 article: 通常用于表示整篇文章 section: 通常用于表示文章的章节 aside: 通常用于表示侧边栏 nav: 通常用于表示导航 -
元素包含关系
版本一 1. 容器元素中可以包含任何元素 2. a元素中几乎可以包含任何元素 3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd） 4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素 版本二 块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外 -
外部样式表的优势：外部样式可以解决多页面样式重复的问题，便于复用。有利于浏览器缓存，从而提高页面响应速度。利于代码分离（HTML和CSS），更容易阅读和维护。
-
em：相对单位，相对于父元素的字体大小。rem：相对单位，相对于根元素的字体大小。
-
伪类选择器，选中某些元素的某种状态。
1）link: 超链接未访问时的状态 2）visited: 超链接访问过后的状态 3）hover: 鼠标悬停状态 4）active：激活状态，鼠标按下状态 爱恨法则：love hate -
声明冲突：同一个样式，多次应用到同一个元素。
-
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）。
一、比较重要性（重要性从高到底） 1.作者样式表中的!important样式 2.作者样式表中的普通样式 3.浏览器默认样式表中的样式 二、比较特殊性 总体规则：选择器选中的范围越窄，越特殊 具体规则：通过选择器，计算出一个4位数（x x x x） 1. 千位：如果是内联样式，记1，否则记0 2. 百位：等于选择器中所有id选择器的数量 3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量 4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量 三、比较源次序 代码书写靠后的胜出 -
继承：子元素会继承父元素的某些CSS属性。通常，跟
文字内容相关的属性都能被继承。 -
渲染某个元素的前提条件：该元素的所有CSS属性必须有值。
-
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。
-
特殊的两个CSS取值。
inherit：手动（强制）继承，将父元素的值取出应用到该元素 initial：初始值，将该属性设置为默认值 例：background: initial; -
属性值计算过程:
一、确定声明值 参考样式表（作者样式表、浏览器默认样式表）中没有冲突的声明，作为CSS属性值 二、层叠冲突 对样式表有冲突的声明使用层叠规则（比较重要性、比较特殊性、比较源次序），确定CSS属性值 三、使用继承 对仍然没有值的属性，若可以继承，则继承父元素的值 四、使用默认值 对仍然没有值的属性，使用默认值 -
浏览器默认样式表和css属性默认值不是一回事。 -
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
1. 行盒，display等于inline的元素，行盒在页面中不换行。 2. 块盒，display等于block的元素，块盒独占一行。 -
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
-
浏览器默认样式表设置的行盒：span、a、img、video、audio
-
盒子的组成部分，无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
1.内容 content width、height，设置的是盒子内容的宽高 内容部分通常叫做整个盒子的内容盒(content-box) 2.填充(内边距) padding 盒子边框到盒子内容的距离 padding-left、padding-right、padding-top、padding-bottom padding: 简写属性 padding: 上 右 下 左 填充区 + 内容区 = 填充盒(padding-box) 3.边框 border 边框 = 边框样式 + 边框宽度 + 边框颜色 边框样式：border-style 边框宽度：border-width 边框颜色：border-color 边框 + 填充区 + 内容区 = 边框盒(border-box) 4.外边距 margin 边框到其他盒子的距离 margin-top、margin-left、margin-right、margin-bottom 速写属性margin -
box-sizing: border-box;
-
行盒的盒模型显著特点
1.盒子沿着内容沿伸 2.行盒不能设置宽高 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。 3.内边距（填充区） 水平方向有效，垂直方向不会实际占据空间。 4.边框 水平方向有效，垂直方向不会实际占据空间。 5.外边距 水平方向有效，垂直方向不会实际占据空间。 6.display：inline; -
行块盒的盒模型显著特点
1.不独占一行 2.盒模型中所有尺寸都有效 3.display：inline-block; -
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间。
-
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素 少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素(例，img、video、audio)。绝大部分为行盒。类似于行块盒，盒模型中所有尺寸都有效。CSS不能完全控制其中的样式。 -
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。绝大部分情况下，盒子的包含块，为其父元素的内容盒。
-
块盒常规流布局
1.每个块盒的总宽度，必须刚好等于包含块的宽度 宽度的默认值是auto margin的取值也可以是auto，默认值0 auto：将剩余空间吸收掉 width吸收能力强于margin 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收 在常规流中，块盒在其包含快中居中，可以定宽、然后左右margin设置为auto 2.每个块盒垂直方向上的auto值 height:auto;适应内容的高度 margin:auto， 表示0 3.百分比取值 padding、宽、margin可以取值为百分比,以上的所有百分比相对于包含块的宽度 包含块的高度取决于子元素的高度，设置百分比无效 包含块的高度不取决于子元素的高度，百分比相对于父元素高度 4.上下外边距的合并 两个常规流块盒，上下外边距相邻，会进行合并,两个外边距取最大值 5.父子盒子嵌套，上外边距也会出现合并 -
浮动的应用场景：文字环绕、横向排列
-
浮动的基本特点
float属性值 left：左浮动，元素靠上靠左 right：右浮动，元素靠上靠右 默认值为none 当一个元素浮动后，元素必定为块盒(更改display属性为block) 浮动元素的包含块，和常规流一样，为父元素的内容盒 盒子尺寸 1.宽度为auto时，适应内容宽度 2.高度为auto时，与常规流一致，适应内容的高度 3.margin为auto，为0. 4.边框、内边距、百分比设置与常规流一样 盒子排列 1.左浮动的盒子靠上靠左排列 2.右浮动的盒子考上靠右排列 3.浮动盒子在包含块中排列时，会避开常规流块盒 4.常规流块盒在排列时，无视浮动盒子 5.行盒在排列时，会避开浮动盒子 6.外边距合并不会发生 高度坍塌 高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子 清除浮动，涉及css属性：clear clear样式 默认值：none left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方 right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方 both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方 -
盒模型主要是CSS中的一个重要概念。
-
行盒块盒主要是CSS的概念
-
position属性
默认值：static，静态定位（不定位） relative：相对定位 absolute：绝对定位 fixed：固定定位 -
一个元素，只要position的取值不是static，则认为该元素是一个定位元素。定位元素会脱离文档流（相对定位除外）。
-
文档流中的元素摆放时，会忽略脱离了文档流的元素。文档流中元素计算自动高度时，会忽略脱离了文档流的元素。
-
相对定位，不会导致元素脱离文档流，盒子的偏移不会对其他盒子造成任何影响。
-
绝对定位，宽高为auto，适应内容。包含块变化，找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页。
-
固定定位，其他情况和绝对定位完全一样。包含块不同，固定为视口（浏览器的可视窗口）。
-
定位下的居中
某个方向居中（绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间）： 1. 定宽（高） 2. 将左右（上下）距离设置为0 3. 将左右（上下）margin设置为auto -
定位知识补充
绝对定位、固定定位元素一定是块盒 绝对定位、固定定位元素一定不是浮动 没有外边距合并 -
盒子隐藏
1. display:none，不生成盒子 2. visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。 -
当图片属于网页内容时，必须使用img元素，当图片仅用于美化页面时，必须使用背景图。
-
自定义单选框组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .radio-item .radio { width: 12px; height: 12px; border: 1px solid #999; border-radius: 50%; cursor: pointer; display: inline-block; } .radio-item input:checked+.radio{ border-color: #008c8c; } .radio-item input:checked~span{ color:#008c8c; } .radio-item input:checked+.radio::after { content: ""; display: block; width: 5px; height: 5px; background: #008c8c; margin-left: 3.5px; margin-top: 3.5px; border-radius: 50%; } .radio-item input[type="radio"]{ display: none; } </style> </head> <body> <p> 请选择性别： <label class="radio-item"> <input name="gender" type="radio"> <span class="radio"></span> <span>男</span> </label> <label class="radio-item"> <input name="gender" type="radio"> <span class="radio"></span> <span>女</span> </label> </p> </body> </html> -
@规则
@import "路径"; 导入另外一个css文件 -
常规流块盒的布局的特点
常规流块盒在水平方向上，必须撑满包含块 常规流块盒在包含块的垂直方向上依次摆放 常规流块盒若外边距无缝相邻，则进行外边距合并 常规流块盒的自动高度和摆放位置，无视浮动元素 -
块级格式化上下文(BFC),它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
不同的BFC区域，它们进行渲染时互不干扰 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部 创建BFC的元素，它的自动高度需要计算浮动元素 创建BFC的元素，它的 边框盒 不会与浮动元素重叠 创建BFC的元素，不会和它的子元素进行外边距合并 -
创建BFC的方法
float的值不为none（但请注意，这会使元素脱离文档流）。 position的值为absolute或fixed。 display的值为table-cell、table-caption、inline-block、flex或inline-flex。 overflow的值不为visible（如auto、scroll、hidden等）。 -
BFC的应用场景
阻止外边距重叠 清除浮动 阻止文字环绕图片 -
浮动盒子的布局
左浮动的盒子向上向左排列 右浮动的盒子向上向右排列 浮动盒子的顶边不得高于上一个盒子的顶边 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动 -
em和rem分别相对于父元素和根元素的字体大小。 -
vh和vw分别相对于视口的高度和宽度。 -
em是相对长度单位，这个单位表示元素的
font-size的计算值。如果用在font-size属性本身，它则表示元素继承的font-size值。 -
rem是相对长度单位，这个单位代表
根元素（通常为html元素）的font-size大小。当用在根元素的font-size上面时，它代表了它的初始值。 -
line-height : 像素值 | 无单位的数字 | em单位 | 百分比 ;
-
当发生继承时，line-height有以下特点。
(1) em单位 | 百分比 先计算像素值，再继承 先根据"当前元素的字体大小"和"em单位|百分比"，计算出具体的像素值，再将像素值继承给子元素。 (2) 无单位的数字(推荐) 先继承，再计算 先将"无单位的数字"继承给子元素，再根据"无单位的数字"和"当前元素的字体大小"计算出具体的像素值。 -
当发生继承时，line-height有以下例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { line-height: 2em; /* line-height: 2; */ } .p1 { font-size: 40px; } .p2 { font-size: 20px; } </style> </head> <body> <div class="container"> <p class="p1"> 段落一 </p> <p class="p2"> 段落二 </p> </div> </body> </html> -
CSS属性的
初始值是其默认值，可以使用initial关键词明确指定初始值。 -
body
11-18
1210
1210
12-28
1271
1271
07-03
415
415
09-06
677
677
11-07
160
160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
