ACwing学习——css补充本文对ACwing学习——CSS（7）的Bootstrap部分进行补充完善以及对css中常

本文参与4月更文挑战，打卡day14，第十四篇

本文对ACwing学习——CSS（7）的Bootstrap部分进行补充完善。

Bootstrap

Bootstrap是一个css包，地址：bootstrap地址

书写一个样式（栅格效果）

实现效果：

实现栅格效果的代码可以参考：css last case

css常用方法

动态计算宽度的写法：calc(100% * a/b)表示当前选择器的宽度为其父元素宽度的a/b倍
一个出错的问题

题目描述:

题目来源

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
      }

      div:nth-child(1) {
        border-width: 10px;
        border-style: solid dotted inset dashed;
        border-color: blue red;
        border-radius: 50%;
      }

      div:nth-child(2) {
        border: solid 3px black;
        border-radius: 10px;
      }
    </style>
  </head>

  <body>
    <div></div>
    <div></div>
  </body>

</html>

使用div:nth-child(1) { padding: 10px 20px 30px 40px; margin: 10px 20px 30px 40px; } 可以实现让所有div标签中的第一个div标签具有内外边距按照上右下左的顺序分别为10px、20px、30px、40px。
使div标签在其父标签内水平居中的方法：margin: 0 auto;

margin是外边距 padding是内边距
内容盒子模型：div:nth-child(1) { box-sizing: content-box; }其盒子真实大小需要加上内外边距及边框。

div:nth-child(1)冒号前后不能有空格
不定义的时候默认是盒子模型
边框盒子模型：div:nth-child(2) { box-sizing: border-box; }其盒子大小就是指定的宽和高。
element1 > element2：选择父标签是element1的所有element2元素。父元素为目标值的子元素。
div:nth-child(odd)表示第奇数个div标签，div:nth-child(even)表示第偶数个div标签。
position: fixed; 可以保持被赋予样式的元素在视窗内位置永远不变。
position: absolute;该属性添加后，元素原先所在的位置就不再保留，会被其他元素占据。