CSS基础知识

总结了CSS盒子模型的相关基础知识，希望每天进步一点点。

CSS盒子模型

• 认识盒子模型
  • margin
    • 外边距属性
  • padding
    • 内边距属性
  • border属性
    • 边框属性
    • border-style（属性）
      • 边框样式 使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。 border-top-style：上边框样式； border-right-style：右边框样式； border-bottom-style：下边框样式； border-left-style：左边框样式
      • none
        • 没有边框
      • solid
        • 边框为单实线
      • dashed
        • 边框为虚线
      • dotted
        • 边框为点线
      • double
        • 边框为双实线
        • 子主题
    • boder-width
      • 边框宽度
    • boder-color
      • border-top-color:上边框颜色; border-right-color:右边框颜色; border-bottom-color:下边框颜色; border-left-color:左边框颜色; border-color:上边框颜色 [右边框颜色 下边框颜色 左边框颜色];
    • 综合设置边框属性
      • border-top:上边框宽度 样式 颜色; border-right:右边框宽度 样式 颜色; border-bottom:下边框宽度 样式 颜色; border-left:左边框宽度 样式 颜色; border:四边宽度 样式 颜色;
  • <div>标记
    • div是英文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。 <div>标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。
• background属性
  • background-color
  • background-image
  • background-repeat
    • repeat：沿水平和竖直两个方向平铺（默认值） no-repeat：不平铺（图像位于元素的左上角，只显示一次） repeat-x：只沿水平方向平铺 repeat-y：只沿竖直方向平铺
  • background-position
    • 使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标。 background-position:20px 20px 使用预定义的关键字：指定背景图像在元素中的对齐方式。 水平方向值：left、center、right。 垂直方向值：top、center、bottom。 使用百分比：按背景图像和元素的指定点对齐。 0% 0% 表示图像左上角与元素的左上角对齐。 50% 50% 表示图像50% 50%中心点与元素50% 50%的中心点对齐。 20% 30% 表示图像20% 30%的点与元素20% 30%的点对齐。 100% 100% 表示图像右下角与元素的右下角对齐，而不是图像充满元素。 如果只有一个百分数，将作为水平值，垂直值则默认为50%。
  • background-attachment
    • scroll：图像随页面元素一起滚动（默认值）。 fixed：图像固定在屏幕上，不随页面元素滚动。
  • 综合设置元素的背景
    • 语法： background:背景色 url("图像") 平铺 定位 固定;
• 元素的类型
  • 块元素
    • 块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。
  • 行内元素
    • 常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>标记是最典型的行内元素。  
• 元素的转换
  • display
    • inline
      • 此元素将显示为行内元素（行内元素默认的display属性值）。
    • block
      • 此元素将显示为块元素（块元素默认的display属性值）。
    • inline-block
      • 此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
    • none
      • 此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。