微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

首页 > 博客列表 > 伪类、字题图标、盒模型的计算方法、单位和媒体查询

博主信息

博文 16

粉丝 0

访问量 20696

专题推荐

更多>

1.伪类

伪是形容词, 类:class,指定了它的权重
伪类比较常用
1.元素的位置来匹配一个或多个元素
2.表单中根据元素的状态，如表单控件是否禁用或是否有效
结构伪类,举例子如下：

  <style>
      .list :nth-of-type(3) {
        background-color: hotpink;
      }
    </style>

不增加元素属性的情况下保证了html代码干净的情况下选择到某一元素.

通过这种方式选中更简洁.

    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <p>demo1</p>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
    </ul>

寻找p元素，把list改成p元素type为1即可 .list > p:nth-of-type(1)

 .list > :nth-of-type(3) {
        background-color: hotpink;
      }

第一张是默认输出没有p元素所以demo1没有改色
第二张是加入p元素输出就可以变色了
输出：

这时候可发现问题style标签中选择的是第三个，但是又选中了item4里的子元素的第三个li.

空格会递归的往下选，所以要明确指出来可加入大于号。加入大于号就限定了它的子元素而忽略了它的后代，忽略了那么ul里的子元素就会被选中。.list > :nth-of-type(3)

.list :nth-of-type(3) {
        background-color: hotpink;
      }

<ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>
        item4
        <ul>
          <li>item4-1</li>
          <li>item4-2</li>
          <li>item4-3</li>
        </ul>
      </li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
    </ul>

第一张是源码：.list :nth-of-type(3)

第二张是加入大于号：.list > :nth-of-type(3)

输出：

:nth-of-type()分组匹配，在匹配之前将元素根据类型进行分组后再匹配。

若要找到p元素则在代码中加入p，.list > p:nth-of-type(3) 你会发现颜色彻底没了。

 <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <p>demo1</p>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
    </ul>
    <style>
    .list > p:nth-of-type(3) {
        background-color: hotpink;
      }
    </style>

输出：

但是要找到p元素整篇代码只有一个p元素，把.list标签尾部的3改为1即可。

 .list > p:nth-of-type(1) {
        background-color: hotpink;
      }

输出：

若不想改源码，可在ul标签中继续加入两个p标签也可实现颜色效果。

输出：

它第一步会先找p标签，然后自动分组，然后再找到第三个p。

比如说想获得匹配中的元素，去掉某一元素，去掉第三个li颜色。

:not（）就是在一个集合中，去掉某一些元素

      .list > :nth-of-type(3):not(li:nth-of-type(3)) {
        background-color: hotpink;
      }

输出：

倒数选择器，元素过多的时候可使用

:nth-last-of-type()

2.伪类选择器的参数

:nth-of-type(参数)
参数公式= an + b
a,n,b=[0,1,2,3,4…]

其中 a: 叫系数，n:叫计数器, b:叫偏移量

元素的有效编号:必须从1开始，n是从0开始，b也是从0开始元素的有效编号:必须从1开始，n是从0开始，b也是从0开始。

(0n+3)即是0n+3，n是从0开始。所以0n+3=3

.list > :nth-of-type(0n + 3) {
        background-color: cornflowerblue;
      }

输出：

1n+b:1*n会选到所有元素，1n会选到所有元素
1n+3代表偏移量，这个3代表从3开始。1n+0和1也会全选，因为0是非法值，当1计算出一个值才算有效值。
所以下面的代码输出效果是一样的。

.list > :nth-of-type(1n + 3) {
        background-color: cornflowerblue;
      }
 .list > :nth-of-type(n + 3) {
        background-color: orange;
      }

如用2n的话则会选择偶数行列，因为2x0=0，2x1=2，2x2=4，2x3=6，…以此类推。

.list > :nth-of-type(2n) {
        background-color: blueviolet;
      }

如输出效果可看出偶数都变成了紫色

输出：

获取前三个

-1x0+3=3

-1x1+3=2

-1x2+3=1

-1x3+3=0(0是非法值，匹配就结束了) */

.list > :not-of-type(-n+3){
  background-color: crimson;
}

获取后三个用倒数选择器*:nth-last-of-type

 .list > :nth-last-of-type(-n + 3) {
        background-color: darkgreen;
      }

总结

1. 获取指定的某一个: (b)

2, 获取前几个, (n-b)

3. 获取指定位置后的全部元素, (n+b)

4. 获取全部偶数(2n/even)或奇数(2n+1/odd)元素 */

字体图标

字题图标可在阿里图标库里找到，把下载好的文件解压后拉进文件夹。然后回到html用代码引用。

<link rel="stylesheet" href="font_icon - 副本/iconfont.css" />
<p>
<span class="iconfont icon-gouwuche"><span>购物车</span></span>
</p>

输出：

上面是css引用，现在来输出js引用

<script src="font_icon - 副本/iconfont.js"></script>

<svg class="icon">
      <use xlink:href="#icon-jingdongicon-"></use>
    </svg>

输出：

盒模型与计算方式

盒模型常用属性
1. width (宽)
2. height（高）
3. border（边框）
4. padding（内边距）
5. margin（外边距)

  <body>
    <div class="box"></div>

border有两种属性，第一个是宽度。第二个是边线的样式。

box {
        width: 200px;
        height: 200px;
         border: 1px solid;
      }

输出：

除了添加线条找到盒子之外，还可以通过背景色来找到盒子。

先加入背景颜色和虚线

background-color: goldenrod;
border: 5px dashed currentColor;

输出：

将背景色缩小到边框内

第一行为默认样式，第二行是修改过的样式。

background-clip: border-box;
background-clip: content-box;

输出：

内边距:位于边框与内容区之间的区域,呼吸区.

padding:20px;

输出：

默认的时候height/width就是内容区大小

 box-sizing: content-box;

我的目标是将一个260x260,改成200x200.

width =width + padding + border = 200

通过收缩原来的内容区大小,来保证盒子在页面中占据的空间不变

box-sizing: border-box;

输出：

盒模型的四个方向是可以独立设置的

padding,border, margin

四个方向:用时针方向来表示,顺时针,上,右,下,左

还要四值、三值、二值以及单值。

三值和二值的记忆技巧:第二个参数永远表示左右

.box {
        padding: 5px 10px 15px 20px;
        padding: 5px 10px 15px;
        padding: 5px 10px;
        padding: 10px;
      }

padding,margin 都是透明的，所以只能设置宽度

border不是透明的，除了宽度,还能设置样式，前景色

除了宽度透明所以可以设置个样式 ,因为还是透明的还可以加入前景色

高度宽度

.box {
        border-top-width: 20px;

样式 double(双重)

        border-top-style: double;

前景色

        border-top-color: cadetblue;

以上代码可以一条进行简化

   border-top: 20px double cadetblue;

buttom(底部)

  border-bottom: 20px double cyan;

全部一样

   border: 20px double cyan;
      }

元素样式重置解决方案

三行代码解决元素样式方案

 * {
        padding: 0px;
        margin: 0px;

盒子大小的计算方式

        box-sizing: border-box;
      }

常用单位

px，em , rem,vh,vw

10个em=160px，1em=16px

1个em = font-size大小

  .box {
        width: 10em;
10个em=160px，1em=16px 
1个em = font-size大小 
        height: 5em;
        box-sizing: border-box;
        background-color: darkgreen;

默认的font-size=16px

em永远和当前或父级的font-size大小绑定

如果页面这些元素，如果想让它的大小不要发生变化怎么办

因为em它在各种场景下会变化的，没有稳定的值

很多情况下需要固定的值

到达根元素就不会再发生变化即是html

 :root {
        font-size: 10px;
      }

rem可以拿来引用html中的font-size

需要个160*80的盒子

  .box {
        width: 16rem;
        height: 8rem;
      }

在根元素中如果改了字体大小

body {
        font-size: 16px;
      }

这样可以保证浏览器字题的大小，不会受到根元素的影响

vh，vw

视口看成100份，每一份就是一个vh或vw。即是百分之一 —>

先在检查器中看视口的宽高，宽度 window.innerWidth，高度window.innerHeight

.box {
        width: 20vw;

盒子宽度永远是视口的五分之一:20%

  height: 10vh;
      }

高度永远是视口高度的10%

输出：

总结

px（像素），em（元素和负极相关） , rem（只和根元素相关）,vh,vw（与视口相关）

媒体查询

媒体: 屏幕, 打印机

查询: 查询当前屏幕宽度变化

btn是基本样式，后面是修饰

<button class="btn small">按钮1</button>
<button class="btn middle">按钮2</button>
<button class="btn large">按钮3</button>

根元素设置10像素好布局

 <style>
          html {
            font-size: 10px;
          }

基本样式

          .btn {
            background-color: seagreen;
            color: white;
            border: none;
            outline: none;
          }

hover所有元素都能用，不是只能添加进a标签


.btn:hover {
            cursor: pointer;
            opacity: 0.8;
            transition: 0.3s;
          }

按钮

小按钮


          .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: 480px) {
            html {
              font-size: 12px;
            }
          } 
          @media (min-width: 640px) {
            html {
              font-size: 14px;
            }
          }
          @media (min-width: 720px) {
            html {
              font-size: 16px;
            }
          }

桌面优先/PC优先, 由大屏到小屏

复制上方代码min改为max，从大到小排列

 @media (max-width: 720px) {
            html {
              font-size: 16px;
            }
          }
          @media (max-width: 640px) {
            html {
              font-size: 14px;
            }
          }
          @media (max-width: 480px) {
            html {
              font-size: 12px;
            }
          }

这个代码要保留,你要设置大于720像素怎么办

 @media (min-width: 720px) {
            html {
              font-size: 16px;
            }
          }

设置一个最大最小的范围

480像素和640像素之间是黄色

区间媒体查询,不会刻意去用

 @media (min-width: 480px) and (max-width: 640px) {
            body {
              background-color: yellow;
            }
          }

批改老师：

PHPz

批改状态：合格

老师批语：发现问题，解决问题是最好的学习方式

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

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

0条评论

作者最新博文

markdown语法与emmet语法

2021-09-18 01:56:27

关于我们免责申明意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学