【重学css】css基础知识回顾

小蜗牛de代码实验室
75 阅读6分钟

CSS盒模型

CSS盒模型的注意点：

1.padding不能为负值，而margin可以为负值；

2.背景色会平铺到非margin的区域；

<style>
  .box1 {
    width: 100px;
    height: 100px;
    background: pink;
    padding: 20px;
    border: 10px rbba(0, 0, 0, 0) solid;
  }
</style>

当我们的小盒子有一个10px的透明border，这个border也是有背景色的；

image.png

3.margin-top传递的现象及解决方案；

给子元素加了margin-top,然后父元素生效了，好神奇！

  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 30px;
    }
  </style>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>

image.png

如果布局出现margin-top传递的问题，我们怎么解决？

1.首先我们可以用padding-top去替代margin-top;
2.父元素加一个border;
3.BFC也可以解决；

4.margin上下叠加的现象；

如果上下div都有margin,会取两者的最大值；

  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-bottom: 40px;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 30px;
    }
  </style>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>

image.png 解决方法：
1.BFC；
2.只给一个div加margin；

块级盒子(block box)与内联盒子(inline box)

块级盒子：div、p、h1-h6、form、ul、li、table;
内联盒子：span、a、strong、img、lable、input、textarea、select、

块级盒子特性

块级盒子特性内联盒子
独占一行；盒子不会产生换行；
支持所有的样式；有些样式不支持，例如：width、height等；
不写宽度的时候，跟父容器的宽度相同；不写宽度时，宽度由内容决定；
所占区域是一个矩形；所占区域不是矩形；

内联盒子做布局问题很多，内联盒子更适合做修饰标签；

自适应盒模型的特性

自适应盒模型指的是，当盒子不设置宽度时，盒模型相关组成部分的处理方式是如何的；

box2已经设置了width,如果我们给box2加上padding,border和margin时，它是会溢出的；

  <style>
    .box1 {
      width: 300px;
      height: 200px;
      background-color: pink;
    }
    .box2 {
      width: 300px;
      height: 100px;
      background-color: skyblue;
      padding: 10px;
      border: 5px black solid;
      margin: 10px;
    }
  </style>
  <body>
    <div class="box1">
      <div class="box2">盒子的内容</div>
    </div>
  </body>

image.png

当box2没有设置width时，我们添加padding,border和margin，它就不会溢出了；

image.png

标准盒模型与怪异盒模型

在标准盒模型中，如果你设置width和height,实际设置的是content box；padding和border再加上设置的宽高一起决定整个盒子的大小；

在怪异盒模型中，所有的宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分；

    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 5px black solid;
        padding: 10px;
        margin-top: 10px;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 5px black solid;
        padding: 10px;
        margin-top: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box1">没有padding和border</div>
    <div class="box2">有padding和border</div>
    <div class="box3">怪异盒模型</div>
  </body>

image.png

我们可以看到标准盒模型加上padding和border时，宽度变成了130px；而怪异盒模型加上padding和border时，宽度还是100px;

box-sizing属性

  • 默认的是content-box属性：width、height等于content;
  • border-box：width、height等于content+padding+border;

怪异盒模型应用

1.量取尺寸时不用再去计算一些值； 如果有一个div我们已经设置了padding，那它实际的宽度会大于width;

  <style>
    .box1 {
      width: 400px;
      height: 111px;
      padding: 20px;
      background-color: skyblue;
    }
  </style>
  <body>
    <div class="box1">个人信息</div>
  </body>

image.png

如果把它变成怪异盒模型，它的宽度就正常了；

image.png

2.解决一些需要设置百分比和盒模型值；

  <style>
    /* input 这是会溢出 */
    .input1 {
      width: 100%;
      padding: 30px;
    }
    /* input 改成怪异盒模型就能正常显示了 */
    .input2 {
      width: 100%;
      padding: 30px;
      box-sizing: border-box;
    }
  </style>
  <body>
    <input class="input1" />
    <input class="input2" />
  </body>

浮动样式

文档流：元素在Web页面上的一种呈现方式，按照出现的先后顺序进行排列；

当元素浮动时，会脱离文档流；

  <style>
    body {
      border: 1px black solid;
    }
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .box2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>

image.png

然后我们给box1加上浮动；

image.png

box2也加上浮动；

image.png

浮动会造成body高度塌陷的问题，因此我们需要清除浮动；

清除浮动的方式

上下布局的方式清除浮动：
box2没加clear属性；

image.png

box2加上clear；

image.png

嵌套布局清除浮动：

没加float; image.png

子元素加float：left;

image.png

如何让父元素撑开呢？
1.BFC；
2.父元素里加一个<div style="clear:box;">；
3..clearfix::after{}

/*改成块级盒子，clear:both才生效*/
.clearfix::after{
    display: block;
    clear: both;
}

浮动特性注意点

1.只会影响后面的元素；

  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .box2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      float: left;
    }
    .box3 {
      width: 300px;
      height: 300px;
      background-color: sandybrown;
    }
  </style>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>

image.png 2.文本不会被浮动元素覆盖；

浮动当前设计出来就是为了实现图文混排的，因此文字是会围绕div显示的； image.png

3.具备内联元素特性：宽度由内容决定；

没加浮动； image.png

加上浮动；

image.png

4.具备块级元素的特性：支持所有样式

没加浮动；

image.png

加上浮动；

image.png

5.浮动元素放不下，会自动换行；

image.png

定位样式

相对定位relative：

不影响其他元素; 相对定位：

image.png

改成margin:

image.png

绝对定位absolute：

1.绝对定位的元素脱离了文档流，绝对定位元素不占空间；
2.具备内联元素的特性：宽度由内容决定；
3.具备块级元素的特性：支持所有样式；
ps：2和3是BFC共有的特性，和float类似；
4.绝对定位元素相对于最近的非static祖先元素定位；当这样的祖先元素不存在时，则相对于可视区定位； 父元素没有设置position;

image.png

父元素设置position;

image.png

固定定位fixed

固定定位和绝对定位相似，但是会固定在可视区中；

固定定位元素不受祖先元素影响；

黏性定位sticky

黏性定位被认为是相对定位和固定定位的混合；元素在跨越特定阈值前为相对定位，之后为固定定位；

z-index

未加index：

image.png

粉色div加上z-index: 1；默认z-index都为0；

image.png

嵌套层级的关系：parent会和box2的z-index比较，如果parent没有设置z-index，box1才会和box2的z-index比较；

  <body>
    <div class="parent">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>
  </body>

块级格式化上下文BFC

下周复习一下再写

avatar
文章
阅读
粉丝