打码日常3day-html5+css3（layout）

css3

盒子模型

• 外边距（margin）

  • 外边距不会影响盒子可见的大小，只会影响盒子的位置
  • 元素在页面中从左向右排，默认情况下设置左、上盒子会移动，下右会移动其他元素
  • 值为负向相反方向移动

• 边框（border）

  • 简写时无顺序要求

    solid 表示虚线
    dotted 点状虚线
    dashed 虚线
    double 双线
    

• 内边距（padding）

  • 清除内容周围的东西

• 内容（content）

  • 显示文本和图像

盒子模型的布局

• 如果子元素的大小超出了父元素，则子元素会从父元素中溢出

  • 使用overflow属性来设置父元素如何处理溢出的子元素

  • 可选值：

    ​ visible，默认值，子元素会溢出父元素

    ​ hidden，溢出内容将会被剪切不显示

    ​ scroll，生成两个滚动条，通过滚动条来查看完整的内容

    ​ auto，通过需要生成滚动条

• 垂直外边距的重叠（折叠）

  • 相邻的外边距会发生重叠现象

  • 兄弟元素

    • 兄弟元素之间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

    • 特殊情况：

      如果相邻的外边距一正一负取两者的和

      如果两个都为负，取绝对值大的

  • 父子元素

    • 父子间的相邻距离，子元素的会传给父元素（上外边距）
    • 父子外边距的折叠会影响到页面的布局，必须要经行处理

• 行内元素的盒模型

  • 行内元素不支持设置高宽
  • 行内元素可以设置padding，但是垂直不会影响页面的布局
  • 行内元素可以设置border，垂直方向的border不会影响页面的布局
  • 行内元素可以设置margin，垂直方向的margin不会影响布局

• 要让文字在父元素中垂直居中，只需要父元素的line-hight设置为父元素的高

display

• display用来设置显示的类型

• 可选值：

  inline 将元素设置为行内元素

  block 将元素设置为块元素

  inline-block 将元素设为行内块元素（既可以设置宽度和高度，又不会独占一行）少用

  table 将元素设置为一个表格

  none 元素不在页面中显示

visibility

• visibility用来设置元素显示状态

• 可选值：

  visible 默认值，元素在页面正常显示

  hidden 元素在页面中隐藏不显示，但是依然占据页面的位置

盒子的大小

• 默认情况下盒子的大小由内容区、内边距和边框共同决定

• box-sizing 用来设置盒子尺寸的计算方式

  • 可选值：

    content-box 默认值，宽度和高度来设置内容区的大小

    border-box 宽的和高度来设置整个盒子可见框的大小

• 圆角和阴影

  • border-radius: 用来设置四个角的圆角

    ​ 四个值：左上 右上 右下 左下

    ​ 三个值：左上 右上/左下 右下

    ​ 两个值：左上/右下 右上/左下

    border-top-left-radius: 50px 100px;
    

  • outline 用来设置元素的轮廓线，用法与border一样，但不会影响可见框的大小

  outline: solid 50px darkblue;
  

  • box-shadow 用来设置阴影效果，不会影响页面的布局

    ​ 第一个值右偏量

    ​ 第二个值下偏量

    ​ 第三个值模糊效果

    ​ 第四个值阴影颜色

    box-shadow: 10px 10px darkmagenta;