第一次周考总结

题目： ## 1.块级标签都有哪些及块级元素特性总结？

    .块级标签总结：本身具有display：block;属性, 具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距   常见的块级标签：div p h1-h6 ul li ol dl dt dd hr   块级标签共有的特点：   特点： 1.在没有设置宽度和高度的情况下，宽度跟父元素的宽度一样，高度由内容撑开   2.垂直布局，独立成行（一个标签占一行）   3.可以设置宽高、内间距、外间距、边框 4.具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距

   ## 2.行级标签都有哪些及行内（行级）元素特性总结？

      行级标签总结：本身具有display：inline;属性称为行级标签   常见的行级标签：span a b strong em i del sup sub   行级标签共有的特点：   特点：   1.宽度和高度由内容撑开   2.水平布局，在一行显示，一行放不下会自动折行   3.可以设置 边框、内间距   4.不能设置宽高  5.不能设置上下外间距，只能设置左右的外间距 5.行内元素只能容纳文本或者其他行级元素（此处请注意，不要在行级元素中嵌套块级和行内块元素) 6.换行和空格会被解析

     ## 3.行内块标签：   本身具有display：inline-block;属性称为行内块标签   常见的行级标签：img  input(表单)   行内块标签共有的特点：   特点：   1.可以设置宽高的   2.水平布局，在一行显示，一行放不下会自动折行   3.具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距。可以设置 边框、内间距、外间距 4.换行和空格会被解析

## 4.清除浮动方法（3种）

1.给浮动元素的父级盒子设置一个固定的高度 优缺点：不够灵活，适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动 不用 优缺点：会产生新的浮动问题 3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto 优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁 4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both; 优缺点：代码冗余，通俗易懂，书写方便 clear: left; 清除左侧浮动带来的影响 clear: right;清除右侧浮动带来的影响 clear: both;清除两侧浮动带来的影响 5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式： .clearfix::after{ content:''; display:block; clear:both; } 优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确

## 5.如何使用css实现表格的1像素边

table{ border-collapse: collapse; }

## 6.单行文本水平居中垂直居中？ text-align:cebter; line-height:高度值；

## 7.绝对定位特性？

  1.元素脱离正常文档流，不占位(也脱离文本流，全脱) 2.有定位父级相对于定位父级发生定位偏移 3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html） 4.能使不能设置宽高的行级元素设置宽高 5.提升层级 6.如果没有定位偏移属性，对元素本身有影响；如果有定位偏移属性，则相对于父元素发生偏移

## 8.css哪些属性不能继承？ a标签不能继承字体颜色color h标签不能继承font-weight b.strong不能继承font-weight i,em不能继承font-style

## 9.元素类型转换 display:inline;转换为行内元素。 【不常用】 display:block;转换为块状元素。 【常用】 display:inline-block;转换为行内块状元素 【比较常用】

## 10.background属性复合写法？ background:bg-color bg-image bg-repeat bg-position; 背景图片大小不写在复合写法里，写在其下面应单独设置 background-size: 200px 200px;

11.浮动的特点： 1.元素浮动后不占位，脱离正常标准流，不脱离文本流 2.元素浮动后不占位,导致父元素高度塌陷(高度为0)，影响后续布局 3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行 4.使行级标签支持宽高 5.提升层级

12.图片居中的方法： 1.给图片的父元素设置水平居中，text-align: center;这时图片充当文本 2.转成块级标签 设置 margin: 0 auto; 因为必须是块级标签才能实现水平居中

13. 兄弟关系外间距塌陷问题： 现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象； 两个值一样大，取当前值 两个值不同，取较大值 原因：并列关系的两个元素共用了一个外间距区域 解决办法：分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden' 14. 父子关系外间距塌陷问题：现象： 1.元素嵌套关系，子元素的margin-top值会叠加给父元素；(坑爹) 2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值； 原因： 父元素和子元素公用一个上外边距区域 解决方法： 1.为父元素设置上边框或者上填充 2.为父元素设置overflo：hidden； 3.转换思路，巧用padding，规避margin -->

15。定位和浮动的区别： 1.绝对定位和固定定位脱离正常标准流脱离文本流 全脱 2.浮动只脱离正常标准流不脱离文本流 3.都可以使行级标签支持宽高 4.元素设置绝对固定浮动之后，就不在区分标签类型了，类似于行内块标签