Web CSS笔记3

一、边框弧度

使用它你就可以制作盒子边框圆角

border-radius:
1个值四个圆角值相同
2个值 第一个值为左上角与右下角,第二个值为右上角与左下角
3个值第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
4个值 左上角,右上角,右下角,左下角。
属性描述
border-radius所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius定义了左上角的弧度
border-top-right-radius定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 50px;
            background-color: aqua;
            border-radius: 25px;
            border-top-right-radius: 70px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 border-radius: 0.5*h;       ---》变成一个胶囊

 border-radius: 50%;        ---》变成一个圆

斜杠'/'前设置水平半径,斜杠'/'后设置垂直半径,参数之间以空格隔开。

border-radius:参数释义
 border-radius: 100px/50px; 四角的水平半径为100px,垂直半径为50px
 border-radius: 50px 20px/30px 60px;①左上与右下圆角 ②左下与右上圆角
 border-radius: 50px 20px 20px/30px 60px 40px; ①左上 ②左下与右上圆角 ③右下
 border-radius: 10px 20px 20px  10px/10px 10px 20px 10px;①左上②右上③右下④左下      
图片来自​​​​​​http://segmentfault.com/a/1190000041261333

二、盒子阴影

box-shadow:  x轴的偏移量  y轴的偏移量  模糊的半径  扩散的半径  阴影颜色  内/外阴影

/* x轴的偏移量 y轴的偏移量必须写 */

描述
x-shadowx轴的偏移量,必需,可以为负值
y-shadowx轴的偏移量,必需,可以为负值
blur模糊的半径,不可以为负值
spread扩散的半径,不可以为负值
color 阴影颜色
insert内阴影(inset)/外阴影(outset)默认
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            box-shadow: 5px 2px 10px 10px black inset;
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

三、文字阴影

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

描述
x-shadowx轴的偏移量,必需,可以为负值
y-shadowx轴的偏移量,必需,可以为负值
blur模糊的半径,不可以为负值
color 阴影颜色
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-shadow: 5px 5px 3px pink;
        }
    </style>
</head>

<body>
    <p>
        ncjdncjdc
    </p>
</body>
</html>

四、列表属性

list-style 属性是一个简写对属性集合,

  • 包括 list-style-type 和 list-style-image与list-style-position。

list-style-image:指定一个能用来作为列表元素标记的图片。

  • list-style-image: url("图片路径");
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    ul{
        margin: 0 200px;
        display: block;
        list-style-image: url("../img/鲁迅.jfif");
        list-style-position: inherit;
}
    </style>
</head>

<body>
      <ul>
        List 3
        <li>List Item 3-1</li>
        <li>List Item 3-2</li>
        <li>List Item 3-3</li>
      </ul>
</body>
</html>

list-style-position:指定标记框在主体块框中的位置

  • list-style-position:inside       标记框位于主体块框外部。
  • list-style-position:outside     标记框是主体块框中的第一个内联框,之后是元素的内容。
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .one {
        list-style: square inside;
}

    .two {
        list-style-position: outside;
        list-style-type: circle;
}
    </style>
</head>
<body>
    <ul class="one">
        List 1
        <li>List Item 1-1</li>
        <li>List Item 1-2</li>
        <li>List Item 1-3</li>
        <li>List Item 1-4</li>
      </ul>
      <ul class="two">
        List 2
        <li>List Item 2-1</li>
        <li>List Item 2-2</li>
        <li>List Item 2-3</li>
        <li>List Item 2-4</li>
      </ul>
</body>
</html>

 


list-style-type:列表样式类型 

list-style-type:列表样式类型描述
list-style-type: none;不显示列表项的标记。
list-style-type: disc; 实心圆点 (默认值)
list-style-type: circle;  空心圆点
list-style-type: square; 实心方块
list-style-type: decimal; 十进制阿拉伯数字
list-style-type: cjk-decimal;汉十进制数,例如一,二,三,...,九八,九九
list-style-type:upper/lower-roman;大小写罗马数字编号
list-style-type:upper/lower-greek;大小写希腊数字编号
list-style-type: "-";字符编号
list-style-type: simp-chinese-informal;简体中文非正式编号。 一万一千一百一十一
list-style-type: simp-chinese-formal ;简体中文正式编号,例如壹万壹仟壹佰壹拾壹
list-style-type: trad-chinese-informal;繁体中文非正式编号, 例如一萬一千一百一十一
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            width: 200px;
            height: 200px;
            background-color: aqua;
            list-style: none;
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
    </ul>
</body>
</html>

五、resize

resize 用于设置元素是否可调整尺寸,以及可调整的方向,常见的textarea尺寸就是会变的

resize 不适用于下列元素:

  • 内联元素
  • overflow 属性设置为 visible 的块元素

参数描述
none元素不提供用户可控的调整其尺寸的方法。
both元素显示可让用户调整其尺寸的机制,可沿水平和竖直方向调整尺寸。
vertical元素显示可让用户沿竖直方向调整其尺寸的机制。
horizontal元素显示可让用户沿水平方向调整其尺寸的机制。
<textarea  style="resize: none;"></textarea>


六、浮动

  • 浮动最早是用来控制图片,以便达到其他元素(特别是文字)实现“环绕”图片的效果。
  • 之后发现浮动有个特性:就是让任何盒子可以一行排列,因此用浮动的特性来布局了

① “环绕”图片的效果

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .dad{
           width: 400px;
           height: 400px;
           background-color: aqua;
       }
       img{
           display: block;
           width: 100px;
           height:100px;
           float: right;
       }
    </style>
</head>
<body>
    <div class="dad">
        <img src="../img/鲁迅.jfif" alt="">
         《朝花夕拾》原名《旧事重提》,是现代文学家鲁迅的散文集,收录鲁迅于1926年创作
           的10篇回忆性散文, [1]1928年由北京未名社出版,现编入《鲁迅全集》第2卷。
        此文集作为“回忆的记事”,多侧面地反映了作者鲁迅青少年时期的生活,
        形象地反映了他的性格和志趣的形成经过。前七篇反映他童年时代在绍兴的
        家庭和私塾中的生活情景,后三篇叙述他从家乡到南京,又到日本留学,
        然后回国教书的经历;揭露了半殖民地半封建社会种种丑恶的不合理现象,
        同时反映了有抱负的青年知识分子在旧中国茫茫黑夜中,不畏艰险,寻找
        光明的困难历程,以及抒发了作者对往日亲友、师长的怀念之情 [2]。
        文集以记事为主,饱含着浓烈的抒情气息,往往又夹以议论,做到了抒情、
        叙事和议论融为一体,优美和谐,朴实感人。作品富有诗情画意,又不时穿
        插着幽默和讽喻;形象生动,格调明朗,有强烈的感染力
    </div>
</body>
</html>
标准流父盒子 有文字,会包围浮动盒子

②盒子可以一行排列

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
       .box2{
            width: 200px;
            height: 200px;
            background-color: brown;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
</body>
</html>
全部盒子加了float: left; 之前全部盒子加了float: left; 之后

浮动设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。

选择器{float:属性值;}
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动(默认值)
  •  浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。
  •  浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 
  • 浮动的元素会具有行内块元素的特性
  • 首先浮动的盒子需要和标准流的父级搭配使用
  • 若浮动盒子下有一个标准流盒子,盒中有文字,会尽量显示出来
  • 若标准流父盒子有文字,会包围浮动盒子
  • 浮动的元素排列位置:

        跟上一个元素(块级)有关系。

  1. 如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;
  2. 如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。

③哥哥浮动盒子飘在弟弟标准流盒子的上面不占位置

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box2{
            width: 90px;
            height: 90px;
            background-color: brown;
            float: left;
        }

        .box3{
            width: 150px;
            height: 120px;
            background-color: yellow;
        }
    </style>
</head>
<body>
            <div class="box2">2222</div>
            <div class="box3">3333</div>
</body>
</html>

④弟弟浮动盒子在哥哥标准流盒子下面飘不上去,哥哥占了位置

     .box2{
            width: 90px;
            height: 90px;
            background-color: brown;
        }

        .box3{
            width: 150px;
            height: 120px;
            background-color: yellow;
            float: left; 
        }

<!DOCTYPE html>
<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: aqua;
            float: left;
        }

        .out {
            width: 800px;
            height: 400px;
            background-color: brown;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: pink;
            float: right;
        }
    </style>
</head>

<body>
    <div class="out">
        <div class="box1">1111111</div>
        <div class="box2">2222</div>
    </div>
</body>

</html>

七、浮动的问题

问题1、

解决方法 1

  1. 给父盒子设置高度
  2. 让父盒子浮动
  3. 保证父盒子是块元素的前提下,在父盒子后面加上伪元素选择器,其次写上clear:both clear:both----》 消除浮动的影响
  4. 父级添加overflow属性:给父级添加: overflow为 hidden|auto|scroll  都可以实现

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father {
            width: 700px;
            background-color: aqua;
        }

        .left {
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
        .father::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
    </div>
</body>

</html>
解决问题前解决问题后

 clear 的属性值

属性值描述
left不允许左侧有浮动元素(清除左侧浮动的影响)
right不允许右侧有浮动元素(清除右侧浮动的影响)
both同时清除左右两侧浮动的影响

问题2、

 浮动盒子遮挡住标准流盒子

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
   
        .f{
            width: 500px;
            height:500px;
            background-color: blue;
            float: left;
        }

        p {
            background-color: aqua;
            clear: both; 
        }
        /* p::before {
            display: block;
            content: "";
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="f">
    </div>
    <p>mckdmckdmckdcmddkcmdkcmdkdfghjk</p>
</body>
</html>

解决方法2 

1、  p {

         clear: both;

        }

2、p::before {

            display: block;

            clear: both;

        } 

解决问题前
解决问题后

八、flex布局

弹性盒子的特点就是

  • 默认父盒子成为弹性容器的时候,中的子盒子会会变成弹性盒子,在一行排列
  • 若子盒子没有给高度,会自动延伸成父元素高度


            主轴:默认在水平方向
            测轴:默认在垂直方向
            子元素可以自动挤压和延伸

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: aqua;
            margin: 0 auto;

        }

        li {
            list-style: none;
            width: 100px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        
    </ul>
   </body>
</html>
******子元素设高度******
有高度时前提下,li 盒子在有设宽度的情况下,自动挤压和延伸

有高度时前提下,li 盒子在有设宽度的情况下,增加了一堆 li 盒子,发现,对子元素设宽度作用不大

******子元素不设高度,会自动延申到父盒子宽度******
没有高度时前提下,li 盒子在有设宽度的情况下,没有自动挤满父盒子宽度

没有高度时前提下,li 盒子在没有设宽度的情况下,增加了一堆 li 盒子,没有自动挤满父盒子宽度


八.1、主轴上的对齐方式

主轴:默认在水平方向

​<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: aqua;
            margin: 0 auto;

        }
        li {
            width: 100px;
            height: 180px;
            list-style: none;
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
       
    </ul>
   </body>
</html>

    </ul>
</body>
</html>

对齐方式在父盒子里面写

主轴对齐方式默认从左开始 :

justify-content: flex-start;

从后面开始:justify-content: flex-end;

两边贴边中间平分

justify-content: space-between;

弹性盒子与弹性盒子之间的距离相等,

justify-content: space-around

弹性盒子与弹性盒子之间的距离相等,

弹性盒子与弹性容器之间的距离相等

justify-content: space-evenly

居中

justify-content: center

八.2、侧轴上的对齐方式

测轴:默认在垂直方向

还是上面的初始盒子 

初始默认在上面:align-items: start;从末尾排起:align-items: end;
 在中间:align-items: center;

挑选其中一个子盒子单独设置

 ul li:nth-child(3) {  align-self: center;  }


八.3、修改主轴方向

还是上面的初始盒子 ,只不过高度改长

主轴方向默认水平从左到右

主轴方向改为水平方向,从右到左

flex-direction: row-reverse

主轴方向改为垂直方向,从上到下

flex-direction: column;

主轴方向改为垂直方向,从下到上

flex-direction: column-reverse

八.4、弹性伸缩比

在我们不确定宽度时,可以利用比例来让弹性盒子宽度自由变换

 /* 整数:占用父级剩余尺寸的分数 */

子盒子写 flex:数字

<<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 0 auto;
            display: flex;
            width: 700px;
            height: 400px;
            background-color: rgb(51, 59, 59);
        }

        li {
            list-style: none;
            height: 40px;
            background-color: aqua;
        }

        ul li:first-child {
            flex: 1;
           
        }

        ul li:nth-child(2) {
            flex: 2;
            background-color: royalblue;
        }

        ul li:last-child {
            flex: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>

    </ul>
</body>
</html>


八.5、换行、

不够挤就换行        父盒子写:flex-wrap: wrap;

简直是布局好帮手佳人们!!

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            display: flex;
            width: 500px;
            height: 400px;
            background-color: aqua;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-evenly;
        }

        li {
            list-style: none;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
</body>

</html>

</html>


九、grid布局(浅谈)

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            display: grid;
            width: 500px;
            height: 900px;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: repeat(4, 100px);
            /* 单元格之间的间距 */
            grid-gap: 20px;
        }

        .box div {
            border: 1px solid pink;
        }

    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>6</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

grid-template-columns: 1fr 2fr 1fr:(水平方向)一行里按照1:2:1 的比例划分格子
grid-template-rows: repeat(4, 100px):(垂直方向)一列的高都是100px,重复4行
grid-gap: 20px;          /* 单元格之间的间距 */
         

 .box {
            display: grid;
            width: 500px;
            height: 900px;
            grid-template-columns: 1fr 1fr 1fr ;
            grid-template-rows: repeat(4, 100px);
            grid-gap: 20px;
        }

.test {
            /* grid-column-start: 1;
            grid-column-end: 3; */
            grid-column: 1/3;
        }
<div class="test">4</div>

水平跨行

更改了盒子水平比例为 1:1:1

grid-column-start: 1;+ grid-column-end: 3; ===== grid-column: 1/3;

可以理解为3-1=2,所以只横跨了两格,从第一个格子开始,不包括第三个格子

垂直跨列也相同道理

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/521098.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

舞蹈网站制作分享,舞蹈培训商城网站设计案例分享,wordpress主题分享

嘿&#xff0c;朋友们&#xff01;今天我要跟你们唠一唠一个超级酷炫的舞蹈培训商城网站设计案例。 咱先说说这个网站的目标哈&#xff0c;那就是得让喜欢舞蹈的小伙伴们能够轻轻松松找到自己心水的课程和商品。 那制作过程都有啥呢&#xff1f;别急&#xff0c;听我慢慢道来。…

c# wpf LiveCharts 绑定 多线条 简单试验

1.概要 c# wpf LiveCharts 绑定 多线条 简单试验 2.代码 <Window x:Class"WpfApp3.Window4"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http:…

清明假期作业

1、实现文件夹的拷贝功能 注意判断被拷贝的文件夹是否存在&#xff0c;如果不存在则提前 不考虑递归拷贝的问题 #include<myhead.h> int my_copy(char* name,const char *p) {char buf[256]"./";strcat(buf,p);strcat(buf,"/");strcat(buf,name);in…

P1001 A+B Problem

1.题目背景 强烈推荐新用户必读帖。 不熟悉算法竞赛的选手请看这里&#xff1a; 算法竞赛中要求的输出格式中&#xff0c;**不能有多余的内容&#xff0c;这也包括了“请输入整数a和b” 这一类的提示用户输入信息的内容。**若包含了这些内容&#xff0c;将会被认为是Wrong Answ…

嵌入式Qt QGridLayout网格布局管理器

一.QGridLayout网格布局管理器 //以行为单位 设置比例系数 void QGridLayout::setRowStretch ( int row, int stretch ) //以列为单位 设置比例系数 void QGridLayout::setColumnStretch ( int column, int stretch ) 实验&#xff1a; Widget.h&#xff1a; #ifndef _WIDGE…

dm8数据迁移工具DTS

dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持&#xff1a; ◆ 主流大型数据库Oracle、SQLServer、MyS…

3.6 CSS定位

CSS定位可以将HTML元素放置在页面上指定的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为(0,0)的原点&#xff0c;然后以像素为单位将整个网页构建成一个坐标系统。其中x轴与数学坐标系方向相同&#xff0c;越往右数字越大&#xff1b;y轴与数学坐标系方向相反&#x…

r3live使用realsense避免相机内参标定

话题 /camera/color/camera_info 消息格式 sensor_msgs/CameraInfo distortion_model&#xff1a;指定了相机畸变模型&#xff0c;"plumb_bob"简单的径向和切向畸变模型 D&#xff1a;畸变参数&#xff0c;取决于畸变模型&#xff0c;(k1, k2, t1, t2, k3)&#xf…

Shell编程初识

Shell初识 ShellShell 脚本Shell 环境第一个shell脚本实例 运行 Shell 脚本方法&#xff1a;1、作为可执行程序2、作为解释器参数3.使用 . (空格)脚本名称来执行4.使用 source 来执行(主要用于生效配置文件)区别1.关于执行权限2.关于是否开启子shell线程 脚本排错及问题判断she…

dm8 备份与恢复

dm8 备份与恢复 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…

Linux学习之路 -- 进程篇 -- PCB介绍2 -- 标识符和进程创建

前面我们介绍了的进程的标识符&#xff0c;下面继续介绍进程标识符和进程创建的知识。 目录 一、进程创建 <1>fork函数的返回值 <2>创建子进程的目的 <3>代码共享 二、fork函数的相关问题 <1>为什么给父进程返回子进程的pid&#xff0c;给子进程…

数据生成 | Matlab实现基于DE差分进化算法的数据生成

数据生成 | Matlab实现基于DE差分进化算法的数据生成 目录 数据生成 | Matlab实现基于DE差分进化算法的数据生成生成效果基本描述模型描述程序设计参考资料 生成效果 基本描述 1.Matlab实现基于DE差分进化算法的数据生成&#xff0c;运行环境Matlab2021b及以上&#xff1b; 2.计…

代码随想录算法训练营Day46|LC139 单词拆分

一句话总结&#xff1a;完全背包&#xff01; 原题链接&#xff1a;139 单词拆分 动态规划之完全背包五部曲&#xff1a; 确定dp数组与下标含义&#xff1a;表示字符串长度为i时&#xff0c;dp[i] true 的话&#xff0c;可以拆分为一个或多个在字典中出现的单词。确定递归公…

C++相关概念和易错语法(4)(构造函数、析构函数)

一、构造函数 1.实现的功能&#xff1a;实例化对象的时候默认自动调用&#xff0c;相当于初始化。 条件&#xff1a;在书写时要满足构造函数的规范&#xff08;函数名 类名&#xff0c;不写返回值&#xff0c;也没有返回值&#xff09;&#xff0c;可以用inline来修饰。 2.自…

Microsoft Edge浏览器设置之后就很牛逼了

1.移除多余的广告 首先我们要先下载Microsoft Edge浏览器浏览器 然后在设置中先打开扩展,安装一个神奇的去广告插件 打开Edge 加载项 直接搜adguard 广告拦截器,直接获取就可以安装了,由于我已经安装过了,所以就是显示的删除。 2.解除网页复制限制 直接在扩展中安装sim…

Toyota Programming Contest 2024#4(AtCoder Beginner Contest 348)(A~D)

A - Penalty Kick i,1~N。如果 i 是 3 的倍数输出x&#xff0c;否则输出o #include <bits/stdc.h> //#define int long long #define per(i,j,k) for(int (i)(j);(i)<(k);(i)) #define rep(i,j,k) for(int (i)(j);(i)>(k);--(i)) #define debug(a) cout<<#…

HTTP详解及代码实现

HTTP详解及代码实现 HTTP超文本传输协议 URL简述状态码常见的状态码 请求方法请求报文响应报文HTTP常见的HeaderHTTP服务器代码 HTTP HTTP的也称为超文本传输协议。解释HTTP我们可以将其分为三个部分来解释&#xff1a;超文本&#xff0c;传输&#xff0c;协议。 超文本 加粗样…

开源 _ 新一代Android 性能监控框架Rabbit

最终扫描结果会展示如下: 点击右上角导出按钮可以把扫描结果以json的形式导出到SD卡中。 网络日志监控 rabbit可以记录网络请求日志并方便的查看返回的json数据: 卡顿日志监控 rabbit通过Choreographer来检测主线程的运行情况,并异步采集主线程堆栈来还原卡顿现场。 对于下…

总包不足80w的高龄Android程序员,被面试官diss混得太差,网友狂吐槽……

有网友直言&#xff1a;90%的人一辈子一年也拿不到80万 有网友分析到&#xff1a;看面试情况&#xff0c;没什么希望就直接其实我觉得30岁年薪低于1000万的都是loser&#xff0c;你我都是 有网友说&#xff1a;这几年互联网行业极大发展&#xff0c;让互联网行业成为了明星行…

2_6.Linux高级存储管理

##1.逻辑卷## pv ##物理卷 被处理过的物理分区 pe ##物理扩展 设定存储最小单元 vg ##物理卷组 捆绑pv到一个组中 lv ##逻辑卷 分配最终的使用设备 监控建立过程&#xff1a; watch -n 1 "pvs;echo ;vgs;echo ;lvs;echo ;df -h /weixindata" &#xff08;1&#xf…