简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS 盒模型 与 媒体查询
Blogger Information
Blog 18
fans 1
comment 1
visits 11230
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS 盒模型 与 媒体查询
至诚网络的博客
Original
494 people have browsed it

伪类选择器

: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不是透明的,除了宽度, 还能设置样式, 前景色

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

    1. <style>
    2.     * {
    3.       padding: 0;
    4.       margin: 0;
    5.       /* 盒子的大小计算方式 */
    6.       box-sizing: border-box;
    7.     }
    8.   </style>

w3c的标准盒子

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

IE盒子,怪异盒子

  1. <body>
  2.     <div class="box"></div>
  3.     <style>
  4.       /* IE盒子,怪异盒子 */
  5.       .box {
  6.         /* 通过 box-sizing: border-box 来指定内容区的边界在哪里 */
  7.         box-sizing: border-box;
  8.         width: 200px;
  9.         height: 200px;
  10.         border: 10px dashed currentColor;
  11.         background-color: violet;
  12.         background-clip: content-box;
  13.         /* 内边距: 位于边框与内容区之间的区域 */
  14.         padding: 20px;
  15.         /* 计算方式 */
  16.         /* 宽高都是上面设置的宽高的大小 */
  17.         /* 通过收缩原来的内容区大小,来保证盒子在页面中的占据的空间不变 */
  18.       }
  19.     </style>
  20.   </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
  1. <body>
  2.     <div class="box"></div>
  3.     <style>
  4.       :root {
  5.         /* 设置根元素字号大小 */
  6.         /* 这时, 这个根元素中的font-size专用于布局了 */
  7.         font-size: 10px;
  8.       }
  9.       body {
  10.         /* font-size: 16px; ====== font-size: 1.6rem; */
  11.         /* 设置字号大小 */
  12.         font-size: 1.6rem;
  13.       }
  14.       .box {
  15.         /* 这里如果用em 就是用的父级 body 的字号大小  font-size: 16px; em永远和当前或父级的font-size大小绑定的 */
  16.         width: 10em;
  17.         height: 5em;
  19.         /* 这里如果用rem 就是用的html 的字号大小  font-size: 10px; rem 可以用来引用html中的font-size  */
  20.         width: 10rem;
  21.         height: 5rem;
  22.         box-sizing: border-box;
  23.         background-color: seagreen;
  24.       }
  25.     </style>
  27.     <p>Hello world</p>
  28.     <!-- 如果没有设置 body 的字号 font-size: 1.6rem; 只设置 :root  理论上讲,p中的文本大小应该是10px -->
  30.     <!-- 实际上p.font-size = 12px 这是 浏览器为了用户体验 设置了最小字号 12px -->
  32.     <!-- 现在我设置 body 的字号 font-size: 1.6rem; 那么现在p.font-size = 16px -->
  33.   </body>

　媒体查询

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

  • 语法

    1.   @media mediatype and|not|only (media feature) {
    2.       CSS-Code;
    3.       用 @media开头 注意@符号
    4.       mediatype 媒体类型 (all  适用于所有设备。  screen  主要用于屏幕。)
    5.       关键字 and not only
    6.       media feature 媒体特性必须有小括号包含
    7. }
  1. <body>
  2.     <button class="btn small">按钮1</button>
  3.     <button class="btn middle">按钮2</button>
  4.     <button class="btn large">按钮3</button>
  6.     <style>
  7.       html {
  8.         font-size: 10px;
  9.       }
  11.       .btn {
  12.         background-color: seagreen;
  13.         color: white;
  14.         border: none;
  15.         outline: none;
  16.       }
  17.       .btn.small {
  18.         font-size: 1.2rem;
  19.         padding: 0.4rem 0.8rem;
  20.       }
  21.       .btn.middle {
  22.         font-size: 1.6rem;
  23.         padding: 0.4rem 0.8rem;
  24.       }
  25.       .btn.large {
  26.         font-size: 1.8rem;
  27.         padding: 0.4rem 0.8rem;
  28.       }
  30.       /* 我只要动态的改变rem的大小, 就可以动态的调整每个按钮的大小 */
  32.       /* 移动优先,从最小的屏幕开始进行媒体查询 */
  33.       @media (min-width: 0px) {
  34.         html {
  35.           font-size: 12px;
  36.           background-color: violet;
  37.         }
  38.       }
  39.       @media (min-width: 480px) {
  40.         html {
  41.           font-size: 12px;
  42.           background-color: cornflowerblue;
  43.         }
  44.       }
  45.       @media (min-width: 640px) {
  46.         html {
  47.           font-size: 14px;
  48.           background-color: red;
  49.         }
  50.       }
  51.       @media (min-width: 720px) {
  52.         html {
  53.           font-size: 16px;
  54.           background-color: aqua;
  55.         }
  56.       }
  57.     </style>
  58.   </body>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！