2022/8/11

学习进度

css(3) 50:14

盒子模型

分两种

box-sizing: content-box;

改变 border , padding 会改变元素的高宽

box-sizing: border-box;

改变 border , padding 不会改变元素的高宽

位置

position

① : static

position : static

这是默认的正常布局 , 改变 top , bottom , right , left , z-index 均无效

② : relative

position : relative

在原来的位置上进行 相对的改动 改变 , 并且原来的位置并不会被补上

举例 : 

.div-inner-2{
    display : inline-block
    position : relative;
    top : 10px;
    left : -100px;
}

注意 : top: 10px , 是指 从上往下 移动 10px ; left : -100px 就相当于从右往左移动 100px.

③ : absolute 

position : absolute

top : xxx px;
left : xxx px;

...

找到第一个离它最近的非 static 状态的祖先节点 , 相对于这个祖先节点四个边界的偏移量

④ : fixed

相对于屏幕视口的位移

y 总举了个网页傍边 “回到顶部” 的例子

.div-inner-2 {
    width: 30px;
    height: 100px;
    background-color: darkgreen;
    display: inline-block;
    position: fixed;
    color: white;
    text-align: center;
    top: 500px;
    right: 0;
}

⑤ : sticky

一个很有趣的特效 

.div-inner-1{
    position : sticky;
    top : 10px ;  /*粘住后上方预留的位置*/
}

.div-inner-3{
    position : sticky;
    bottom : 10px ;  /*粘住后下方预留的位置*/
}

2022/8/10

学习进度

css(3) 30:33

内边距与外边距

margin

从内到外 : 内容 -> padding -> border -> margin

margin : 上 左 下 右 

跟 border 是一样的用法

视频中出现问题 : div-inner 进行 margin 20px , 为什么会拉着父元素向下 20px , 而不是距离父元素 20px

原因 : 父元素没有上边框 或 padding

解决方法有 ① ② ③ ④

.div-outer{
    ① : border-top : 1px soild
    ② : padding-top : 1px
    ③ : overflow : hidden
}

① ② 的缺点是会增加元素的大小

③ 的缺点是我们有时会用到 overflow , 并且不想 hidden

④ :

.div-outer::before{
    content:"";
    display : table;
}


还提及一种冲突的情况 :

margin-bottom : 20px ( div-outer )
margin-top : 30px; ( div-inner )

则两者距离回取最大值 ( 30px )

一个习惯是当有连续的 <div> 时 , 我们就只定义上边距 或者 下边距.

padding

跟 margin 一致

提及 width = content + padding + border ( 三者大小 )

2022/8/9

学习进度

css(2) 完成

边框

① : border-style 

比如 黑边框 , 点边框 等等 

它可以针对四个方向 ：border-style ：上 右 下 左

举例 :

soild : 加粗
dotted : 点
inset : 很难描述 , 透明内嵌 ?

border-style : soild ( 全部是 “soild” )

border-style: solid( 上 下 )  dotted（ 左右 ）;

border-style : soild( 上 ) dotted( 左右 ) inset ( 下 )

之后的 border 均满足这个原则

② : border-width

边框大小

③ : border-color

边框颜色

④ : border-radius

边框的圆角

举例 :

border-radius : 5px;

将图片转化成圆形

border-radius : 50%;

⑤ ： border-collapse

用来决定表格的边框是分开的还是合并的

border-collapse : collapse  /* 合并 */

border-collapse: separate /* 分开 */

元素展示格式

① : display

block 即是 <div> 的 效果 , line 即是 <span> 的效果 , inline-block 两者兼容

举例 :

div{
    display : inline 
}

就可以将 <div> 转换为 <span> .

② : white-space

是否让空格和回车有效

举例 :

<div>
    white-space : pre
</div>

此时就是 <pre> 的效果

③ : overflow

overflow 控制当元素（如文字）超出块 时的效果

举例 ：

overflow : hidden /* 超出的部分隐藏 */

overflow : auto  /* 超出的部分形成滚轮 */

overflow-x: scroll  /* x 轴滚轮 */

overflow-y: scroll  /* y 轴滚轮 */

④ : text-overflow

只说了一个用法

overflow-hidden +     text-overflow: ellipsis 

超出的部分变成省略号

2022/8/8

学习进度 :

css(2) 01:00:00

字体

① : font-size 

字体大小

② : font-style

字体样式

常用 :

font-style : italic /* 斜体 */
font-style : normal /* 正常字体 */ 

③ : font-weight

字体的粗细大小

font-weight : 200; ( 没有单位 )

④ : font-family ( 字体类型 )

背景

① : background-color

背景颜色

② : background-image

举例  :

background-image: url() , url() ; /* 放链接 , 多个照片用逗号隔开即可 */

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); 

/* 渐变色的设置 */

③ : background-size

背景图片大小的设定

background-size: 100px 200px, 100px 200px; /* 分别对应第一个链接和第二个链接的图片 */

background-size : 100px 200px; /*如果此时有两个图片 , 那么两个图片均是这个 size */


④ : background-repeat 

定义图片重不重复

举例 :

background-repeat: no-repeat; /* 不重复 */

background-repeat: repeat x; /* 仅 x 轴重复 */

background-repeat: repeat y; /* 仅 y 轴重复 */

⑤ : background-position

图片默认的是左上角对齐

background-position : x y

（x , y） 是相当于左上角的偏移量

当然也有一些快捷的写法

background-position ：center / right-bottom / right-top / center 200px ;

background-attachment

图片 跟不跟着 块 动

background-attachment : scroll /* 跟 */

background-attachment : fixed /* 不跟 */

补充

提及问题 :

<div> 有 8px 的外边距

用 style="margin: 0" 取消

opacity 可以控制图片颜色的透明度

举例 ：

opacity : 0.2

2022/8/7

$ 学习进度 : $

$ css \ homework \ 1 \ / \ 2 $

$css(2) \ 32:29 $

文本

text-align

<h4> 标题 </h4>

h4 {
    text-align: center;
}

会起到让标题在 正中央 对齐的效果

同时 text-alian: center/left/right/juseify

juseify 是左右均对齐 , 在一行有很多字的时候会体现 

长度单位

px 

屏幕的一个像素点 , 例如你屏幕是 1920 x 1080 , 那么大小就是这

div {
    font-size : 20px;
}

%

用 f12 查一下字体有初始大小 , % 即占初始大小的百分比

div {
    font-size : 200%;
}

em

相对于当前元素的字体大小

注意 “当前” , 举了个很经典的例子

    <div style="font-size: 2em;">
        第一层
        <div style="font-size: 2em;">
            第二层
            <div style="font-size: 2em;">
                第三层
            </div>
        </div>
    </div>

    <!-- 第一层大小为32 二层为64 三层为128 , 因为子标签会继承父标签的影响 -->

rem

相对于根元素的字体大小

根是不变的 , 这个相对于 em 的好处是当你想改中间 , 并不会影响后面

照样是那个例子

    <div style="font-size: 2rem;">
        第一层
        <div style="font-size: 2rem;">
            第二层
            <div style="font-size: 2rem;">
                第三层
            </div>
        </div>
    </div>

    <!-- 第一层大小为32 二层为32 三层为32 -->

vw : 相对于视窗宽度的百分比

vh : 相对于视窗高度的百分比

例子就是一些网页 全屏 , 半屏 , 一些东西 (照片 , 图标) 对于网页的相对大小不变

.mydiv{
    width: 50vw;
    height: 30vh;
}

line-height

y总说的经典应用

.mydiv {
    text-align: center;
    line-height: 200px;
    /* 行高改成和块高一致 , 达到让 行在块居中 的效果 */
    background-color: lightblue;
    height: 200px;
}

<div class="mydiv">
    <p>我是谁</p>
</div>

"我是谁" 在块的中间

letter-spacing

文字间空格

text-indent

行首的缩进 ( 配合<p> )

text-decoration

文本的修饰线 ( 不止是下划线 , 要用查查即可 )

.mydiv{
    text-decoration: green wavy underline;
}

提及例子 : 取消 链接 的下滑横线

a {
    text-decoration: none;
}

text-shadow

text-shadow: 1px 1px 2px pink;

四个变量依次是 x , y , 透明度 , 颜色

写的好迷 , 很多标签不知道

原来是后面的知识 , y总还说让我们听完第一节课就写前三个作业(雾

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        h2 {
            text-align: center;
            /* 文本排列居中 */
        }

        p {
            line-height: 1.5em;
            /* em是文字高度的单位 */
            letter-spacing: 1px;
            text-indent: 2em;
            /*设置文本段的第一行缩进*/
        }

        .beautiful-p {
            text-decoration: underline wavy green;
            /* 文本下设置波浪线 */
        }

        .shadow-p {
            text-shadow: 5px 5px 5px grey;
            /* 字体阴影设置 */
        }

        p::first-letter {
            font-size: 1.2em;
            color: red;
        }

        /* 伪元素选择器 */

        .bold-p {
            font-weight: 800;
            /* 是粗细不是大小 */
        }

        .italic-p {
            font-style: italic;
            /* 字体的格式设置为斜体 */
        }

        .fantasy-p {
            font-family: monospace;
            /* 指定一个元素的字体 */
        }
    </style>
</head>

<body>
    <h2>春</h2>
    <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
    <p class="shadow-p">一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
    <p class="fantasy-p">小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
    <p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。
    </p>
    <p class="beautiful-p">
        “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
    </p>
    <p class="bold-p italic-p">
        雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。
    </p>
    <p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”，刚起头儿，有的是工夫，有的是希望。</p>
    <p class="beautiful-p">春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
    <p>春天像小姑娘，花枝招展的，笑着，走着。</p>
    <p class="shadow-p">春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            color: white;
            width: 300px;
            height: 300px;
        }

        div:nth-child(odd) {
            background-color: #0000FF;
        }

        div:nth-child(even) {
            background-color: rgba(255, 0, 0, 0.7);
        }

        div.small-div {
            width: 200px;
            height: 200px;
        }

        div#big-div {
            width: 400px;
            height: 400px;
        }

        div.hover-div:hover {
            background-color: orange;
        }
    </style>

    <!-- 把style这种形式忘了 , 可能都是<div> , y总代码并没有加 div -->
</head>

<body>
    <div class="small-div">1</div>
    <div id="big-div">2</div>
    <div>3</div>
    <div class="small-div">4</div>
    <div class="small-div hover-div">5</div>
    <div>6</div>
    <div>7</div>
    <div class="hover-div">8</div>
    <div>9</div>
    <div>10</div>
</body>

</html>

$2022/8/6$

学习进度

$css(1) \ 完结$

复合选择器

有几种类型

① : element1, element2

多个标签共用一个状态

举例 :

div,
p {
    width: 50px;
    height: 50px;
    background-color: lightblue;
}

/* 注意逗号的存在 */

同时适用于伪类标签

div:hover,
p:hover{
    ...
}

② : element.class

标签配合上 class 的选定

举例 :

<div class="big"></div>
<p class="big"></p>

我们的要求是仅仅让 <div> 中带有 "big" 的起效果

div.big { ... } /* 满足 div && big */

同理存在 div.big.real{ ... } /* 满足 div && big && real */

甚至可以 id 和 class 组合

p#myp.big {...}

③ : element1 + element2

举例

div + p { ... } /* 紧跟在 <div> 后面的 <p> 才会执行 */ 

例如:

<p>p 1<p>
<div>div 1<div>
<p>p 2<p>
<p>p 3<p>

/* p1 , p3 均不会有效果 */

④ : element1 element2  /* 注意有空格 */

element1 只要是 element2 的祖先节点即可

复杂举例 :

li ui li { ... }

只要能在关系树的前缀中找到 li , .. , ui , ... , li 的子序列即可 , 效果在第二个 <li> 中体现

⑤ : element1 > element2

必须满足 element1 是 element2 的父节点

其他与 ④ 同理

通配符选择器

知识 : <input> 的行高与字体的大小有关

主要有三种类别 :

① : *

* { ... } /* 针对于所有的标签 */

② 

直接上例子

    <input type="text" name="">
    <input type="text" name="" id="">


    input[id] {
        background-color: red;
    }

会对第二个产生影响 , 感觉和前面 "伪类标签" 的 element.class 情况很像

③ 

直接上例子

只举例了 <input> 的例子 , 以 tyoe 的类型来选择

input[ type = text ] { ... }


后面两个应该很少用 , 感觉好迷

伪元素选择器

定义感觉好迷

看例子感觉和 <p> 文本类型的标签结合的比较多

p::first-letter {} <p> 的第一个字

p::first-letter {} <p> 的第一行

讲了个 "书名号" 插入的方法

    <h1>我是谁</h1>

css 文件中

    h1::before {
    content: "《 ";
    color: red;
    }

    h1::after {
        content: " 》";
        color: red;
    }

样式优先级

讲了两个原则 :

先来后到

越具体的选择器优先级越高

提及优先级补救的方法

加 "!important"
p{
    background-color:light-blue !important;    
}

颜色

讲了颜色的两种表示方法

RGB 三者的范围都是 0~255

① ：六位16进制数表示 ( 每两位为一组 , 分别表示红黄蓝 )

p:nth-child (2)
{
    background-color : #ADD8E6;
}

② :

p:nth-child (3)
{
    background-color : rgb(173 , 216 , 230)
    /* ... : rgba(173 , 216 , 230 , 0.5) 最后一维表示透明度 */
}

技巧 : 如何获取自己想要颜色的 rgb 值

① : 在网页上 f12 + 箭头指向 , 快捷键为 ctrl + shtrt + c

② : qq截图工具 ( ctrl + alt + a 打开) , c 复制 rgb , ctrl + c 复制 rgb 的十六进制

$ 2022.8.5 $

$ 学习进度 : $

$ css(1) \ 01:10:02 $

选择器

作用 : 快速选择出来我们想要的标签

我认为就是对前 30分钟 更为细致的划分

 1 . 标签选择器

以 <div> , <span> 这些标签分类 , 在 css 文件下写下前置信息

div{
    width: 100px;
    height: 100px;
    background_color: lightblue;
    margin-bottom: 10 px; <!-- 每个 div 块之间预留 10 px 的位置 -->
}

 2 . id 选择器

在标签内加上 id 标志以便快速选择想要作用的标签

举例 : 

<div id="mydiv"> 

在 css 文件中

#mydiv{

 ```

}

注意一定要有 " # " , 这是 id 的标志

 3 . 类选择器

同理 id选择器 ：

<div class="mydiv">

在 css文件 中

.div{
 ...
}

注意 ".div" 里面是有 "." 的

id 选择器 和 类选择器在逻辑上是一致的 , 仅仅只有 人为定义 上的区别

1. 人为认定每个 id 是唯一的 , 也就是<div id=""> 后只能接一个 , 并且是唯一的 ( 其他标签不能用 ) .

2. 但同一个标签可以接受多个 class , 仅需空格隔开即可 , 即 <div class="mydiv big-tag">

伪类别选择器

引子 : 举例 web 评测器上 , 鼠标放上悬浮 html 图标会有变大的效果

实现 :

.effect:hover {
    transform: scale(1.2);
    transiton: 2s <!-- 2s的效果渐变过程 -->
}

这里就要提三种形式

① : 链接伪选择器

提及 ：color 是字体的颜色 , background-color 是背景的颜色

link ( 访问前 )
visited ( 访问后 )
hover ( 鼠标悬浮时 )
active ( 点击时 )
focus ( 聚焦时 )

link , visited 多用于链接

举例 :

<body>
    <a href="about.html">about</a>
    <a href="about1.html">about</a>

    <!-- about 是访问过的 , about1 是未访问过的 --> 
</body>

css 文件中

a:link {
    background-color: lightblue;
}

a:visited {
    background-color: red;
}

/* 注意格式 a:xxx , a 指 <a> , xxx 指 伪类别选择器*/

fouce 和 <input> 搭配有很好的效果

input:focus {
    background-color: lightblue;
    width: 100px;
}

hover , active 感觉应用很广.

② : 位置伪类选择器

直接举例 :

p:nth-child (2) //y总特意强调了要将 nth-child(2) 理解为布尔值 , 只有同时满足布尔值为 true 和 <p> 标签才执行 , 注意这里的 2 不是指 <p> 的第二个 , 而是整体的第二个.

更巧妙的用法 :

p:nth-child (odd) //奇数位
p:nth-child (even) //偶数位
p:nth-child (3n) // 3的倍数
p:nth-child (2n+1) // 2n+1形式 ( a*n + b )

③ : 目标伪类选择器

知识 : <a> 不仅可以链接到页面外也能链接到页面内

举例 ：

<a herf="#myp">我的标签</a>

...

<p id="myp"><\p> <!-- 会跳转到此处 -->


此时会触发目标伪类选择器 target (同样是一个 bool 值 , 用于判断当前元素是不是被指向 )

举例 :

P:target {
    width: 100px;
    background-color: orange;
    transition: 2s; //效果渐进的时间是 2s
}

$ 2022.8.3 $

今天去图书馆看一下书

明天应该会和朋友去玩

放松一下