前端复习笔记5-css(前两篇小结)

难点问题总结

行内标签（不可置换元素）垂直方向的边距问题

• a span label 这些是不可置换元素，不能添加垂直方向的边距。
• input img 这些是可置换元素，可以添加垂直方向的边距。

块级标签和行内标签水平居中问题

• 1、块级盒子内部只有文字 text-align没一点毛病

• 2、块级盒子内部是行内标签，文字在行内标签内部

• 3、块级盒子内部是块级标签，两个块级标签内部都有文字

• 4、块级盒子居中的问题

  • 如果想让块级的盒子在块级的盒子当中水平居中，
    对内部的块级盒子用margin 0 auto
  • 如果想让行内的盒子在块级的盒子当中水平居中，
    对外部的块级盒子用text-align：center;

• 5、单行文本在块级盒子中心问题

  text-align:center
  line-height:盒子高度
  把这两行要添加给外部的块级盒子

• 6、多行文本在块级盒子中心问题

  只能用padding-top，添加内边距把内容区域往下挤。但是盒子的大小 会变大，我们要去精确还原盒子。

精确还原盒子问题（盒子设置了宽高）

• 如果盒子不设置宽高，会自动还原盒子；
• 外部盒子设置了宽400，内部盒子不设置宽，那么内部盒子宽默认是 400，当给内部盒子添加左内边距padding-left:100px；那么这时候内部盒子 不需要精确还原，因为没有设置宽，盒子会自动减去相应的内容区域。
• 外部盒子设置了宽400，内部盒子也设置了宽400，当给内部盒子添加 左内边距padding-left:100px；那么内部盒子水平方向会加大100，造成内 容溢出，这会我们需要精确还原盒子，手动去减去相应大小的内容区域。

父子关系盒子的间距处理问题（垂直bug）

兄弟盒子的间距处理问题（垂直塌陷）（只会在标准文档流当中出现）

背景图片的设置

背景的综合设置

background: red url(img/5.jpg) no-repeat 50px 100px/100% 100%;
综合属性设置：颜色 图片路径 重复方式 背景定位/背景大小
这几个值，顺序可以改变，但是定位和大小必须在一起。