HTML CSS 第五次笔记

爱泡脚的鸡腿
116 阅读6分钟

1 选择器

1.1 结构伪类选择器

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选择第一个li */
      /* ul(1)+li(1)+:first-child(结构伪类选择器优先级为10)=12 所以优先级为12 */
      /* 结构伪类选择器 */
      ul li:first-child {
        color: pink;
      }

      /* 最后一个小li */
      /* 结构伪类选择器 */
      ul li:last-child {
        color: red;
      }

      /* 选择任意序号的li (比如第二个)*/
      /* 结构伪类选择器 */
      ul li:nth-child(2) {
        color: blue;
      }
    </style>
  </head>

  <body>
    <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>
    </ul>
  </body>

  </html>
</body>

</html>

结果： image.png

1.2 结构伪类公式

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 公式 */
    /* 将奇数数个li背景都设置为aqua */
    ul li:nth-child(2n+1) {
      background-color: aqua;
    }

    /* 前五个li背景颜色更改*/
    ul li:nth-child(-n+5) {
      background-color: pink;
    }

    /* 注意：后更改的会覆盖前面的样式 */
  </style>
</head>

<body>
  <ul>
    <li>我是1个小li</li>
    <li>我是2个小li</li>
    <li>我是3个小li</li>
    <li>我是4个小li</li>
    <li>我是5个小li</li>
    <li>我是6个小li</li>
    <li>我是7个小li</li>
    <li>我是8个小li</li>
    <li>我是9个小li</li>
    <li>我是10个小li</li>
    <li>我是11个小li</li>
    <li>我是12个小li</li>
    <li>我是13个小li</li>
    <li>我是14个小li</li>
    <li>我是15个小li</li>
  </ul>
</body>

</html>

image.png

1.3 伪元素选择器

·伪元素权重：1
·伪元素属于行内元素 所以没有大小（除非转换为块级）
·注意：伪元素的标签不是通过html创建出来的，是通过css模拟出来的

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 一个冒号是伪类，两个冒号是伪元素 */
    .box::before {
      content: '我';
      /* 因为是行内元素，所以无法直接设置宽高 */
    }

    .box::after {
      content: '刘德华';
    }
  </style>
</head>

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

</html>

image.png

2 PxCook 像素大厨

**便捷的前端开发工具 **
[PxCook项目链接](项目文件预览 - PxCook像素大师安装包:本仓库提供PxCook像素大师的安装包下载。PxCook是一款专为设计师和开发者打造的像素级设计工具，能够帮助用户高效地进行UI设计、切图标注等工作 - GitCode)

3 盒子模型

image.png

image.png

3.1 盒子模型-边框线

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 添加边框  粗细 线条样式 颜色 */
      border: 2px dotted skyblue;
    }

    input {
      width: 490px;
      height: 30px;
      border: 2px solid red;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <input type="text" placeholder="输入内容">
</body>

</html>

结果：

image.png 但在大部分前端开发中，只使用单边框的情况居多

image.png

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      width: 490px;
      height: 30px;
      border-top: 2px solid #000;
      border-left: 2px solid red;
      border-right: 2px solid green;
      border-bottom: 2px solid blue;
    }
  </style>
</head>

<body>

  <input type="text" placeholder="输入内容">
</body>

</html>

image.png

3.2 盒子模型-内边距

3.2.1 padding设置（四周都为一个值）

image.png

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      /* 内边距 表示四周都是30px*/
      padding: 30px;
      /* 也可以用padding-left padding-right padding-top padding-bottom单独设置单边样式 */
    }
  </style>
</head>

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

  </div>
</body>

</html>

结果：

image.png

3.2.2 内边距多值设置

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      /* 也可以用padding-left padding-right padding-top padding-bottom单独设置单边样式 */
      /* 或者复合写法 */
      /* 两个值：padding: 10px 20px;（表示上下10px 左右20px） */
      padding: 10px 20px;
      /* 三个值: padding: 10px 20px 30px;（表示上下10px 左右20px 下边30px）  */
      padding: 10px 20px 30px;
      /* 四个值: padding: 10px 20px 30px 40px;（表示上下10px 左右20px 下边30px 右边40px）  */
      padding: 10px 20px 30px 40px;

    }
  </style>
</head>

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

  </div>
</body>

</html>

3.3 盒子模型-尺寸计算

在盒子样式中加上“box-sizing:boder-box”

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 1.手动减去 */
      /* 200-20-20 */
      /* width: 160px;
      height: 200px; */
      /* 2.css3 盒子模型 box-sizing: boder-box;就不会扩大盒子像素 */
      box-sizing: border-box;

      width: 200px;
      height: 200px;
      background-color: pink;
      border: 10px solid red;
      padding: 20px;

    }
  </style>
</head>

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

  </div>
</body>

</html>

image.png

3.4 盒子模型-外边距（margin）

image.png

3.4.1 margin基础写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 10px;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      /* 上下左右都是10px */
      /* margin: 10px; */
      margin-top: 10px;
      /* margin也有多值写法 与 padding 一样 */
    }
  </style>
</head>

<body>
  <div class="box1">我我我我我我我我我我我我我我我我我我我我我我我我我我我我我

  </div>
  <div class="box2">你你你你你你你你你你你你你你你你你你你你你你你你你你你你你

  </div>
</body>

</html>

image.png

3.4.2 版心盒子居中对齐

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>版心盒子</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 居中对齐 （需要是有宽度的块级元素）*/
      /* 也可以写为：margin-left:auto;margin-right:auto; */
      margin: 0 auto;
    }
  </style>
</head>

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

</html>

结果： image.png

3.4.2 外边距问题

3.4.2.1 外边距问题-合并现象

上下两盒子，给上盒子设置下边距，下盒子设置上边距，则最终只会显示最大边距的px值
解决：上下两盒子只设置一个的边距

3.4.2 外边距问题-塌陷问题

image.png

image.png
解决：
（1）给子级添加pdding而不是margin
（2）通过在父级盒子中添加overflow：hidden
（3）通过在父级盒子中添加boder-top:px 线样式 颜色; (为了显示美观，可以通过在‘颜色部分’写为transparent)

3.5 盒子模型-元素溢出

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      /* 元素溢出处理（使用overflow）-hidden：超出部分隐藏 */
      overflow: hidden;
      /* 元素溢出处理（使用overflow）-scroll：超出部分滚动  */
      overflow: scroll;
      /* 元素溢出处理（使用overflow）-auto：如果超出，则显示滚动条；不超出，则不显示滚动条 */
      overflow: auto;
    }
  </style>
</head>

<body>
  <div class="box">
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
    我要写很多很多的文字
  </div>
</body>

</html>

3.6 盒子模型-圆角

3.6.1 圆角——四角都有变化

使用属性：border-radius

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 圆角边框 */
      border-radius: 5px;
    }

    img {
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./img/njs10.jpg">
  </div>
</body>

</html>

3.6.2 圆角——单角变化

image.png

3.7 盒子模型——阴影效果

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      border-radius: 50%;
      /* 盒子阴影 */
      /* 属性值：x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色 内外阴影（默认外阴影 内阴影需要加inset） */
      /* 只有x轴和y轴偏移量是必填项 */
      /* 添加过度效果 */
      transition: 0.5s;

    }

    img:hover {
      box-shadow: 0 0 20px grey;
    }
  </style>
</head>

<body>

  <img src="./img/njs10.jpg">
  </div>
</body>

</html>

效果：

image.png

4 清除默认样式

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 使用通配符将所有元素重置为默认样式  清除内外边距*/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 去掉li前面的点 */
    li{
      list-style: none;
    }
  </style>
</head>

<body>
  <h1>标题</h1>
  <ul>
    <li>123</li>
    <li>123</li>
  </ul>
</body>

</html>

image.png

avatar
文章
阅读
粉丝