HTML——选择器、PxCook软件、盒子模型

weixin_52874695

已于 2023-12-19 16:27:00 修改

阅读量208

点赞数 5

分类专栏： html 文章标签： html 前端 css 学习

于 2023-11-19 20:25:33 首次发布

本文链接：https://blog.csdn.net/weixin_52874695/article/details/134494650

版权

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

结构伪类选择器

作用：根据元素的结构关系查找元素

查找第一个元素 :first-child

查找最后一个元素 :last-child

查找第一个N个元素 :nth-child(N)

查找偶数标签（2n,even) :nth-child(2n)

奇数标签（2n+1，2n-1,odd）

5的倍数（5n）

第5个以后的标签（n+5）

第5个以前的标签（-n+5）

标签代码:

    <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>
      <li>10</li>
    </ul>

样式代码:

    <style>
      ul li {
        width: 600px;
        height: 25px;
        background-color: rgb(201, 201, 201);
        list-style: none;
        margin-bottom: 10px;
      }
      /* 查找最后一个元素 */
      ul li:last-child {
        background-color: rgb(101, 194, 201);
      }
      /* 查找第一个元素 */
      ul li:first-child {
        background-color: lightcoral;
      }
      /* 查找第一个N个元素 */
      ul li:nth-child(3) {
        background-color: lightgreen;
      }
      /* 查找偶数标签（2n,even) */
      ul li:nth-child(2n) {
        background-color: navajowhite;
      }
      /* 奇数标签（2n+1，2n-1,odd）
         5的倍数（5n）
         第5个以后的标签（n+5）
         第5个以前的标签（-n+5） */
    </style>

效果:

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

注意点：

必须设置 content: ”” 属性，用来设置伪元素的内容，如果没有内容，则引号留空即可

伪元素默认是行内显示模式

权重和标签选择器相同

div::before {

content: "before 伪元素";

}

div::after {

content: "after 伪元素";

}

盒子模型

1.作用：布局网页，摆放盒子和内容

2.组成：

内容(content)----盒子中的内容---宽高

内边距(padding)--内容和边框之间的距离

边框(border)---- 盒子的边框

外边距(margin) --- 盒子和盒子之间的距离

标签代码:

    <div class="box1">1234567890</div>
    <div class="box2">asdfghjkl</div>

样式代码:

    <style>
      div.box1 {
        /* 盒子内容的宽高 */
        width: 300px;
        height: 300px;
        background-color: paleturquoise;
        /* 内边距(内容和边框之间的距离) */
        padding: 0;
        /* 边框线(solid:实线,dashed:虚线,dotted:点线) */
        border: 3px solid pink;
        /* 外边框 */
        margin: 0;
      }
      div.box2 {
        width: 300px;
        height: 300px;
        background-color: paleturquoise;
        padding: 10px;
        border: 3px solid pink;
        margin: 10px;
      }
    </style>

效果:

小案例:

标签代码:

   <div class="whole">
      <h1>最新文章/New Articles</h1>
      <div class="box1">北京招聘网页设计，平面设计，php</div>
      <div class="box2">体验javasccript的魅力</div>
      <div class="box2">jpuery世界来临</div>
      <div class="box2">网页设计师的梦想</div>
      <div class="box3">jpuery中的链式编程是什么</div>
    </div>

样式代码:

    <style>
      .whole {
        width: 535px;
        margin: 18px;
        border: 1px solid #cccccc;
        padding: 40px 28px;
      }
      .box1 {
        width: 444px;
        height: 52px;
        line-height: 52px;
        color: #666666;
        border-top: 1px solid #cccccc;
        border-bottom: 1px dashed #cccccc;
        padding: 0 30px;
        font-size: 20px;
      }
      .box2 {
        width: 444px;
        height: 52px;
        line-height: 52px;
        color: #666666;
        border-top: 1px dashed #cccccc;
        border-bottom: 1px dashed #cccccc;
        padding: 0 30px;
        font-size: 20px;
      }
      .box3 {
        width: 444px;
        height: 52px;
        line-height: 52px;
        color: #666666;
        border-top: 1px dashed #cccccc;
        padding: 0 30px;
        font-size: 20px;
      }
    </style>

效果:

盒子模型的相关属性：

1.盒子内容的属性：

width:盒子的宽度

height:盒子的高度

2.盒子内边距的属性：

集合写法：

padding:盒子内边距的值

分开写法：

padding-top:盒子上内边距的值

padding-right:盒子右内边距的值

padding-bottom:盒子下内边距的值

padding-left:盒子左内边距的值

3.盒子边框的属性：

border:盒子边框的粗细、样式、颜色----没有顺序

粗细---单位px---描述的边框的宽度

颜色---颜色值：red、#ff0000、rgb(255,0,0)

样式--- solid(实线) dashed(虚线) dotted(点线) double(双线)

4.盒子外间距的属性：

集合写法：

margin:盒子外间距的值

分开写法：----与padding的写法一样

margin-top:盒子上外间距的值

margin-right:盒子右外间距的值

margin-bottom:盒子下外间距的值

margin-left:盒子左外间距的值

标签代码:

<div>盒子内容</div>

样式代码:

   <style>
      div {
        width: 300px;
        height: 300px;
        background-color: aqua;
        /* 上,右,下,左 */
        /* padding: 10px 20px 30px 40px; */
        /* 上,左右,下 */
        /* padding: 10px 20px 30px; */
        /* 上下,左右 */
        /* padding: 10px 20px; */
        /* 上下左右 */
        padding: 20px;
        /* padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 40px; */
        border: coral 6px double;
        /* margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 40px; */
        margin: 10px 20px 30px 40px;
      }
    </style>

效果:

盒子外间距相关问题：

1. 合并现象

1.1 相邻的两个盒子，上下间距会合并---取两个盒子间距的最大值--只写一个值即可

1.2 相邻的两个盒子，左右间距不会合并---取两个盒子间距的和

标签代码:

    <div class="bigBox">
      <div class="smallBox">盒子</div>
    </div>

样式代码:

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .bigBox {
        /* 方法1：给父盒子添加padding属性 */
        /* padding-top: 30px; */
        /* 方法2：overflow: hidden;---推荐 */
        /* overflow: hidden; */
        /* 方法3：transparent透明 */
        border-top: 30px solid transparent;
        width: 200px;
        height: 200px;
        background-color: cyan;
      }
      .smallBox {
        /* 塌陷问题 */
        /* margin-top: 30px; */
        width: 100px;
        height: 100px;
        background-color: darkorange;
      }
    </style>

效果:

weixin_52874695

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML——选择器、PxCook软件、盒子模型

作用：根据元素的结构关系查找元素查找第一个元素 :first-child查找最后一个元素 :last-child查找第一个N个元素 :nth-child(N)查找偶数标签（2n,even) :nth-child(2n)奇数标签（2n+1，2n-1,odd）5的倍数（5n）第5个以后的标签（n+5）第5个以前的标签（-n+5）作用：创建虚拟元素（伪元素），用来摆放装饰性的内容注意点：必须设置属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。
复制链接

扫一扫

专栏目录