第三周学习笔记

最新推荐文章于 2024-06-15 09:59:21 发布
最新推荐文章于 2024-06-15 09:59:21 发布
阅读量84 收藏
点赞数
文章标签： 学习 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74285167/article/details/127597513
版权

二十五、CSS选择器

1. 标签选择器(tag选择器)

div{}       <div> </div>

使用的场景：

  1. 去掉某些标签的默认样式时
  2. 复杂的选择器中，如 层次选择器

2. 群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

3. 通配选择器

*{   } →div,ul,li,p,h1,h2…

注：尽量避免使用通配选择器

使用场景：去掉所有标签的默认样式

4. 层次选择器

后代 M N { }当前M后面的所有N标签
父子M > N{ }当前M标签下面的一层N标签
兄弟M ~ N{ }当前M下面的所有兄弟N标签
相邻M + N{ }当前M下面的相邻的N标签

5. 属性选择器

  1. M [attr] { }
  2. = : 完全匹配
  3. *= : 部分匹配
  4. ^= : 起始匹配
  5. $= : 结束匹配
  6. [ ] [ ] [ ] : 组合匹配

6. 伪类选择器

CSS伪类选择器用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。
M : 伪类 { }
:link        访问前的样式 （只能添加给a标签）
:bisited   访问后的样式（只能添加给a标签）
:hover    鼠标移入时的样式 （可以添加给所有标签）
:active     鼠标按下时的样式（可以添加给所有标签）

注：

  1. link visited 只能给a标签添加，hover和active可以给所有标签添加。
  2. 如果四个伪类都能生效，一定要注意顺序：L V H A
  3. 一般网站只设置       a{ } a:hover{ }

:after、:before 通过伪类的方式给元素添加一段文本内容
:checked、:disabled、:focus(获取光标时添加的样式)    都是针对表单元素的

例：

<!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>
        a:link{color: red;}
        a:visited{color: blanchedalmond;}
        a:hover{color: yellow;}
        a:active{color: green;}
        :disabled{width: 100px;height: 100px;}
        :focus{color: blue;}
        :checked{width: 100px;height: 100px;}
    </style>
    </head>
<body>
    <a href="#" >aaaaaaa</a>
    <input type="checkbox"  disabled>
    <input type="checkbox" checked>
    <input type="text" focus>
</body>
</html>

显示效果：
在这里插入图片描述

结构性伪类选择器

nth-of-type()
nth-child()
角标是从1开始的，1表示第一项，2表示第二项，n值表示从0到无穷大

  • first-of-type
  • last-of-type
  • only-of-type

例：

<!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>
        li:first-of-type{background-color: blue;}
        li:nth-of-type(2n+3){background-color:greenyellow;}
         li:nth-of-type(2n){background-color: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

显示效果：
在这里插入图片描述

二十六、CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性）
例：

<!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{width: 100px;height: 100px;border: 2px red solid;font-size: 10px   ;}
        p{border: inherit;}
    </style>    
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

效果：
在这里插入图片描述

二十七、CSS优先级

1. 相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议重复设置样式的情况。

2. 内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

3. 单一样式优先级

style行间 > id > class > tag > * > 继承

注：
style行间    权重 1000
id                权重 100
class           权重 10
tag               权重 1

4. !important

提升样式优先级，非规范方式，不建议使用。

不能针对继承的属性进行优先级的提升

5. 标签+类与单类

标签+类 > 单类

6.群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。

7. 层次优先级

  1. 权重比较
    ul li .box p input { }       权重：1+1+10+1+1
    .hello span #elem{ }     权重：10+1+100

  2. 约分比较 （约去相同优先级的标签）
    ul li .box p input { } → li p input{ }
    .hello span #elem{ } → #elem{ }

二十八、CSS盒子模型

1. 组成：content→padding→border→margin

                     物品             填充物            包装盒       盒子与盒子之间的间距

  • centent：内容区域 width和height组成的
  • padding：内边距（内填充）
         只写一个值：30px（上下左右）
         写两个值：30px 40px （上下、左右）
         写四个值：30px 40px 50px 60px （上、下、左、右）
      单一样式只能写一个值：
          padding-left
          padding-right
          padding-top
          padding-bottom
  • margin：外边距（外填充）
         只写一个值：30px（上下左右）
         写两个值：30px 40px （上下、左右）
         写四个值：30px 40px 50px 60px （上、下、左、右）
      单一样式只能写一个值：
          margin-left
          margin-right
          margin-top
          margin-bottom

注：

  1. 背景颜色会填充到margin以内的区域（不包括margin区域）。
  2. 文字会在content区域。
  3. padding不会出现负值，margin是可以出现负值的。
    在这里插入图片描述

2. box-sizing

盒尺寸，可以改变盒子模型的展示形态。
默认值： content-box：width、height → content
border-box：width、weight → content padding border

使用场景：

  1. 不用计算一些值
  2. 解决一些百分比的问题

3. 盒子模型的一些问题：

margin叠加问题

出现在上下margin同时存在的时候。会取上下中较大的作为叠加的值。

解决方案：

  1. BFC规范
  2. 想办法只给一个元素添加间距。

margin传递问题

margin的传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案：

  1. BFC规范
  2. 给父容器加边框
  3. margin换成padding

4. 扩展

  1. margin左右自适应是可以的，但是上下自适应是不行的。（实现上下自适应，在第二大部分）
  2. width、height不设置的时候 ，对盒子模型的影响，会自动去计算容器的大小，节省代码。

5. 嵌套盒子的练习

<!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>
         #box1{width: 350px;height: 350px;border: 1px black dashed; padding:27px;}
         #box2{border: 5px #d7effe solid; padding: 20px;}
         #box3{background: #ffa0df;padding: 41px;}
         #box4{border: 1px white dashed; padding: 3px;}
         #box5{border: 1px white dashed; padding: 49px;}
         #box6{width: 100px;height: 100px;background-color: #96ff38;border: #fcff00 5px solid;}
    </style>
</head>
<body>
         <div id="box1">
            <div id="box2">
                <div id="box3">
                    <div id="box4">
                        <div id="box5">
                            <div id="box6"></div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
</body>
</html>

显示效果：
在这里插入图片描述

二十九、标签分类

1. 按类型

block: div、p、ul、li、h1……

  1. 独占一行
  2. 支持所有样式
  3. 不写宽的时候，跟父元素的宽相同
  4. 所占区域是一个矩形

inline: span、a、em、strong、img……

  1. 挨在一起的（不独占一行）
  2. 有些样式不支持，例如：width、height、margin、padding
  3. 不写宽的时候，宽度由内容决定
  4. 所占的区域不一定是矩形
  5. 内联标签之间会有空隙，原因：换行产生的

inline-block: input、select……

  1. 挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

2. 按内容

flow：流内容
metadata：元数据
sectioning：分区
heading：标签
phrasing：措辞
enbedded：嵌入的
interactive： 互动的

3. 按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input…
非替换元素：将内容直接告诉浏览器，将其显示出来。
div、h1、p…

三十、显示框类型

display : block inline inline-block none…

区别：

display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏

三十一、标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

1. 块标签可以嵌套内联标签

<div>
    <span></span>
    <a href=""></a>
   </div>

2. 块标签不一定能嵌套块标签

 <div>
        <div></div>
   </div>

有特殊情况，错误的写法：

  <p>
    <div></div>
  </p>

3. 内联标签不能嵌套块标签

错误的写法：

<span>
    <div></div>
</span>

特殊：
a标签是一个例外

<a href="">
    <div></div>
</a>

三十二、溢出隐藏

overflow:

  • visible
  • hidden：隐藏溢出的部分
  • scroll：出现滚动条
  • auto：根据情况出现滚动条
  • x轴、y轴 :overflow-x、overflow-y：针对两个轴分别设置

三十三、透明度与手势

1. 透明度：

opacity：0（透明）~1（不透明）
注：占空间、所有的子内容也

rgba()：0~1
注：可以让指定的样式透明，而不影响其他样式

2. 手势：

cursor：手势

defult：默认箭头

要实现自定义手势：
    准备图片：.cur、.ico

cursor：url( ),auto;

三十四、最大、最小宽高

min-width、min-height
max-width、max-height

百分比单位：换算→以父容器的大小进行换算的

一个容器这么适应屏幕的高：容器加height:100% ; body:100% ;

html,body{height:100%}
.container{height:100%}

三十五、CSS默认样式

有些标签有默认样式，有些没有默认样式

没有默认样式：div、span…

有默认样式：
body→margin：8px
h1→margin：上下 21.440px
        font-weight : bold
p→margin：上下 16px
ul→margin：上下 16px     padding：左 40px
      默认点：list-style : disc
a→text-decoration：underline

CSS reset:

*{ margin : 0; padding : 0; }
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微影响性能

ul{ list-style : none; }

a{ text-decoration : none ; color : #999 ; }

img{ display : block ; }
         问题的现象：图片跟容器底部有一些空隙。
         内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
         vertical-align:baseline; 基线的对齐方式，默认值
         img{ vertical-align : bottom; }解决方式是推荐的

写具体页面的时候和一个布局效果的时候：

  1. 写结构
  2. CSS重置样式
  3. 写具体样式

三十六、float浮动

脱离文档流，沿着父容器靠左或靠右进行排列。
left、right、none

1. float注意点

  • 只会影响后面的元素。
  • 内容默认提升半层。
  • 默认宽根据内容决定。
  • 换行排列（放不下的时候换行排列）
  • 主要给块元素添加，但也可以给内联元素添加。

2. 如何清除浮动

上下排列：

clear属性，表示清除浮动的，left、right、left

嵌套排列：

  • 固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
  • 父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
  • overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。
  • display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
  • 设置空标签：不推荐，会多一个标签。
  • after伪类：推荐，是空标签的加强版，目前各大公司的做法。

注：clear属性只会操作块标签，对内联标签不起作用

小练习：
在这里插入图片描述
代码：

<!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>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #666;}
        h1,h2,h3{font-size: 16px;}
        .l{float: left;}
        .r{float: right;}
        .clear:after{content:"";display: block;clear: both;}
        #main{width:366px;margin: 20px auto;}
        #main.title{height: 23px;line-height: 23px;font-size: 12px;padding: 30px;
        background:url() no-repeat 6px 4px,url() repeat-x;}
        #main ul{overflow: hidden;margin-top: 13px;}
        #main li{margin-bottom: 22px;}
        #main .pic{width: 99px;border: 1px solid #c8c4d3;}
        #main .pic img{margin:2px;}
        #main .content{width: 240px;margin-left: 13px;}
        #main .content h2 {font-size: 12px;line-height: 24px;}
        #main .content p {line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
        <h2>外媒评论精选</h2>
            <ul>
                <li class="clear">
                    <div class="l pic">
                        <a href="#">
                            <img src="" alt="">
                        </a>
                    </div>
                    <div class="content">
                        <h2>测试标题</h2>
                        <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落
                            <a href=""></a>
                        </p>

                    </div>
                </li>
                <li class="clear">
                    <div class="l pic">
                        <a href="#">
                            <img src="" alt="">
                        </a>
                    </div>
                    <div class="content">
                        <h2>测试标题</h2>
                        <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落
                            <a href=""></a>
                        </p>

                    </div>
                </li>
                <li class="clear">
                    <div class="l pic">
                        <a href="#">
                            <img src="" alt="">
                        </a>
                    </div>
                    <div class="content">
                        <h2>测试标题</h2>
                        <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落
                            <a href=""></a>
                        </p>

                    </div>
                </li>
            </ul>
    </div>
</body>
</html>
m0_74285167
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript第三周学习笔记
shenlangzhoa的博客
03-28 964
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> 1.输入框 prompt('请输入你的年龄：'); 2.弹出一个警示框 ...
机器学习西瓜书第二周学习笔记
01-23
机器学习西瓜书第二周学习笔记 机器学习西瓜书第二周学习笔记中涵盖了机器学习的基础知识和重要概念。在本周的学习中，我们将了解机器学习的定义、类型、应用场景和常见算法。 首先，让我们从机器学习的定义开始。...
Python第三周学习笔记
JYZ818的博客
05-06 195
第三周HTML学习笔记
jiuqian123的博客
10-29 68
列表 表单 Label
Python第六周学习笔记
2302_76661658的博客
11-27 364
目录:1.函数的多返回值 2.函数的多钟传参方式3.匿名函数。
Python第五周学习笔记
2302_76661658的博客
11-27 359
本质是将容器内的元素进行排序，完了后放在一个列表里，默认是从小到大排序，reverse表示反转，加上后表示从大到小排序。(根据字符串中每个字符对应的码值，来比较)
Python第一周学习笔记
weixin_67811478的博客
03-21 514
安装教程其实也不难，可以在官网上下载就好啦，但要记得配置好环境噢（建议安装的时候勾选Add Python 3.x to PATH 即直接添加环境变量了，不用手动添加啦），否则会频频报错。以上就是这一周我的全部笔记啦，其实说实话第一周并没有要求我们自己写这些小项目，只是要我们先从敲代码开始，熟悉我们的软件操作有助于后面更好的学习，我今天也有好好学代码噢，慢慢加油吧！这学期开始学习Python语言啦，感觉很有趣，就在课后整理了一些小笔记，希望记录下来以后也能复习一下下。废话不多说，上笔记！
第3周学习笔记：ResNet+ResNeXt
qq_45358370的博客
07-27 636
一 理论学习 1. ResNet 2.resnetx 二 代码学习 1.LeNet 2.ResNet 三 问题
吴恩达机器学习第三周学习笔记及编程作业答案
mysky54的博客
04-09 1453
吴恩达机器学习第三周学习笔记及编程作业答案 一、理论基础 逻辑回归(Logistic Regression) 1. 分类问题 我们将因变量(dependent variable)可能属于的两个类分别称为负向类和正向类，其中 0 表示负向类，1 表示正向类 逻辑回归算法的性质是：它的输出值永远在 0 到 1 之间，逻辑回归算法实际上是一种分类算法。 2. 假说表示 逻辑回归模型的假设是：其中...
20165326 java第三周学习笔记
03-18 83
纸质学习笔记 代码托管 转载于:https://www.cnblogs.com/Czzzz/p/8597524.html
2022吴恩达机器学习课程学习笔记（第一课第三周）
Yang0114_的博客
10-24 1042
2022吴恩达机器学习课程学习笔记（第一课第三周）
第一周第三天的学习笔记
03-22
第一周第三天的学习笔记
第9周学习笔记1
08-03
1.为什么引入RNN 2.RNN的基本结构 1.学习门 2.遗忘门 3.记忆门 4.输出门 5.总体结构 1.完整代码 2.实验结果 3.代码分析
第八周学习笔记1
08-03
1.大数据与少标注的矛盾 2.大数据与弱计算的矛盾 3.普世化模型与个性化需求的矛盾 4.特定应用的需求
Java学习第三周笔记总结
09-14
这周有一个简单的项目实战，只是简单的去实现要求和功能，熟悉之前所学习的知识以及应用，还包括类和对象，方法和方法重载等相关内容。
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
最新发布
limengshi138392的博客
06-15 840
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
如何学习Golang语言!
FengyangCoder的博客
06-09 434
起源与设计哲学：Go语言由Robert Griesemer、Rob Pike和Ken Thompson三位Google工程师设计，旨在解决现代编程中的一些常见问题，如编译速度、运行效率和并发编程。主要特点：Go语言的语法简单、编译速度快、运行效率高，支持静态类型和内存安全，具有垃圾回收功能，并且原生支持并发编程。
STM学习记录（四）———中断及NVIC
qq_63556165的博客
06-14 504
一个学习32单片机的小白~ 有问题评论或私信指出~提示：以下是本篇文章正文内容，下面案例可供参考在主程序运行过程中，出现了特定的中断触发条件（中断源），使得CPU暂停当前正在运行的程序，转去处理中断程序，处理完成后又返回被暂停的位置继续执行。1.中断就相当于我们人在处理事情时会先选择重要的事情去做处理完之后回到被打断的事情继续执行。
扩展学习|风险管理的文献综述汇总（持续更新向）
weixin_63253486的博客
06-10 786
本片博客主要介绍风险管理领域本人所看到的一些有意思的文章，并就风险管理领域的相关内容进行一个分享。
马哥linux学习笔记
08-31
马哥Linux学习笔记是一份关于Linux基础入门及安装系统、文件目录的学习资料。这份学习笔记涵盖了Linux开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL的区别，FHS（文件系统层次标准）的定义以及Linux手册的不同...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值