2019-09-06

CSS进阶内容学习

文章目录

1. CSS进阶1

CSS进阶1

　　本文将表述关于盒子模型和其样式定位的内容。了解CSS盒子模型的概念、计算、以及如何设置元素的宽度和高度。

盒子模型

　　盒子模型(box model)又称框模型，指所有HTML元素都可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
box-model

●margin 框外位置
margin-top 上边界
margin-bottom 下边界
margin-left 左边界
margin-right 右边界

●padding 框内位置
padding-top 上填充
padding-bottom 下填充
padding-left 左填充
padding-right 右填充

●border 边框属性
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框
border-width 边框粗细
border-color 边框颜色
border-style 边框样式

元素定位

　　定位即元素框相对于游览器窗口或父元素的位置。定位机制包括默认、绝对定位和相对定位。其中绝对定位的参考系原点为网页左上顶点，而相对定位的参考系原点为父级元素下默认子元素原始位置左上顶点。

参考系坐标方向如下：
CSS参考系

●position 定位属性
absolute 绝对定位
relative 相对定位

z-index属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。z-index值可以为负数，默认值为0。
z-index属性

实列如下：

img { 
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1; 
}

DIV类标签CSS修饰

使占行标签收缩并漂移位置，使用CSS修饰属性float。
将li标签向左漂移的实列如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标签浮动</title>
    <style>
      li {
        width: 100px;  <!-- 标签宽度 -->
        background-color: aqua;  <!-- 背景色 -->
        margin-left: 50px;  <!-- 左边界50像素 -->
        float: left;  <!-- 向左平移成一行 -->
        list-style: none;  <!-- 无点标识 -->
      }
    </style>
  </head>
  <body>
    <ul>
      <li>我</li>
      <li>你</li>
      <li>他</li>
    </ul>
  </body>
</html>

Scholar’s Blog by scholargeek is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由董仕麟创作并维护的scholargeek博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文永久链接：https://scholargeek.github.io/2019/09/06/CSS1/

Scholar's Blog

DO WHAT WE WANT

CSS进阶内容学习

CSS进阶1

盒子模型

元素定位

DIV类标签CSS修饰

文章目录