css第一弹

请仔细看代码内的注释

行内元素与块状元素

html 标签在不引用css的情况下分为两种标签 (行内标签, 块标签)

块标签就是独立占一行 (p，div，li，ul，h1~h*)
行内标签不会占一行可跟其他行内元素共占一行(span，a，img)
这里只列出常用标签具体请百度
行内元素没有盒子模型的属性(margin padding border……)稍后详细讲

/* 行内元素转化为块状元素*/
span {
  display: block; 
}
/** 块状元素转为行内元素（基本没这样子用过） */
div {
  display: inline;
}
/** display 还有个inline-block 属性 介于两者之间 和行内元素一样不独立占用一行 却像block元素一样 可以用盒子模型属性*/
span,div {
  display: inline-block;
}
/*
顺便提一下 display 就是规定一个元素怎么展示 块状还是行内
它还有最重要的参数是 display: flex 基本上inline inline-block block flex 就够用了
flex再下一弹详细讲解
*/

盒子模型

行内元素不能设置盒子模型的属性
把元素想象成一个盒子

border 是纸板箱
padding是泡沫缓冲区
content是装的东西
margin是每个箱子之间的距离
box-sizing $\color{#f00}{important！！！！讲解看下面的css div1div2}$

盒子模型.png

div {
  border: 1px solid #ddd;
  /*margin padding 同理*/
  margin: 10px 15px 20px 30px;
  /* 参数四个的时候 顺序为 margin-top margin-right margin-bottom margin-left*/
  padding：10px 20px;
  /*参数两个的时候 第一个代表padding-top padding-bottom 第二个代表padding-left padding-right*/
}
div1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  magin: 10px;
  padding: 10px;
  /*
  此时盒子模型的总宽高分别为
  allwidth= width(100) + marginLeft + marginRIght + paddingLeft + paddingRight + borderLeft + borderRight = 142px;
  allheight= height(100) + marginTop + marginBottom + paddingTop + paddingBottom + borderTop + borderBottom = 142px;

*/
}
div2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  magin: 10px;
  padding: 10px;
  box-sizing: border-box;
  /*
  此时盒子模型的总宽高分别为 具体内容宽高为
  allwidth= width;  content = width - margin - padding - border;
  allheight= height; content = height - margin - padding - border;
  为减少计算可在 style 最上层设置所有元素 box-sizing: border-box;
*/
}

定位（position）

position 有 relative absolute static 三个主要属性设置了 position 为relative 或者absolute 才能使 top left bottom right属性起作用
所有元素都是按文档流顺序排列——正常文档流就是按写的标签顺序排列(可以用定位改变文档流)

static (默认定位)所有元素不设置position 都是static
relative relative 是相对于元素本身的定位

<div class="content">
  <div class="div">
  这是position：relative元素
  </div>
</content>
.content {
  border: 1px solid #f00;
  width: 100px;
  height: 100px;
}
.div {
  position: relative;
  width: 50px;
  height: 50px;
  top: 20px;
  left: 20px;
  background: #000;
}

relative.png

absolute absolute是相对于对于第一个不是static的祖先元素( $\color{#f00}{important！！！！}$ )

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* 盒子模型上述有讲 */
    }
  </style>
<body style="border: 1px solid #000;">
  <div style="border: 1px solid #000; width: 200px; height: 200px; margin: 50px;padding: 10px;" id="div_content">
    <div style="width: 100px; height: 50px; background: #ddd; color: #fff;" id="div1>div1</div>
    <div style="width: 100px; height: 50px; background: #334411; color: #fff" id="div2">
      div2
      <div style="position: absolute; top: 50px; left: 50px; background: #f00;" id="absoulte">absolute</div>
    </div>
  </div>
</body>
/*
  以上的元素树状结构为 body->div_content->(div1,div2)->定位元素 （这里div1忽略 只考虑 div2 这支）
  树状结构对应的position为static->static->static->absolute 
  absolute元素向上找position不为static的祖先元素 并没有找到 就相对于根元素 做定位 效果如图1
*/

图1.png

下面代码和图1代码几乎相同注意 div_content 元素加上了 position：relative；

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* 盒子模型上述有讲*/
    }
  </style>
<body style="border: 1px solid #000;">
  <div
    style="border: 1px solid #000; width: 200px; height: 200px; margin: 50px;padding: 10px; position: relative" 
    id="div_content"
  >
    <div style="width: 100px; height: 50px; background: #ddd; color: #fff;" id="div1>div1</div>
    <div style="width: 100px; height: 50px; background: #334411; color: #fff" id="div2">
      div2
      <div style="position: absolute; top: 50px; left: 50px; background: #f00;" id="absoulte">absolute</div>
    </div>
  </div>
</body>
/*
  以上的元素树状结构为 body->div_content->(div1,div2)->定位元素 （这里div1忽略 只考虑 div2 这支）
  树状结构对应的position为static->relative->static->absolute 
  absolute元素向上找position不为static的祖先元素 找到div_content 就相对于此元素 做定位 效果如图2
*/

图2.png

可以自己尝试一下将 div2 设置为 relative absolute元素就是相对于div2做定位；
$\color{#f00}{important！！！！absolute元素脱离了文档流不占用文档流位置可理解为悬浮状态}$

fixed
fixed 与 absolute 相似，但fixed元素始终相对于浏览器视窗窗口可利用上面例子尝试