HTML03_外边距_圆角边框_盒子阴影_稳定性_浮动_常见

外边距_圆角边框_盒子阴影_稳定性_浮动_常见布局的笔记

HTML05

• 外边距
  • 块级盒子居中对齐
    • margin: 0 auto; 核心 让盒子的 左右 改为 auto
    • 必须设置宽度
  • 清除内外边距（一般都是最开头就要先清除的）
    • * { margin：0； padding：0；}
  • 外边距的合并问题 （最大的为准）
    • 1.相邻块元素垂直外边距的合并
      • 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
      • 这是浏览器的规定，没法解决，尽量避免这种情况发生
    • 2.嵌套块元素垂直外边距的合并
      • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并
      • border
        • 可以为父元素定义1像素的上边框或上内边距
      • padding
      • 给父元素添加overflow：hidden
• 圆角边框
  • border-radius :百分比/px
  • 让一个正方形 变成圆圈
  • 有两个单位：px和%
    • 效果一样都是在角90的情况下，对角的边长进行设置
  • 也可以同时指定四个角
    • 跟border一样
    • border-radius: 1px 1px 1px 20px;
      • 左上 右上 右下 左下
    • border-radius: 10px 0;
• 盒子阴影
  • box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
  • 水平阴影的位置和垂直阴影的位置是必选，而且允许负值
  • 外阴影 (outset) 是默认值，可以不写 想要内阴影 再加inset
• 三个常见布局
• 浮动
  • 标准流
    • 正常显示的方式 块级一行显示一个 行内元素一行显示多个
  • 作用：就是让任何盒子可以一行排列，方便去布局
  • 虽然可以使用display:inline-block来做div一行内显示，但对于想要靠左靠右实在是过于麻烦
  • 元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
  • 浮动 是 脱标的
    • 1. 浮动再父盒子里面 是不会超过内边距和边框的范围
    • 2. 如果子盒子有一个浮动了，其余的子盒子都应该浮动
    • 3. 默认的隐式转换 行内块元素
    • 4.浮动对下面的盒子有影响
  • 内幕特性
    • 1. 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
    • 2.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
    • 3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
• 盒子模型布局稳定性
  • 问：什么情况下使用内边距，什么情况下使用外边距？
  • 答：其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个
  • 建议使用优先级：
    • width > padding > margin