CSS基础

CSS

基础

• 插入样式表

外链式
<link rel="stylesheet" type="text/css" href="xx.css">
内联式
<style>
</style>
行内式
<div style="xxx">

• 优先级

  内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

中间自适应布局

• 圣杯布局

  <!-- center放在最前,设置父盒子的padding-left和right大小是左右布局 -->
  <!-- 设置center左浮动宽度100%就会把left和right挤到了第二行  -->
  <!-- 设置left和right左浮动和右浮动,因为父盒子padding所以需要通过relative进行第二行调位置 -->
  <!-- 设置left和right的margin-left="-100%/-200%"将left和right移动到第一行 -->
  <div class="outer">
        <div class="center">
            x
        </div>
        <div class="left">1</div>
        <div class="right">2</div>
    </div>
    <style>
        .outer {
            height: 200px;
            border: 1px solid #000;
            padding-left: 200px;
            padding-right: 200px;
        }
  
        .center {
            height: 200px;
            float: left;
            width: 100%;
            background-color: rgb(241, 125, 125);
        }
  
        .left {
            position: relative;
            left: -200px;
            margin-left: -100%;
            height: 200px;
            width: 200px;
            float: left;
            background-color: aqua;
        }
  
        .right {
            float: right;
            position: relative;
            left: 200px;
            margin-left: -200%;
            height: 200px;
            width: 200px;
            background-color: rgb(193, 151, 53);
        }
  
    </style>
  

• 双飞翼布局

  <!-- center在left和right的前边,三个都左浮动 , center宽度100% -->
  <!-- left和right都会被挤到第二行 -->
  <!-- 所以需要left和right都需要margin-left="-100%/-100px" 回到第一行 -->
  <!-- 为了不遮挡center中的内容,需要center设置子元素margin -->
    <div id="center">
        <div class="content">#center</div>
    </div>
    <div id="left">#left</div>
    <div id="right">#right</div>
    <style>
        #center {
            float: left;
            height: 200px;
            width: 100%;
            background: rgb(206, 201, 201);
        }
  
        #left {
            float: left;
            height: 200px;
            width: 200px;
            margin-left: -100%;
            background: rgba(95, 179, 235, 0.972);
        }
  
        #right {
            float: left;
            height: 200px;
            width: 100px;
            margin-left: -100px;
            background: rgb(231, 105, 2);
        }
  
        .content {
            margin: 0 150px 0 200px;
        }
    </style>
  

九宫格布局

<div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

• flex

        ul {
            width: 100%;
            height: 100vh;
            padding: 0;
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
        }
  
        li {
            width: 30%;
            height: 30%;
            margin-left: 5%;
            margin-bottom: 5%;
            background-color: aqua;
        }
  
        li:nth-of-type(3n+1) {
            margin-left: 0;
        }
  
        li:nth-of-type(n+7) {
            margin-bottom: 0;
        }
  

• float

       ul {
            width: 100%;
            height: 100vh;
            padding: 0;
            <!-- display: flex; -->
            <!-- flex-wrap: wrap; -->
            list-style-type: none;
            overflow: hidden;
        }
  
        li {
            width: 30%;
            height: 30%;
            margin-left: 5%;
            margin-bottom: 5%;
            float: left;
            background-color: aqua;
        }
  
        li:nth-of-type(3n+1) {
            margin-left: 0;
        }
  
        li:nth-of-type(n+7) {
            margin-bottom: 0;
        }
  

• inline-block

  <!-- inline-block会存在空袭,需要letter-space="-10px"消除 -->
          ul {
            width: 100%;
            height: 100vh;
            padding: 0;
            list-style-type: none;
            <!-- /* overflow: hidden; */ -->
            letter-spacing: -10px;
        }
  
        li {
            width: 30%;
            height: 30%;
            margin-left: 5%;
            margin-bottom: 5%;
            <!-- /* float: left; */ -->
            display: inline-block;
            background-color: aqua;
        }
  
        li:nth-of-type(3n+1) {
            margin-left: 0;
        }
  
        li:nth-of-type(n+7) {
            margin-bottom: 0;
        }
  

• table

      <style>
        ul {
            padding: 0;
            list-style: none;
        }
  
  
        .table {
            width: 100%;
            height: 100%;
            display: table;
            border-spacing: 10px;
        }
  
        li {
            display: table-row;
        }
  
        div {
            width: 30%;
            height: 30%;
            display: table-cell;
            text-align: center;
            border-radius: 5px;
            background: skyblue;
        }
    </style>
  
    <ul class="table">
        <li>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </li>
    </ul>
  

• grid

  基本设置

  1. 创建一个网格布局

  display:grid;
  

  2. 设置每个子元素的宽高

  grid-template-columns: repeat(3, 200px);
  grid-template-col:100px 200px;
  

  3. 等分响应式

  grid-template-columns: 1fr 2fr 1fr;
  

  4. 设置每个子元素的行间距列间距

  grid-gap: 20px 10px;
  

  5. 自动布局(列,行)

  grid-auto-flow: row  dense;每行尽可能多的放
  grid-auto-flow: column  dense;先列后行
  

  6. 水平垂直对齐

  justify-content
  align-content
  justify-items
  align-items
  

  布局设置

  1. 子元素根据网格设置元素布局

  <!-- 列从第二列占到第四列 -->
  grid-column-start: 2;
  grid-column-end: 4;
  <!-- 行从第一行占到第二行 -->
  grid-row-start: 1;
  grid-row-end: 2;
  
  <!-- 省略: -->
  grid-column:2/4;
  grid-row:1/2;
  

  2. 统一设置多个元素布局

  <!-- 包裹元素 -->
  .wrapper{
  display: grid;
  grid-gap: 10px 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "header  header . "
    "sidebar content content";
    "footer  footer  footer"
  }
  <!-- 每个子元素命名 -->
  .header {
    grid-area:header;
  }
  .aside {
    grid-area:aside;
  }
  .content {
    grid-area:content;
  }
  .footer {
    grid-area:footer;
  }
  

九宫格:

        ul {
          height: 100vh;
          list-style-type: none;
          padding: 0;
          border: 1px solid #000;

          display: grid;
          grid-gap: 5px;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 30%;
      }

      li {
          background-color: aqua;
      }

清除浮动

• 给父元素添加 height
• 给最后添加一个空元素设置 clear:both
• 给父元素添加 overflow:hidden
• 给父元素添加::after 为元素并设置清除浮动

BFC

block formatting context 块级格式化上下文,
如果一个元素符合触发 BFC 的条件，则 BFC 中的子元素布局不受外部影响也不受外界影响,本身也不受兄弟影响

• 触发方式
  float
  position:absolute fixed
  overflow:hidden auto scroll 不是 visible
  display:inline-block table-cell flex grid 不是 block inline none

• 解决问题

  1. 上下 div 的 margin 会重合,-----解决方法:将两个 div 各自的父元素设置为 BFC
  2. 脱离文档流父元素高度塌陷,----解决方法:父元素设置 overflow:hidden
  3. 自适应两栏布局:左边的宽度固定，右边的宽度自适应。----方法:左侧 float,右侧 overflow:hidden,这样右侧 BFC 就不受左侧影响
  4. 子 margin 带领父一同 margin,----解决方法:父元素开启 BFC,设置子元素不影响父元素/给父元素设置 border

• 1px 问题

  物理像素/css 像素 = 像素比 devicePixelRatio

  window.devicePixelRatio
  

  解决:

  1. 直接 0.5px

  <div id="container" data-device={{window.devicePixelRatio}}></div>
  #container[data-device="2"] {
    border:0.5px solid #333
  }
  

  2. 伪元素先放大、后缩小：

  在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border 值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果。

  #container[data-device="2"] { position: relative; }
  #container[data-device="2"]::after{
      position:absolute;
      top: 0; left: 0; width: 200%; height: 200%; content:"";
      transform: scale(0.5);
      border: 1px solid #333;
    }
  

  3. 媒体查询@media+缩放

  @media only screen and (-webkit-min-device-pixel-ratio:2.0){}
  

  4. meta 标签 viewport

  <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
  
    // 手动添加mate标签
    const meta = document.createElement('meta');
    let scale = 1/window.devicePixelRatio;
    meta.content = 'viewport';
    meta.name = `width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`,viewport-fit=cover';
    document.getElementsByTagName('head')[0].appendChild(meta);