第一个月第二周_学习html+css

黄桃罐头

已于 2024-07-27 17:53:40 修改

阅读量652

点赞数 9

文章标签： html css

于 2024-07-20 15:16:09 首次发布

本文链接：https://blog.csdn.net/qq_41510951/article/details/140431302

版权

调试技巧：
有删除线说明有相同的属性且优先级比你高

20240715周一
今天内容：
1解决作业问题
2阿里巴巴矢量图标库
3多背景属性
4定位
5元素类型

1.input默认自带边框，自带边框的宽度是2px，border-width:2px
Input默认点击轮廓（它是内边框），实现用户点击时不要边框：outline：none
img，input是行内块元素，以基线方式对齐。
二、多背景属性

<!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: 1000px;
            height: 600px;
            border: 1px solid red;
            background-image: url(images/phone_03.png),url(images/qf_code.jpg),url(images/qf_logo.jpg);
            background-repeat: no-repeat,no-repeat,no-repeat;
            background-position: left top,right top,center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

五、元素类型
一、块级元素类型的特点
1、常见的块级元素：div、p、h、ul、ol、li
常见的行内元素：span、a、b、i
常见的行内块元素：input、img
设置了浮动之后：元素转成行内块
弹性盒之后：元素转成？？
2、块级元素的特点
2.1 块级元素可以直接设置宽高大小并且通常是以矩形的方式在浏览器中显示出来
2.2 块级元素都是独占一行的,默认会上下排列
2.3 块级元素可以包裹行内元素或者其他元素类型作为网页布局的盒
二、行内元素的特点
1、常见的行内元素：span、a、b、i、em、strong
2、行内元素的特点
2.1 不可以直接设置宽高大小,宽高是由本身的内容决定的
2.2 行内元素会在一行内从左到右逐个显示
2.3 bug：在行内元素里面设置margin-top/bottom没有效果!!!
三、之前是可变元素(根据上下文关系元素类型会改变的),现在第三种元素类型可以理解为是行内块元素
1、常见的行内块元素：input、img
2、行内块的特点
2.1 可以直接设置宽高大小 => 块级元素
2.2 可以在一行内逐个显示 => 行内元素
3、行内块的bug：行内块元素都是以基线对齐的
4、解决基线对齐：vertical-align:top|bottom|middle
六、元素类型的转换
1、属性：display 显示方式
2、属性值：官方提供的属性值有19个
2.1 block：将其他元素转换为块元素,使其具有块元素的特点
2.2 inline：将其他元素转换为行内元素,使其具有行内元素的特点
2.3 inline-block：将其他元素转换为行内块元素,使其具有行内块元素的特点
2.4 none：删除、隐藏
3、可以将display:block和display:none放在一起使用：显示和消失
4、拓展：浮动元素/属性会默认把元素转换为行内块元素
七、动态伪类选择器的使用
伪类选择器权重：10
在这里插入图片描述
a:link {color: red;} /* 未访问的链接状态*/
a:visited {color: green;} /* 已访问的链接状态*/
a:hover {color: blue;} / 鼠标滑过链接状态/**
a:active {color: yellow;} /* 鼠标按下去时的状态*/
hover选择器的使用：改变自己的状态
hover：悬停或划过
1、给自己修改名字=>通过hover改变自己的状态 自己选择器:hover{声明}
2、通过爷爷给父亲改名字=>通过父级改变子级的状态 父级选择器:hover 子级选择器{声明}
3、+ 你的选择器:hover+相邻一个选择器{}
4、~ 你的选择器:hover~相邻一个选择器{}

20240716周二

一、文本溢出属性
overflow-x|overflow-y
1、属性:overflow
2、属性值：
2.1 hidden超出的文本直接隐藏起来。内容会被修剪，其余内容是不可见的
2.2 scroll 滚动,内容是否溢出都会有滚动条的样式
2.3 auto 自动

<!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: 300px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: auto;
        }
    </style>
</head>
<body>
    <!-- contenteditable="true" -->
    <div>
        自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信自信自信自信自信自自信自信
    </div>
</body>
</html>

二、生成省略号
单行省略号的生成需要以下四个条件：
1、容器宽度：width：value
2、文本强制在一行显示：white-space: nowrap;
3、溢出内容隐藏overflow: hidden;
4、溢出文本显示省略号 text-overflow: ellipsis;
多行省略，只需了解

<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: 300px;
            height: 400px;
            border: 1px solid #000;

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
    </div>
</body>

三、定位属性
定位属性在生活中的解释
1、需要设置定位的对象
2、需要移动位置的参照物
3、移动位置的方向和大小
属性：position
属性值：relative、absolute、fixed、sticky
一、"流"的概念
1、文档流：1楼
2、浮动流：2楼
3、定位流：3楼
二、相对定位的使用 position:relative
1、特点：相对定位的参照物是元素初始位置,不会脱离文档流
2、定位的方向设置：设置方向的时候不考虑和父级边框接触才可以设置方向移动(margin是需要的)
2.1 水平方向：数值
2.2 垂直方向：数值
3、相对定位的使用场景：相对定位主要是为了给绝对定位提供参照物
绝对定位的使用
1、属性和属性值：position:absolute
2、使用特点
2.1 如果父级元素中有定位属性那么绝对定位就是相对于父级元素进行移动的,如果父级没有定位属性会一直往上级查找,直至找到浏览器进行移动的
2.2 绝对定位是脱离文档流的
固定定位的使用
会脱离文档流，相对浏览器移动

<!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: 300px;
            height: 200px;
            background: pink;
            position: fixed;
            /* CSS3中的计算属性 calculate calc(计算公式) */
            /* top: calc(50% - 150px);
            left: calc(50% - 100px); */
            top: 0;right: 0;bottom: 0;left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <!-- 网页的广告弹窗、聊天窗口、登录注册 -->
    <!-- 相对于浏览器进行位置移动,脱离文档流的 -->
    <div></div> <div></div> <div></div> <div></div>
</body>
</html>

粘性定位的使用
不会脱离文档流，相对于浏览器移动

    <style>
        h1{
            width: 100%;
            height: 80px;
            background: skyblue;
            /* 相对于浏览器位置,不会脱离文档流 */
            /* fixed + relative */
            position: sticky;
            left: 0;
            top: 0;
        }
        div{
            width: 100%;
            height: 400px;
            background: pink;
        }
    </style>
</head>
<body>
    <div>广告4567656765678765678767876</div>
    <h1>导航</h1>
    <p>这是店铺信息000001</p>
    <p>这是店铺信息000002</p>
    <p>这是店铺信息000003</p>
    <p>这是店铺信息000004</p>

层叠属性z-index规定元素的显示层级关系，可以将当前盒子的层级提的更高
只能在定位环境下使用，如果父级容器没有设置定位属性，属性不生效
auto：默认值
number：设置元素的堆叠顺序

<!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{
            position: absolute;
        }
        .box1{
            width: 300px;
            height: 300px;
            background: green;
            z-index: 2;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: yellow;
            z-index:1 ;
        }
        .box3{
            width: 100px;
            height: 100px;
            background: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box1">博闻</div>
    <div class="box2">李宁</div>
    <div class="box3">仁洋</div>
</body>
</html>

四、自适应重点！！！！！！！！！！！！！！
概念：网页布局中经常要定义元素的宽和高，但很多时候我们更希望元素的大小能够根据窗口或子元素自动调整，这就是自适应，元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示
常见的块级元素：div、p、h、ul、ol、li
常见的行内元素：span、a、b、i
常见的行内块元素：input、img
一、宽度自适应使用的总结
浏览器是块级元素，默认宽度100%，默认高度是0

情况	宽度
块级元素	设置宽度100%或不写，宽度100%
子级元素是块级元素	设置宽度100%或不写，与父级等宽
当前元素没设置宽度，且脱离文档流	宽度由内容决定
行内块元素	宽度由内容决定

1、块级元素设置宽度为100%的时候会占满浏览器全屏(通栏效果)
2、块级元素不设置宽度的时候默认是100%的。块级元素不设置宽度的时候，0-100%的适应过程`
3、子级元素是块级元素不设置宽度的时候会和父级等宽
4、当块级元素不设置宽度的时候默认是100%会占满全屏但不设宽度设置高度设置了脱离文档流属性的时候,宽度是由内容决定的???最好写个例子=>总结：切记在实现布局的时候,每一盒子都要设置宽高大小

一、高度自适应使用的总结

情况	高度
设height：0	元素高度为0，设内容会超出容器
不写height或者设为auto或设为100%	设内容实现自适应，自动撑开盒子高度

1、浏览器的宽度默认是100%,但是高度默认是0,在设置全屏案例和移动端的时候需要设置html,body{height:100%}
2、关于height的设置
设为100%时是什么意思：相对于父级容器是百分之多少
2.1 height:0 没有高度
2.2 height:auto 表示自动,有内容会自动撑开盒子的高度
2.3 height:不写自适应,和auto是一样的:
每日回顾里面说的：height设为auto或者不写的时候，是可以做到自适应的。
这张图片要背

20240717周三

一、高级选择器

1、属性选择器：选择到标签中的属性进行设置权重10
1、语法：标签名字[attr=‘value’] 或 标签名字[属性名字=‘属性值’]即有两个input标签，通过type=“text”选择到其中一个标签
2、解释：[]表示选择属性,attribute
2、结构选择器的使用(所有标签都是一样的时候)
1、选择器的集合:frist-child{} 第一个
2、选择器的集合:last-child{} 最后一个
3、选择器的集合:nth-child(序号){} 第几个子级(从前往后)
4、选择器的集合:nth-last-child(){} 第几个子级(从后往前)
二、结构选择器的使用**(标签不一样的时候：先筛选一遍把相同的标签组成一个集合,再从这个集合中选择到对用的标签**)
1、选择器的集合:frist-of-type{} 第一个
2、选择器的集合:last-of-type{} 最后一个
3、选择器的集合:nth-of-type(序号){} 第几个子级(从前往后)
4、选择器的集合:nth-last-of-type(){} 第几个子级(从后往前)

二、弹性盒

元素类型	功能
块级元素	划分区域
行内	包裹文本
表格	用于数据
定位	确定元素位置

确定盒子位置有三种方法：float position 弹性盒
一、弹性盒的认识 不脱离文档流
1、作用：是可以实现自适应布局，通过父级元素控制子级元素的排列位置
2、容器：在某一个盒子上设置形成弹性盒的属性就叫做容器(父级元素)
3、项目：在弹性盒下面的直接子级元素叫做项目(子级元素)
二、如何形成弹性盒
1、属性和属性值：display：flex 设置在父级元素上
3、弹性盒的使用特点
3.1 设置了弹性盒后,在父级元素中会出现主轴和侧轴的概念,默认的主轴方向是水平方向(X轴)，所有的项目默认都会在主轴上排列
3.2 主轴和侧轴是相对应的关系,主轴是可以修改的
3.3 在弹性盒环境下,所有的标签都可以不考虑元素类型直接设置宽高大小 即行内元素想设置宽高大小，父级元素需设置了弹性盒
3.4 实现居中方式：margin:auto
3.5 在弹性盒环境下如果元素不设置宽高大小,元素高度默认是拉伸的
4、弹性盒与之前布局使用的区别
4.1 在弹性盒里面浮动是不可以使用的(弹性盒是不存在脱离文档流、高度塌陷)
4.2 定位和盒模型是可以使用的
三、弹性盒中的属性非常多
1、设置在父级元素上的：控制所有的元素位置
2、设置在子级元素上的：控制单个的元素位置
--------------------------------------------------------------设置在父级元素上的属性----------------------------------------------
一、修改弹性盒的默认主轴方向
1、属性：flex-direction
2、属性值
2.1 row 行,默认的主轴是X轴,对应的侧轴是Y轴
2.2 column
二、主轴上的排列方式

属性	属性值和功能
justify-content	flex-start、flex-end、center、space-between、space-around、space-evenly
align-items
flex-wrap	wrap、nowrap
align-content

1、属性：justify-content
2、属性值
2.1 flex-start|flex-end|center 从开始|结束|中间位置排列
2.2 space-between 元素两端对齐,其余空间自动分配
2.3 space-around 元素左右间距相等
2.4 space-evenly 元素所有的间距是完全相等的
三、侧轴上的对齐方式
1、属性：align-items
2、属性值
2.1 flex-start|flex-end|center 从开始|结束|中间位置排列
2.2 stretch 不设置高度默认值
2.3 baseline 基线对齐(特殊情况)
四、换行属性(弹性盒项目的宽度如果大于容器的宽度不会往下掉,默认是进行挤压的)
1、属性：flex-wrap
2、属性值：默认nowrap | wrap
五、换行之间行与行之间的间距设置
1、属性：align-content
2、属性值
2.1 flex-start|flex-end|center 从开始|结束|中间位置排列 flex-start取消换行之间的间距
2.2 space-between 两端对齐,其余空间自动分配
2.3 space-around 元素左右间距相等
2.4 space-evenly 所有的间距是完全相等的
---------------------------------------------------------------设置在子级元素上的属性--------------------------------------
一、order属性：控制弹性盒中项目的显示顺序(类似于定位中的层叠属性)
1、属性值：数字,数字越大,显示顺序靠后
二、设置单个元素的侧轴对齐方式
1、侧轴对齐方式：align-items(所有)
2、侧轴对齐方式：align-self(单个)

写作业：行内块和行内块元素是以基线对齐的
腾讯大学思路

20240718周四

一、弹性盒
空间分配属性(弹性盒环境下使用)
1、属性：flex
2、属性值：数字
常用flex：1
2、flex属性表示将当前的空间分配成多少份,属性值可以设置为数字,常用的设置是1(占据主轴上剩下的空间)
flex：1的作用1.占据主轴上剩余的空间 2.???当主轴内容过多的时候，会把当前空间撑大???解决方法：在flex：1的标签内部写一个overflow:auto,即直接设置一个滚动的区域
二、响应式布局怎么写。一套代码可以适配多个终端
满足三个条件就称为响应式布局：
1、网站建立了灵活的布局基础
2、应用到网站的图片必须是可伸缩的
3、不同的终端，需要在media上设置不同的样式
实现响应式布局，有一个很重要的概念：断点
1、断点是响应式设计的构建块，使用断点来控制何时在屏幕上调整大小
2、使用媒体查询按断点构造css，媒体查询是css 的一项功能，可让你根据一组浏览器和操作系统参数有条件的应用样式

20240719周五

第一种移动端布局
一、媒体查询：检测设备的特性,不同的设备设置相对应的css样式
1、语法：@media 用户的设备连接符号 (设备特性){}
2、解释
2.1 @media 表示媒体查询
2.2 用户的设备 screen屏幕、all所有
2.3 连接符号 and 和、以及 (也可以叫做操作符,是还有很多其他的操作符可以使用 not、only)
2.4 (设备特性) 检测的是用户屏幕大小 min-width、max-width
2.5 {} 使用的是css代码
3、标准语言：@media all and (min-width:300px) and (min-width:500px){}
4、媒体查询使用的注意点：建议书写在样式表的最下面(权重)、每个单词之间需要空格、麻烦、有误差(电脑)。
一、移动端的单位：rem 相对于根元素计算的单位
1、常见的移动端有三种代表
1.1 小屏手机 iphone5 320px => html{font-size:12px}
1.2 中屏手机 iphone6 375px => html{font-size:14px}
1.3 大屏手机 iphone plus 414px => html{font-size:16px}
2、文本16px直接设置符不符合移动端布局,将px单位设置为rem单位
3、如果将div的文本大小设置为1rem,那么在不同机型中大小分别是：12px、14px、16px
4、考虑如果设计图字体大小事24px,考虑怎么把24px转换为相对应的rem?
二、rem单位推算的过程
1、官方公式：dpr = 物理像素 / 逻辑像素
1.1 dpr 设备像素比：设计师给你的设计图大小/设备大小 640px/320px=2 | 750px/375px=2 | 1080px/414px≈3
1.2 物理像素：设计图的大小
1.3 逻辑像素：设置的CSS大小
2、从官方公式中进行推算得到：逻辑像素= 物理像素 / dpr
3、例子：设计图的宽度是640px,在设计图中有头部导航,高度是88px,问当前在css中应该设置为多少的值可以做到移动端布局大小?
解答：88px / 2 = 44px 得到的这个值是逻辑像素,能直接把这个值设置在代码中吗? 如何把44px转换为相对应的rem的数值呢?
接下来考虑把44px/12px = 3.67rem
三、关于第一种移动端布局方式的总结
第一步：设置常见机型的媒体查询根目录大小
1.1 小屏手机 iphone5 320px => html{font-size:12px}
1.2 中屏手机 iphone6 375px => html{font-size:14px}
1.3 大屏手机 iphone plus 414px => html{font-size:16px}
第二步：计算公式拿到设计图的大小量出物理像素把物理像素/2/相对应根元素的大小 = ?rem
在这里插入图片描述
以下标签是专门用于移动端布局的