盒模型与元素位置大小、定位元素的水平与垂直对齐技术

札记

position 属性

序号	参数	说明
1	absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
2	fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3	static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
4	inherit	规定应该从父元素继承 position 属性的值
5	relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

box-sizing

box-sizing: content-box|border-box|inherit;

值	说明
content-box	指定元素的宽度和高度（最小/最大属性）适用于 box 的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

常用块级元素

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是 css layout 的主要标签
dl - 定义列表
fieldset - form 控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3 级标题
h4 - 4 级标题
h5 - 5 级标题
h6 - 6 级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames 可选内容（对于不支持 frame 的浏览器显示此区块内容）
noscript - 可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

常用行内元素

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体（不推荐）
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码（在引用源码的时候需要）
dfn - 定义字段
em - 强调
font - 字体设定（不推荐）
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线（不推荐）
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线

盒模型基础、元素位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒模型基础</title>
  </head>
  <style>
    .box {
      /* 宽、高 */
      width: 200px;
      height: 200px;
      border: 2px solid black;
    }
    .box.one {
      /* margin: top right bottom left; */
      margin: 50px 0 50px 0;
      /* margin-top: 20px; */
      background-color: rgb(221, 50, 50);
      /* background-clip 对背景进行裁切 默认是 border-box (边框级别),content-box（内容区）  */
      background-clip: content-box;
      /* 内边距 */
      padding: 20px;
      box-sizing: content-box;
    }
    .box.two {
      margin-top: 20px;
      background-color: lightblue;
      background-clip: border-box;
      /* padding: 20px; */
      box-sizing: border-box;
    }
    .box.parent {
      background-color: lightpink;
      /* 一旦一个元素被添加了position  且值非static 那么它就是定位元素 */
      position: relative;
      /* 从左边向右移动30px  */
      /* 相对定位是相对自己做了偏移，这个元素在文档流中的位置不释放 */
      left: 30px;
      top: 40px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: lime;
      /* 绝对定位 */
      /* 如果没有定位父级元素，会向上一级找，直到找到，就是body元素 */
      /* position: absolute; */
      /* 固定定位  会忽略定位父级 总是相对于body定位*/
      /* 右下角 返回顶部位置 */
      position: fixed;
      right: 30px;
      bottom: 30px;
    }
  </style>
  <body>
    <!-- 块级元素默认垂直排列 -->
    <div class="box"><p>box 基础框</p></div>
    <div class="box one">box one</div>
    <!-- width: content_width + padding_left/rigth + border_left/right    -->
    <div class="box two">box two</div>
    <!-- 嵌套关系 -->
    <div class="box parent">
      <p>parent</p>
      <div class="box son">
        <p>son</p>
      </div>
    </div>
  </body>
  <script>
    const box = document.querySelector(".box");
    // 1、内容区大小与位置
    // 宽高大小=宽/高 +podding
    console.log("宽度-clientWidth", box.clientWidth);
    // 高度
    console.log("高度-clientHeight", box.clientHeight);
    // clientleft/clienttop :就是边框宽度   用得很少。
    console.log("边框宽度-clientLeft", box.clientLeft);
    console.log("边框宽度-clientLeft", box.clientTop);
    // 获取可视区的大小：视口
    console.log(
      "可视区的大小clientWidth",
      document.documentElement.clientWidth
    );
    console.log(
      "可视区的大小clientHeight",
      document.documentElement.clientHeight
    );
    // 2、当前元素的定位偏移量，与定位有关
    // 定位父级
    console.log("定位父级", box.offsetParent);
    // 这个元素现在是一个真正的盒子，包括了内容，podding,border
    // 真实宽度要加上border
    console.log("box.offsetWidth", box.offsetWidth);
    console.log("box.offsetHeight", box.offsetHeight);
    console.log("box.offsetLeft", box.offsetLeft);
    console.log("box.offsetTop", box.offsetTop);
    //3、当前文件的滚动大小
    // 视口大小：可视区大小
    // 文档大小：当前html大小
    // 通常视口大小 > 文档大小，所以要通过滚动条才能看到全部html文档内容
    // 获取html元素
    const html = document.documentElement;
    // 当前文档的高度
    console.log("文档高度-scrollHeight", html.scrollHeight);
    // 当前可视区的高度
    console.log("可视区域高度-clientHeight", html.clientHeight);
    // 获取滚动条
    console.log("滚动条", html.scrollTop);
  </script>
</html>

定位元素的水平与垂直对齐

Tags: 需注意是否存在你同级元素，在写代码时，<DIV>同级建立了<H1> ,使用 top 时挡住了 <H1>。

样例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素水平对齐与垂直对齐</title>
  </head>
  <style>
    body {
      height: 2000px;
    }
    .container {
      width: 300px;
      height: 300px;
      background-color: red;
      position: relative;
    }
    /* 让浏览器自动计算左右外边距 */
    /* margin-left: auto;
        margin-right: auto; */
    /* 垂直居中 */
    /* 不能用margin-top:auto 和 margin-bottom:auto 来垂直居中  */
    .container .item1 {
      /* 块级元素默认左对齐 */
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
    }
    .container .item2 {
      /* 居中对齐 */
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
      /* top: 0; */
      right: 0;
      /* bottom: 0; */
      left: 0;
      margin: auto;
    }
    .container .item3 {
      /* 居中对齐 */
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
      /* top: 0; */
      right: 0;
      /* bottom: 0; */
      /* left: 0; */
      margin: auto;
    }
    .container .item4 {
      /* 顶对齐 */
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
      margin-top: auto;
      /* 有兄弟元素时，使用top定位会进行覆盖 需注意 使用margin-top*/
      /* top: 0; */
      /* right: 0; */
      /* bottom: 0; */
      /* left: 0; */
      /* margin: auto; */
    }
    .container .item5 {
      /* 顶对齐 */
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
      /* margin-top: auto; */
      /* 有兄弟元素时，使用top定位会进行覆盖 需注意 使用margin-top*/
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      /* right: 0; */
      bottom: 0;
      /* left: 0; */
      margin: auto;
    }
    .container .item6 {
      /* 顶对齐 */
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
      /* margin-top: auto; */
      /* 有兄弟元素时，使用top定位会进行覆盖 需注意 使用margin-top*/
      /* margin-top: auto; */
      /* margin-bottom: auto; */
      /* top: 0; */
      /* right: 0; */
      bottom: 0;
      /* left: 0; */
      margin: auto;
    }
    .container .item7 {
      /* 顶对齐 */
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
      /* margin-top: auto; */
      /* margin-top: auto; */
      /* margin-bottom: auto; */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  </style>
  <body>
    <h1>水平对齐</h1>
    <div class="container">
      <h2>左对齐</h2>
      <div class="item1"></div>
    </div>
    <div class="container">
      <h2>居中对齐</h2>
      <div class="item2"></div>
    </div>
    <div class="container">
      <h3>右对齐</h3>
      <div class="item3"></div>
    </div>
    <h1>垂直对齐</h1>
    <div class="container">
      <h3>顶对齐</h3>
      <div class="item4"></div>
    </div>
    <div class="container">
      <h3>中间对齐</h3>
      <div class="item5"></div>
    </div>
    <div class="container">
      <h3>底对齐</h3>
      <div class="item6"></div>
    </div>
    <h1>垂直水平居中对齐</h1>
    <div class="container">
      <div class="item7"></div>
    </div>
  </body>
</html>

Correcting teacher：

WJ

Correction status：qualified

Teacher's comments：总的来说写的不错，建议标题修改一下，另外重要代码加上效果图以方便后期查看！

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

【PHP前端学习】markdown语法、vscode、PHPStudy 安装与配置

2020-06-11 17:01:00