最近学习前端复习

一、易忘记的点

1. 块级元素：div,ul......可以设置宽高

2. 行内元素：span,a.....不可设置宽高

3. 行内块元素：input,textarea,button,select

4. margin:盒子与盒子之间的距离；padding设置内容与盒子距离

二、最近所学

1. 伪元素：由css模拟出来的标签效果

在父元素的最前面或最后面加一个伪元素，代码为::before和::after

*伪元素是行内元素不可设置宽高 -------->要设置宽高需写为display:blocks;

*必须设content

2. 浮动：float：left和float：right

*浮动可一行设置多个

*可设置宽高

*浮动元素不能设置text-align：center 和margin：0 auto居中但浮动元素的文本可以

3. 结构伪类选择器：用于查找父元素的子元素

E:first-child { } 第一个子元素

E：last-child{} 最后一个子元素

E：nth-child(n){} 第n个子元素

E：nth-last-child（n) {} 倒数第n个子元素

li标签里的第一个a标签选择:li :first-child a{}**易错

补：nth-of type():与上述选择子代方法不同的是它可以选定某一个类型再在某一个类型里找，数个数

4. 网页导航案例步骤：

①清楚默认的padding和margin

②找ul去掉小圆点

③找到li标签设置浮动让li在一行里显示

④找到a标签设置宽高（默认为行内元素，要想设置宽高可以给a设置浮动或者转换a的display)

5. 清除浮动：

法1：直接给父元素设置高度

法2：额外标签法：在父元素内容后加一个块状元素；给添加的块级元素加clear:both;

法3：单伪元素清除法即 .clearfix::after {

content:' ';

display:block;

clear:both;

}

注意若在网页中看不到伪元素，可能是浏览器在content里加了小圆点需要再另加height:0;与visibility：hidden；在后面

法4：双伪元素清除法：

.claerfix::before,

.clearfix::after {

content:'';

display:table;

}

.clearfix::after {

clear:both;

}

法5：给父元素设overflow:hidden ;

(法4和法5用的比较多）

法6：创建BFC盒子

创建的几种方法：

①. html标签是BFC盒子

②. 浮动元素是BFC盒子

③. 行内块元素是BFC盒子

④ .overflow属性取值不为visible。如:auto、hidden...

⑤. .....

BFC盒子常见特点

①.BFC盒子会默认包裹住内部子元素(标准流、浮动)→ 应用:清除浮动

②. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用:解决margin的塌陷

③. ......

6. 定位：一般用于层叠问题，自由摆放

属性名：position；定位类型：①static（静态定位）默认值，不能配合方位移动；

②relative（相对定位）可利用方位相对于自己之前的位置移动，占位置；

③absolute（绝对定位）利用方位相对与父元素移动，不占位置；

④fixed（固定定位）相对与页面固定不动，不占位置；

定位写法：选择器 {

position：absolute；

top：150px;

left:150px;

}

常用：子绝父相

例：利用子绝父相让一个子盒子在父盒子里垂直水平居中

position:absolution;

left:50%(百分号相对于父元素而言的）

top:50%

transform:traslate(-50%,-50%);（相对于自己的，需要xy连写,不然会导致覆盖失效问题）

7. 层级关系：

①不同布局层级关系：定位>浮动>标准流

②关于定位：谁写最下面谁等级高

(可以利用z-index：数字；改变定位的层级关系）

8. 垂直对齐方式（对行内，行内块元素进行设置）

vertical-align:baseline (默认基线对齐）

top（顶部对齐）

middle（中部对齐）

bottom（底部对齐）