前端三件套学习笔记（持更）

1、HTML,CSS,JS区别

2、HTML结构

1、HTML,CSS,JS区别

结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript文件中。

2、HTML结构

<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        很高兴，开始了我的web前端之旅！
    </body>
</html>

3、<div>和<span>

<div> 标签用来布局，但是现在一行只能放一个<div>。大盒子
<span> 标签用来布局，一行上可以多个 <span>。小盒子

4、相对路径

5、符号

6、表格

th（table header cell）：标头单元格
tr（table row）：一行
td（table data cell）：一个单元格

7、表格合并

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

8、标签

9、表单域

<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>

10、<input type="属性值">

11、选择器

1）基础选择器

id 选择器和类选择器最大的不同在于使用次数上。id 选择器是唯一的。

2）复合选择器

包括：后代选择器、子选择器、并集选择器、伪类选择器

//后代选择器
ol li a {
      color: red;
   }

//亲儿子选择器
 div>a {
       color: red;
   }

//并集选择器
div,
   p,
   .pig li {
       color: pink;
   }

//伪类选择器
        /* 1. a:link  默认，未访问过，把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }
        
        /* 2. a:visited 已访问过，选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }
        
        /* 3. a:hover 悬停，选择鼠标经过的那个链接 */
        a:hover {
            color: pink;
        }
        
        /* 4. a:active 点击，选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }

        /* 5. ：focus 选取获得焦点的表单元素
        input:focus {
            background-color: red;
            color: blue;
        }

12、字体复合属性

font: font-style font-weight font-size/line-height font-family;

13、em

是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

14、CSS引入方式/样式表

行内，内部，外部

15、元素显示模式

块元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

行内块元素：<img />,<input />,<td>

转换

转换为块元素： display: block;
转换为行内元素：display: inline;
转换为行内块元素：display: inline-block;

16、单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码

解决方案: 让文字的行高=盒子的高度

17、背景复合写法

background: pink url(logo.png) no-repeat center left;

18、CSS三大特性

1、层叠性：相同的选择器设置相同的样式，此时一个样式会被覆盖(层叠)掉另一个冲突的样式，层叠性主要解决的是冲突的问题。

2、继承性：子标签会继承父标签的某些样式，比如说文本的颜色和字号。高度、宽度、盒子模型的内外边距是【不可以】被继承的

行高的继承：

行高可以跟单位，也可以不跟单位
如果子元素没有设置行高，就会继承父亲元素的行高的1.5倍
此时子元素的行高是：当前子元素的文字大小的1.5倍

3、优先级

19、选择器优先级/权重

权重不会有进位
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 继承或者通配符选择器
继承的权重为0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0

20、CSS盒子

包括：边框、外边距、内边距和实际内容

21、内边距

padding 影响盒子实际大小，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子；

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

22、外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟元素)相遇时，如果上面的元素有下外边距 margin-bottom , 下面的元素有上外边距 margin-top , 则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是：【取两个值中的较大者】

解决方案：尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：

为父元素定义 上边框
为父元素定义 上内边距
为父元素添加 overflow: hidden
其他方法：浮动，固定定位，绝对定位

以上都是标准流，下面是浮动

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

23、浮动

1）含义：float 属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动块的边缘

2）作用：

实现多个块级元素没有空白缝隙的一行展示
实现两个盒子左右对齐

3）加了浮动之后的元素，会具有很多特性：

浮动元素会脱离标准流（脱标，漂浮在普通流的上面，不占原有的位置）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
浮动的盒子【不再保留原先的位置】

4）如果行内元素有了浮动，则不需要转换块级/行内块元素，可直接给高度和宽度

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5）网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

6）为什么需要清除浮动？
父级盒子很多情况下，不方便给高度，但是内部的子盒子浮动之后又不占据位置（脱标），最后父级盒子的高度就是0，那么就会影响下面的标准流盒子

如果父元素本身有设置高度，则不需要清除浮动
没有高度，内容需要浮动，则需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准文档流了
清除浮动不是清楚浮动本身，而是清楚浮动对其他元素的影响

清除浮动的策略是：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。）

24、定位

标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子-空）

1）相对定位
position: relative;

特点
   1. 它是相对于自己原来的位置来移动的。(移动位置的时候参照点是原来自己的位置，和父元素、浏览器无关)
   2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
   3. 相对定位，并没有脱离标准文档流，最典型的应用是给绝对定位当爹的

2）绝对定位

元素在移动位置的时候，是相对于它祖先元素来说的。
position: absolute;

特点
   1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位。(Document文档)
   2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
   3. 绝对定位不再占有原有的位置。（脱标）

3）子绝父相

因为父级需要占据位置，因此是相对定位（不脱标），子盒子不需要占据位置，则是绝对定位（完全脱标——不会占据原有位置）