学习笔记

深浅模式

html ​

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

css ​

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

选择器 ​

  1. 标签，类选择器
html
<div class="red">red</div>
<div class="orange">orange</div>
css
/* 标签选择器 */
div {
    font-size: 30px;
}

/* 类选择器 */
.red {
    width: 100px;
    height: 100px;
    background-color: red;
}
.orange {
    width: 200px;
    height: 200px;
    background-color: orange;
}

代码效果：

red
orange
  1. 通配符，id选择器
html
<div id="text">id选择器</div>
<div>通配符选择器</div>
css
* {
    font-size: 20px;
}

#text {
    color: red;
}

代码效果：

  1. 复合选择器
html
<div>
    <span>
        后代选择器--孩子
    </span>
    <div>
        <span>后代选择器--孙子</span>
    </div>
</div>

<div>
    <p>
        子代选择器
    </p>
</div>

<div class="class">
    div标签1
</div>
<div>
    div标签2
</div>
<p class="class">p标签</p>

<span class="class">
    伪类选择器测试
</span>
css
/* 后代选择器 */
div span {
    background-color: skyblue;
}

/* 子代选择器 */
div>p {
    color: red;
}

/* 交集选择器 */
div.class {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

/* 伪类选择器 */
span.class:hover {
    font-size: 30px;
    color: red;
}
/* 结构伪类选择器 */
li:last-child {
    background: #ff0;
}

li:nth-child(3) {
    background: #0f0;
}

/* 伪元素选择器 */
li::before {
    background: pink;
    counter: "asdas"
}

代码效果：

后代选择器--孩子
后代选择器--孙子

子代选择器

div标签1
div标签2

p标签

伪类选择器测试

选中标签的范围越大，优先级越低。

字体修饰属性 ​

html
<p class="font1">测试字体一</p>
<div class="font2">测试字体二</div>
<h1>标题一</h1>

<div class="img">
    <img src="https://i2.hdslb.com/bfs/archive/8f320867ca3628b0d87e485c6d95193ac7ee5c21.jpg@336w_190h_1c_!web-video-rcmd-cover.avif">
</div>

<a href="#">超链接去除下划线</a>
css
.font1 {
    /* 字体大小必须得有单位，不然不生效，浏览器默认字体大小为16px */
    font-size: 20px;
    /* 字体粗细 */
    font-weight: 700;
    /* 斜体 */
    font-style: normal;
    /* 行高 */
    line-height: 20px;

    /* 简写 是否倾斜，是否加粗，字号(必须)/行高 字体(必须) */
    /* font: italic 100 20px/100px 楷体; */
    /* 文本缩进 */
    text-indent: 3em;
}

.font2 {
    height: 100px;
    background-color: skyblue;
    line-height: 100px;
}

h1 {
    /* 文本对齐 */
    text-align: center;
}

.img {
    text-align: center;
}

a {
    text-decoration: none;
}
代码效果

测试字体一

测试字体二

标题一

​ 超链接去除下划线

背景属性 ​

描述属性属性值
背景色background-color
背景图background-imageurl()
背景图平铺方式background-repeatno-repeat,repeat, repeat-x,repeat-y
背景图位置background-positiontop,bottom,left,right,center
背景图缩放background-sizecontain,cover
背景图固定background-attachmentfixed
背景复合属性background各个属性按空格隔开，不区分顺序
html
<div>
    div标签
</div>
css
div{
    width: 370px;
    height: 370px;

    background-color: pink;
    background-image: url(https://scpic3.chinaz.net/files/default/imgs/2023-10-10/9a81121313435261_s.jpg);
    /* background-repeat: no-repeat; */
    background-repeat: no-repeat;

    /* 默认位置 */
    background-position: left top;
  	background-position: 50px;
    background-position: center;

    /* 图片和盒子的宽高一样停止缩放 */
    background-size: contain;
    /* 图片完全覆盖盒子 */
    background-size: cover;
    /* 图片与盒子宽比 */
    background-size: 110%;
    /* 固定背景图 */
    background-attachment: fixed;
}

关键字设置背景图片位置，可以颠倒顺序。只写一个关键字，另外一个为居中。数字只写一个值表示水平方向，垂直方向为居中。

代码效果：

div标签

背景图固定测试文字

显示模式 ​

  1. 块级元素
html
<div class="red">块级元素div标签</div>
<div class="orange">块级元素div标签</div>
css
div,
img {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
}

.orange {
    background-color: orange;
}

块级独占一行，宽度默认为父级宽度100%，加宽高生效

  1. 行内元素
html
<span class="pink">行内元素</span>
<span class="skyblue">span标签</span>
css
.skyblue {
    background-color: skyblue;
}

.pink {
    background-color: pink;
}

行内元素一行共存多个，加宽高不生效

  1. 行内块元素
html
<img src="https://scpic3.chinaz.net/files/default/imgs/2023-10-10/9a81121313435261_s.jpg">
<img src="https://scpic3.chinaz.net/files/default/imgs/2023-10-10/9a81121313435261_s.jpg">
css
img {
    width: 100px;
    height: 100px;
}

行内块元素一行共存多个，宽高由内容决定，加宽高生效

代码效果
块级元素div标签
块级元素div标签
行内元素span标签
  1. 转化显示模式

属性名： display

属性值效果
block块级
inline-block行内块
inline行内

盒子模型 ​

css
div {
    width: 200px;
    height: 200px;
    background: pink;

    /* 内边框 */
    padding: 20px;

    /* 边框线 */
    border: 1px dashed #000;
    border-top: 2px solid #000;
    border-bottom: 2px dotted #0f0;
    border-left: 2px dashed #fff;
    border-right: 2px solid orange;

    /* 外边框 */
    margin: 20px;
    margin: 0 auto;

    /* 盒子尺寸，内减模式，浏览器自动计算 */
    box-sizing: border-box;

      /* 圆角设置 */
    border-radius: 20px;
}

盒子的内边框属性可以通过最多四个简化参数由上到左顺时针设置，缺少的属性与它的对立面一致。padding和border会撑着盒子。两个垂直相邻盒子会合并在一起，如果配置了外边距，则会取两个盒子外边距的最大值。行内元素无法改变垂直边距，只能通过行高设置。

代码效果：

image-20240930011150554
css
.button {
    width: 100px;
    height: 40px;
    margin: 0 auto;
    background-color: skyblue;
    border-radius: 10px;

    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.5);
}

代码效果

浮动 ​

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

.product {
    width: 550px;
    height: 300px;
    margin: 40px auto;

    background-color: pink;
}

.left {
    width: 110px;
    height: 300px;
    float: left;


    background-color: skyblue;
}

.right {
    width: 435px;
    height: 300px;
    float: right;
}

.right li {
    width: 100px;
    height: 145px;
    float: left;
    margin: 0 5px;
    margin-bottom: 10px;

    background-color: orange;
}

.right li:nth-child(4n) {
    margin-right: 0px;
}
html
<div class="product">
    <div class="left"></div>
    <div class="right">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

代码效果：

清除浮动

  1. 额外标签法:在父元素内容的最后添加一个块级元素，设置CSS 属性 clear: both

  2. 单伪元素法

css
clearfix: :after {
  content: "";
  display: block;
  clear: both;
}
  1. 双伪元素法
css
clearfix::before,
clearfix::after {
  content: ""
  display: table;
}

clearfix::after {
  clear: both;
}
  1. 父元素添加 CSS 属性 overflow: hidden

flex ​

image-20241001010124588

主轴与侧轴对齐方式

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

主轴对齐(默认左对齐)： justify-content

css
.box {
    height: 120px;
    display: flex;
    	/* 左 */
    justify-content: flex-start;
    	/* 右对齐 */
    justify-content: flex-end;
      /* 居中对齐 */
    justify-content: center;

  
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    border: 1px solid pink;
}

.box div {
    width: 130px;
    height: 60px;
    background-color: orange;
}

flex-start

flex-end

center

space-between

space-around

space-evenly

侧轴对齐: align-items对齐全部元素， align-self 对齐选中元素

css
.box {
    height: 120px;
    display: flex;
    justify-content: center;

    align-items: center;
    align-items: flex-start;
    align-items: flex-end;
    border: 1px solid pink;
}

.box div:nth-child(2) {
    align-self: center;
}

.box div:nth-child(3) {
    align-self: start;
}

.box div {
    width: 130px;
    height: 60px;

    background-color: orange;
}

align-items: center;

align-items: flex-start

align-items: flex-end

align-self

修改主轴方向： flex-direction: column; 修改主轴方向为水平方向，侧轴方向自动变为垂直方向。

html
<div class="media">
    <div></div>
    <span>媒体</span>
</div>
css
.media {
    width: 100px;
    height: 100px;
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 1px solid black;
}

.media div {
    width: 30px;
    height: 30px;
    background-color: pink;
}

.media span {
    font-size: 15px;
}

代码效果：

媒体