CSS 盒模型与媒体查询 - html

首页 > 博客列表 > CSS 盒模型与媒体查询

博主信息

博文 18

粉丝 1

访问量 16730

专题推荐

更多>

伪类选择器

:nth-of-type()分组匹配,在匹配之前将元素根据类型进行分组后再匹配
:not()就是在一个集合中, 去掉某一些元素

　:nth-of-type()

1:nth-of-type()
- 进行分组匹配后选中子元素 所有的第三个 .list > *:nth-of-type(3) { color: violet; }
- 进行分组匹配后选中子元素 指定的第三个 .list > li:nth-of-type(3) { color: violet; }
- 进行分组匹配后选中第三个 同时去掉p元素 .list > :nth-of-type(3):not(p:nth-of-type(3)) { color: violet; }
- 选中第一个 .list > :first-of-type { color: red; }
- 选中最后一个 .list > :last-of-type { color: yellow; }
- 倒数第2个 .list > li:nth-last-of-type(2) { color: cyan; }
2:nth-of-type(参数)
- 参数 = an+b
- a: 系数, n:计数器, b : 偏移量
- 元素的有效编号: 必须从1开始, a,n,b 都是从0开始取值, 取值范围 [0,1,2,3,4,….]
- :nth-of-type(3) ===> :nth-of-type(0n+3)
- 1n+b: .list > :nth-of-type(1n + 3) { color: cyan; }
- 匹配所有的偶数元素 .list > :nth-of-type(2n) { color: yellow; }或者 .list > :nth-of-type(even) { color: yellow; }
- 匹配所有的奇数元素 .list > :nth-of-type(2n+1) { color: yellow; }或者 .list > :nth-of-type(odd) { color: yellow; }
- 匹配前三个 .list > :nth-of-type(-n + 3) { color: red; }
- 后三个 .list > :nth-last-of-type(-n + 3) { color: red; }

总结

1.获取指定的某一个 :nth-of-type(b)
2.获取前几个 :nth-of-type(-n + b)
3.获取指定位置后的全部元素 :nth-of-type(n+b)
4.获取全部偶数 :nth-of-type(2n/even)或奇数 :nth-of-type(2n+1/odd)元素
5.获取后几个 :nth-last-of-type(-n + b)

盒模型

盒模型常用属性

width宽 height高 border边框 padding内边距 margin外边距
background-clip: border-box 背景被裁剪到边框盒。
background-clip: content-box 背景被裁剪到内容框。
border: 10px dashed currentColor; 使用currentColor就能继承父级的颜色
盒模型的四个方向, padding, margin是可以独立设置的
- 四值: 上, 右,下, 左
- 三值: 上, 左右, 下
- 二值: 上下, 左右
- 单值: 四个方向全一样
- 三值与二值记忆技巧: 第二个参数永远表示左右
padding, margin是透明的,所以只能设置宽度
border不是透明的,除了宽度, 还能设置样式, 前景色

一个简单的元素样式重置解决方案

<style>
    * {
      padding: 0;
      margin: 0;
      /* 盒子的大小计算方式 */
      box-sizing: border-box;
    }
  </style>

w3c的标准盒子

<body>
    <div class="box"></div>
    <style>
      /* w3c的标准盒子 */
      .box {
        /* 默认值 也可以不用设置*/
        /* box-sizing: content-box;*/
        width: 200px;
        height: 200px;
        border: 10px dashed currentColor;
        background-color: violet;
        background-clip: content-box;
        /* 内边距: 位于边框与内容区之间的区域 */
        padding: 20px;
        /* 计算方式 */
        /* 实际宽高 = width宽/height高 + 2*border边框 + 2*padding内边距 */
        /* 200 + 20*2 + 10*2 = 260 */
      }
    </style>
  </body>

IE盒子,怪异盒子

<body>
    <div class="box"></div>
    <style>
      /* IE盒子,怪异盒子 */
      .box {
        /* 通过 box-sizing: border-box 来指定内容区的边界在哪里 */
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        border: 10px dashed currentColor;
        background-color: violet;
        background-clip: content-box;
        /* 内边距: 位于边框与内容区之间的区域 */
        padding: 20px;
        /* 计算方式 */
        /* 宽高都是上面设置的宽高的大小 */
        /* 通过收缩原来的内容区大小,来保证盒子在页面中的占据的空间不变 */
      }
    </style>
  </body>

单位 px, em, rem, vh, vw

绝对单位: px,像素,与设置相关
相对单位:
- 1.em,rem, 与字号相关 font-size
- 2.vw, vh, 与视口相关(可视窗口大小)
- 3.em永远和当前或父级的font-size大小绑定的
- 4.rem 可以用来引用html中的font-size
- 5.vh,vw: 将视口看成100份, 每一份就是一个vh/vw

<body>
    <div class="box"></div>
    <style>
      :root {
        /* 设置根元素字号大小 */
        /* 这时, 这个根元素中的font-size专用于布局了 */
        font-size: 10px;
      }
      body {
        /* font-size: 16px; ====== font-size: 1.6rem; */
        /* 设置字号大小 */
        font-size: 1.6rem;
      }
      .box {
        /* 这里如果用em 就是用的父级 body 的字号大小  font-size: 16px; em永远和当前或父级的font-size大小绑定的 */
        width: 10em;
        height: 5em;
        /* 这里如果用rem 就是用的html 的字号大小  font-size: 10px; rem 可以用来引用html中的font-size  */
        width: 10rem;
        height: 5rem;
        box-sizing: border-box;
        background-color: seagreen;
      }
    </style>
    <p>Hello world</p>
    <!-- 如果没有设置 body 的字号 font-size: 1.6rem; 只设置 :root  理论上讲,p中的文本大小应该是10px -->
    <!-- 实际上p.font-size = 12px 这是 浏览器为了用户体验 设置了最小字号 12px -->
    <!-- 现在我设置 body 的字号 font-size: 1.6rem; 那么现在p.font-size = 16px -->
  </body>

　媒体查询

媒体查询作用针对不同屏幕尺寸设置不同的样式

语法

  @media mediatype and|not|only (media feature) {
      CSS-Code;
      用 @media开头 注意@符号
      mediatype 媒体类型 (all  适用于所有设备。  screen  主要用于屏幕。)
      关键字 and not only
      media feature 媒体特性必须有小括号包含
}

<body>
    <button class="btn small">按钮1</button>
    <button class="btn middle">按钮2</button>
    <button class="btn large">按钮3</button>
    <style>
      html {
        font-size: 10px;
      }
      .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
      }
      .btn.small {
        font-size: 1.2rem;
        padding: 0.4rem 0.8rem;
      }
      .btn.middle {
        font-size: 1.6rem;
        padding: 0.4rem 0.8rem;
      }
      .btn.large {
        font-size: 1.8rem;
        padding: 0.4rem 0.8rem;
      }
      /* 我只要动态的改变rem的大小, 就可以动态的调整每个按钮的大小 */
      /* 移动优先,从最小的屏幕开始进行媒体查询 */
      @media (min-width: 0px) {
        html {
          font-size: 12px;
          background-color: violet;
        }
      }
      @media (min-width: 480px) {
        html {
          font-size: 12px;
          background-color: cornflowerblue;
        }
      }
      @media (min-width: 640px) {
        html {
          font-size: 14px;
          background-color: red;
        }
      }
      @media (min-width: 720px) {
        html {
          font-size: 16px;
          background-color: aqua;
        }
      }
    </style>
  </body>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端vscode常用快捷键

2021-09-26 22:40:23