个人前端笔记

CSS样式中的line-height属性

属性名：行高line-height

一、作用:    控制一行的上下行间距。
二、取值:    数字+px，如 { line-height：15px }；
                    倍数(当前标签font-size的倍数)，如 { line-height：1.5  }。
三、应用:
                    1.让单行文本 等行内或行内块元素 垂直居中,可以设置line-height:其父元素高度。
                    2.网页精准布局时，会设置line-height:1可以取消上下间距。
四、行高与font连写的注意点:
                     如果同时设置了行高和font连写，注意覆盖问题：
                     font:style weight size/line-height family。

---

HTML中的【行内、行内块、块元素】注意事项：

1.一行可显示多个元素

2.行内元素靠自身内容撑起高度和宽度

3.设置宽高无效

※想要设置宽高生效，则改为【块级元素】或【行内块元素】

※显示模式转换方式：

转块级元素：display：block；（常用）

转行内块元素：display：inline-block；（常用）

转行内元素：display：inline；（少用）

注意：使用::before、::after添加的伪元素具有行内元素特点。

---

使用::before、::after添加的伪元素

伪元素：使用css模拟出来的标签元素

1.具有行内元素特点

2.必须添加 content属性才生效，即便为空，如 content：‘’；

---

CSS3盒模型(自动内减-内减模式)

需求:

盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？给盒子

设置border或padding时，盒子会被撑大，如果不想盒子被撑大?

解决方法①:手动内减

操作:自己计算多余大小，手动在内容中减去·缺点:项目中计算量太大，很麻烦。

解决方法②:自动内减

操作:给盒子设置属性box-sizing:border-box;即可。（常常在公共CSS中有，只需要在所需盒子标签中调用该class属性即可使用。

优点:浏览器会自动计算多余大小，自动在内容中减去。

---

CSS清楚默认样式 *{magin:0;pading:0};

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续需要再自己设置。

css代码：*{magin:0;pading:0};

---

CSS版心居中 wapper{margin:0,auto;}

版心居中，一般用wapper作为类名，放在公共样式css中，方便给需要使用版心居中的标签调用。css代码：wapper{margin:0,auto;}

---

网页布局的方法：标准流、浮动、定位

1.标准流<浮动<定位

2.受浮动影响的情况及其解决方法

情况：如果上一个父盒子中有多个子元素浮动了，而且父盒子又没有高度，或者高度不够其中的多个子元素的高度，那么下面的父盒子（上下父盒子是兄弟关系）的布局会受到影响。

解决方法：清除浮动（五种方法）

方法①（加高法）：

                 给上面一个父盒子一个合适的高度height：n px。

             （缺点：有时候盒子不能加高，靠内容撑起高度）

方法② （额外标签法）：

               在上面一个父盒子里面内容的最后加一个块级元素，

               然后给添加的块级元素设置clear：both；来清楚左右两边的浮动影响

             （缺点：添加额外标签，HTML结构太乱）

方法③（ 单伪元素清除法）：

                 操作：用伪元素替代额外标签。在css添加下面代码（一般项目经理准备好的）。然后在需要清楚浮动的标签（上一个父盒子）添加class：“clearfix”类即可。（优点：方便）

基本写法：
.clearfix::after {
   content:"";
   display:block;
   clear:both;
}

补充写法：
.clearfix::after {
   content:"";
   display:block;
   clear:both;
//补充代码，隐藏额外标签
   height：0；
   visibility:hiddent;
}   

方法④（ 双伪伪元素清除法）：类似方法三，只是css代码不同。（此时clearfix这个类还可以用在解决外边距塌陷问题，说明如图） 优点：一举两得！！

方法⑤：给父元素（上一个盒子）设置overflow：hidden；（优点：最简单）

---

 有关CSS的定位问题

定位：可以将元素放在网页的任意一个位置

常见场景：①一个盒子叠在另外一个盒子上面的情况。定位后的盒子层级最高，在最上层。（相对、绝对）

                   ②将盒子固定在【屏幕】的某个位置。（固定定位）

使用定位的步骤：

 

一、静态定位static（一般没用）

二、 相对定位relative

 三、绝对定位absolute

子绝父相：因为父元素定位了，子元素参照父元素定位。父元素没有定位，子元素参照浏览器定位。

绝对定位 后的元素具有行内块元素特点，设置宽高生效。 

 四、固定定位fixed

固定定位 后的元素具有行内块元素特点，设置宽高生效。 

五、层级定位的方法（略）

---

水平方向居中text-align

---

垂直方向对齐方式的vertical-align（专治垂直方向的不对齐）

父盒子需要设置行高才生效！！

---

 SEO简介

1.在网页logo的位置设置隐藏的网站名称。

三大标签的内容都是项目经理准备好的，只需复制粘贴。

 

2022.3.8完！