Web前端学习（2）
1. CSS基础语法：
格式：
选择器{属性：值}
在html中，通过标签<style>引入CSS样式：
常用属性：
width: 宽度
height: 高度
background-color: 背景色
表示长度的单位：
1.px 像素
2. % 百分比 ，由父容器的大小决定
2. 内联样式与内部样式
内联样式：在html标签上直接添加style属性是实现
内部样式：通过style标签引入CSS样式， 优点：可以实现代码复用，符合W3C标准，实现样式和结构分离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--内部样式--> div{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div>This is a block</div> </body> </html>
3. 外部样式
通过引入单独的css文件进行样式控制
<link>标签： 当前页面与外部资源的引入关系
属性： rel 引入资源的类型 href: 引入资源的地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../CSS/common.css"> </head> <body> <div>This is a block</div> </body> </html>
通过@import引入外部资源：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<link rel="stylesheet" href="../CSS/common.css">--> <style> @import "../CSS/common.css"; </style> </head> <body> <div>This is a block</div> </body> </html>
在实际的开发中，建议通过<link>引入CSS文件
4. CSS中颜色表示法：
1. 单词表示法
2. 十六进制表示法
3. RGB三原色表示法
5.背景样式
background-color: 背景颜色
background-image: 背景图片 (默认水平垂直都铺满背景图)
background-repeat: 背景图片的平铺方式 (reprat-x, repeat-y, repeat, no-repeat) (图片相对于容器的大小)
background-position: 背景图片的位置 （x,y) 沿着xy轴移动的距离以及方向 (left, center, right)(top, middle, bottom)
background-attachment: 背景图随滚动条的移动方式 (scroll： 基于容器进行移动, fixed基于浏览器进行移动)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../CSS/common.css"> </head> <body> <div></div> </body> </html>
CSS样式代码：
div{ width: 300px; height: 300px; background-color: blue; background-image: url("../picture/sun.gif"); background-repeat: no-repeat; background-position: center, center; background-attachment: scroll; }
练习：利用滚动条移动方式实现视觉差网页
实现保持背景图像不移动，容器进行移动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .sec1{ width: 1980px; height: 800px; background-image: url("../picture/timg1.jpg"); background-attachment: fixed; } .sec2{ width: 1980px; height: 800px; background-image: url("../picture/timg2.jpg"); background-attachment: fixed; } .sec3{ width: 1980px; height: 800px; background-image: url("../picture/timg3.jpg"); background-attachment: fixed; } table{ background-color: deeppink; } </style> </head> <body> <div class="sec1"> <table border="1" cellspacing="3" cellpadding="5"> <caption>课程价格表(详细)</caption> <!--table head--> <thead> <tr align="center" valign="center"> <th>班次名称</th> <th>科目</th> <th>授课内容</th> <th>增值服务</th> <th>课时</th> <th>价格</th> <th>试听</th> <th>购买</th> </tr> </thead> <!--table body--> <tbody> <tr align="center" valign="center"> <td rowspan="3">真题精解班</td> <td>行测.申论</td> <td>全科历年真题精解</td> <td rowspan="3">课后赠两套模拟卷，24小时以内答疑</td> <td>48</td> <td>1200￥</td> <td><img src="../picture/rain.gif" alt=""></td> <td><img src="../picture/rain.gif" alt=""></td> </tr> <tr align="center" valign="center"> <!--<td>真题精解班</td>--> <td>行测</td> <td>行测历年真题精解</td> <!--<td>课后赠两套模拟卷，24小时以内答疑</td>--> <td>32</td> <td>980￥</td> <td><img src="../picture/rain.gif" alt=""></td> <td><img src="../picture/rain.gif" alt=""></td> </tr> <tr align="center" valign="center"> <!--<td>真题精解班</td>--> <td>申论</td> <td>申论历年真题精解</td> <!--<td>课后赠两套模拟卷，24小时以内答疑</td>--> <td>16</td> <td>580￥</td> <td><img src="../picture/rain.gif" alt=""></td> <td><img src="../picture/rain.gif" alt=""></td> </tr> <tr align="center" valign="center"> <td rowspan="3">高分技巧班</td> <td>行测.申论</td> <td>全科技巧强化</td> <td rowspan="3">入学试卷测评，24小时以内答疑</td> <td>32</td> <td>980￥</td> <td><img src="../picture/sun.gif" alt=""></td> <td><img src="../picture/sun.gif" alt=""></td> </tr> <tr align="center" valign="center"> <!--<td>真题精解班</td>--> <td>行测</td> <td>行测速解技巧强化</td> <!--<td>课后赠两套模拟卷，24小时以内答疑</td>--> <td>18</td> <td>680￥</td> <td><img src="../picture/sun.gif" alt=""></td> <td><img src="../picture/sun.gif" alt=""></td> </tr> <tr align="center" valign="center"> <!--<td>真题精解班</td>--> <td>申论</td> <td>申论速解技巧强化</td> <!--<td>课后赠两套模拟卷，24小时以内答疑</td>--> <td>14</td> <td>580￥</td> <td><img src="../picture/sun.gif" alt=""></td> <td><img src="../picture/sun.gif" alt=""></td> </tr> </tbody> <!--table foot--> <tfoot> </tfoot> </table> </div> <div class="sec2"></div> <div class="sec3"></div> </body> </html>
实际效果：
6. 边框样式：
border-style: 边框的样式 （solid, dotted, dashed）
border-width: 边框的宽度
: 边框的颜色
同时也可以正对某一条边进行单独设置。 border-xxx-color(其中xxx可以为left, right, top, bottom)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .sec1{ width: 100px; height: 80px; border-style: dashed; border-width: 3px; border-color: red; border-left-style: dot-dash; /*<!--针对特定的边-->*/ } </style> </head> <body> <div class="sec1"></div> <div class="sec2"></div> </body> </html>
7. CSS文字样式
font-family: 字体类型 （字体类型中有空格的时候，需要用引号，如果没有空格，则不需要引号）
1. 英文字体
2. 中文字体
3. 衬线体与非衬线体
font-size: 字体大小 （默认大小16像素）
1. 使用像素大小直接表示‘（字体大小一般用偶数表示， 为了对齐，大小除以2是整数）
2. 使用单词(large, small, medium)表示
font-weight: 字体的粗细
1. 表示方法（bold, norm....）
2. 写法 number （100， 200， .... 900， 每隔100）
font-style: 字体样式 正常/斜体
color: 字体的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ font-family: 华文楷体; font-size: large; font-style: italic; font-weight: bold; color: deeppink; } </style> </head> <body> <div>前端开发</div> </body> </html>
8. CSS段落样式
text-decoration: 文本修饰
1. 下划线： underine
2. 删除线 : line-through
3. 上划线: overline
text--transform: 文本大小写
1. 大写 uppercase
2. 小写 lowercase
3.首字母大写 captialize
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .sec1{ width: 300px; /*text-decoration: underline;*/ /*text-decoration: overline;*/ text-decoration: line-through; } .sec2{ /*text-transform: capitalize;*/ /*text-transform: uppercase;*/ text-transform: lowercase; } </style> </head> <body> <p class="sec1"> 古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。他在座谈会现场 回答新华社记者提问时说，为了有效防控新冠肺炎疫情，很多中国人无法过上正常生 活。“我要向所有目前生活在中国的人、那些无法过上正常生活的人表达感激之情”。中国 人民为防控疫情做出了巨大牺牲，“他们正在为全人类做出贡献”。 </p> <p class="sec2"> this is a test paragraph. </p> </body> </html>
text-indent: 文本缩进
1. 缩进固定大小的px
2.缩进em单位，em是一个相对单位，一个em等于一个字体的大小，所以不用设定具体的像素
text-align：文本对齐方式：
1. left : 左对齐
2. center：中间对齐
3. right：右对齐
4. justify： 两端点对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .sec1{ width: 300px; text-indent: 2em; /*text-align: left; !*左对齐*!*/ /*text-align: right;*/ /*text-align: center;*/ text-align: justify; } </style> </head> <body> <p class="sec1"> 古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。他在座谈会现场 回答新华社记者提问时说，为了有效防控新冠肺炎疫情，很多中国人无法过上正常生 活。“我要向所有目前生活在中国的人、那些无法过上正常生活的人表达感激之情”。中国 人民为防控疫情做出了巨大牺牲，“他们正在为全人类做出贡献”。 </p> </body> </html>
line-height: 定义行高 （行高包括： 字体大小，上边距，下边距，一行文字的高度，上边距与下边距是等价关系）
1.取值 px
letter-spacing: 定义字间距， 单位：像素
word-spacing: 定义词间距 (针对英文段落)
针对英文单词进行折行：
word-break: break-all 强制折行 (强烈)
word-wrap: break-word 强制折行 （不那么强烈，会产生空白区域）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .sec1{ width: 300px; text-indent: 2em; /*text-align: left; !*左对齐*!*/ /*text-align: right;*/ /*text-align: center;*/ text-align: justify; line-height: 25px; letter-spacing: 2px; } </style> </head> <body> <p class="sec1"> 古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。他在座谈会现场 回答新华社记者提问时说，为了有效防控新冠肺炎疫情，很多中国人无法过上正常生 活。“我要向所有目前生活在中国的人、那些无法过上正常生活的人表达感激之情”。中国 人民为防控疫情做出了巨大牺牲，“他们正在为全人类做出贡献”。 </p> </body> </html>
9.CSS复合样式
1. 一个CSS属性只控制一种样式，叫做单一样式
2. 一个CSS属性控制多种样式，叫做复合样式 ,通过空格将属性值分隔
例如，复合样式：
background, border, font
10.CSS选择器
1. id选择器
html：id="xxx"，为标签创建id （标签的id是唯一的）
css: #xxx{ } , css按照id选择标签
xxx的命名方法：
(1). 驼峰命名法 xxxYyyy
(2). 下划线命名法 xxx_yyy
(3). 短线命名法 xxx-yyy （推荐）
-------------------------------------------------------------
2. class选择器
html: class="xxx" ，为标签创建属性 (属性可以不唯一，且一个标签可以有多个属性)
css: .xxx{ }，css按照class选择标签
选择具有特定属性的某一标签：例如div.box1{ ... }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #sec1{ width: 300px; height: 80px; line-height: 20px; text-align: justify; text-indent: 2em; background-color: #fff517; word-spacing: 2px; } #sec2{ width: 300px; height: 100px; line-height: 20px; text-align: justify; text-indent: 2em; background-color: #ff383d; } .box1{ width: 100px; height: 100px; background-color: aqua; } div.box1{ /* 选择具有box1属性的div标签 */ background-image: url("../picture/sun.gif"); } </style> </head> <body> <p id="sec1"> 古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。 </p> <p id="sec2"> 古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。 </p> <div class="box1"></div> </body> </html>
3. 标签选择器（Tag选择器）
使用场景：
去掉某些标签的默认行为； 使用在复杂的选择器中，如层次选择器
群组选择器：可以将不同的标签，属性，id写道一起，设置相同的CSS样式，达到CSS代码的复用
通配选择器：*{ }，给所有的标签添加统一的样式。（不推荐）
层次选择器：（包括）
后代 M N
父子 M>N
兄弟 M~N M标签下面的N标签
相邻 M+N M下面相邻的N标签
4. 属性选择器
只对带有某种特定属性的标签设置CSS样式：
例如：
div[class]: 所有含有class属性的div标签
div[class=xxx]：class属性为xxx的div标签 (完全匹配)
div[class*=xxx]: class属性包含xxx的div标签 (部分匹配)
div[class^=xxx]: class属性起始包含xxx的div标签 (起始匹配)
div[class$=xxx]: class属性结束包含xxx的div标签 (结束匹配)
div[class][id]: 既有class又有id的div标签 （组合匹配）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div[class]{ /* 选择具有class属性的div标签*/ background-color: aquamarine; } div[class=search] /*只有class属性为"search"的标签才能被选中*/ { border-style: dashed; } div[class*=search] /*仅仅选中class属性中含有search的标签*/ { border-left-color: red; } </style> </head> <body> <div>aaaaaaa</div> <div class="search">bbbbbb</div> <div class="search-box">ccccc</div> <div class="search-button">ddddd</div> </body> </html>
5. hover等伪类选择器：
css伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。
:link 访问签的样式 （只针对<a>标签）
:visited 访问后的样式 （只针对<a>标签）
:hover 鼠标移入后的样式
:active 鼠标按下时的样式
:after 通过伪类的方式给标签中的元素元素添加一个文本内容
:before 通过伪类的方式给标签中的元素元素添加一个文本内容
通过after以及before伪类可以为文本添加额外的文本以及CSS样式
div:before{ content: "xxx"; color: red }
----------------------------------------------------------------------
:checked, :disabled, :focus都是针对表单元素的
checked: 当表单被选中时呈现出特定的样式
disabled: 当表单被禁止后具有的CSS样式
focus: 当表单被点击后具有的CSS样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; height: 300px; background-color: red; } div:hover /*设置鼠标移入后的样式*/ { background-color: blue; } div:active { background-color: bisque; } /*设置<a>标签的样式*/ a { color: red; font-style: italic; } a:visited { color: gray; font-style: normal; } p:before { content: "world"; /*添加到hello的前面* , 且可以单独进行样式的设置/ color: blue; } p:after{ content: "world"; /*添加到hello的后面*/ color: aqua; } :checked { width: 15px; height: 15px; } :disabled { width: 8px; height: 8px; } :focus { background-color: red; } </style> </head> <body> <div></div> <a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_self"> 访问百度 </a> <p>hello</p> <input type="checkbox"> <input type="checkbox"> <input type="checkbox" disabled> <input type="text"> </body> </html>
结构伪类选择器：
nth-of-type 控制列表的第n项
first-of-type 控制第一项
last-of-type 控制最后一项
only-of-type 列表只有一项的时候，控制这唯一的一项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* li:nth-of-type(3) { background-color: red; } */ /*参数可以为1，2，3... 还可以为n, 代表1，2，3，4...无穷大*/ /*实现隔行换色可以写为(2n)或者(2n+1)*/ li:nth-of-type(2n){ /*偶数行*/ background-color: red; } li:nth-of-type(2n+1){ /*奇数行*/ background-color: blue; } </style> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </body> </html>
11. CSS样式继承：
文字相关的样式可以被继承，布局相关的样式不能被继承
例如下面的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; /*布局相关的样式*/ height: 300px; border: red solid 3px; font-size: 25px; /*文字相关的样式*/ font-style: italic; font-weight: bolder; } </style> </head> <body> <div> <p>This is a paragraph</p> <p>This is another paragraph</p> </div> </body> </html>
上面的div标签的样式设置中，既有关于布局的CSS样式，又有关于文字的CSS样式，div的子标签<p>只是继承了文字的CSS样式，没有继承关于布局的CSS样式
布局的css样式默认是不能被继承的，如果需要继承，需要设置继承属性。(设置inhereit值)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; /*布局相关的样式*/ height: 300px; border: red solid 3px; font-size: 25px; /*文字相关的样式*/ font-style: italic; font-weight: bolder; } p{ border: inherit; /*文字继承布局样式*/ } </style> </head> <body> <div> <p>This is a paragraph</p> <p>This is another paragraph</p> </div> </body> </html>
12.CSS优先级
相同样式的优先级：
当设置相同样式时，后面的优先级较高，但不建议重复设置样式的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: red; } div{ color: blue; /*当样式相同时，后写的优先级高*/ } </style> </head> <body> <div> This is a block. </div> </body> </html>
内部样式与外部样式：
内部样式与外部样式优先级相同，如果设置了相同的样式，那么后写的引入方式优先级高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../CSS/common.css"> <!--外部样式--> <style> /* 内部样式 后引入的，优先级更高*/ div{ color: blue; /*当样式相同时，后写的优先级高*/ } </style> </head> <body> <div> This is a block. </div> </body> </html>
单一样式优先级：
style行间 > id > class > tag(标签) > * > 继承
13. import群组等级优先：
是一种提升样式优先级的手段，是非规范型写法（不推荐）
例如，按照但一样是的优先级的规则，红色的优先级更高：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: blue; } </style> </head> <body> <div id="elem" style="color: red"> This is a block. </div> </body> </html>
为了提高蓝色的优先级，可以使用important提升其优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: blue !important; /*important可以提高样式的优先级*/ } </style> </head> <body> <div id="elem" style="color: red"> This is a block. </div> </body> </html>
优先级： 标签+类 > 单类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.elem /*标签+类的优先更高*/ { color: blue; } .elem { color: red; } </style> </head> <body> <div class="elem"> This is a block. </div> </body> </html>
群组优先级：群组选择器和单一选择器优先级相同，与引入的先后位置有关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,p /*群组选择器*/ { color: blue; } div /*单一选择器，与引入的位置先后有关*/ { color: red; } </style> </head> <body> <div class="elem"> This is a block. </div> <p>This is a paragraph</p> </body> </html>
14. CSS盒子模型
组成：
由内而外： content->padding->border->margin
padding,margin内外填充，既可以写一个数值，对四个方向进行相同的填充，也可以进行单独某个方向的填充
padding-top, padding-bottom,padding-left,padding-right
margin-top,margin-bottom,margin-left,margin-right
注：
1. 背景颜色会填充到margin以内的区域
2. 文字会在content区域
3. padding不能出现负值，margin可以出现负值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 200px; height: 200px; background-color: red; border-width: 10px; border-style: solid; border-color: black; padding: 10px; margin: 20px; } #box1{ width: 200px; height: 200px; border-width: 10px; border-style: dashed; border-color: transparent; padding: 0px; margin: 20px; background-image: url("../picture/map.jpg"); } </style> </head> <body> <div id="box">这是一个盒子模型</div> <div id="box1"></div> </body> </html>
box-sizing改变盒子模型的展示形态：
box-sizing 允许以特定的方式定义匹配某个区域的特定元素，取值为： 1. content-box(默认值) 2. border-box
1. content-box(默认值) ：
width, height是针对于content
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 200px; height: 200px; background-color: red; border-width: 10px; border-style: solid; border-color: black; padding: 10px; margin: 20px; box-sizing: content-box; /*width, height只针对于content*/ } </style> </head> <body> <div id="box">这是一个盒子模型</div> </body> </html>
盒子模型的尺寸：
2. border-box
width, height是针对于content，padding，margin, 即content+padding+margin=width(height)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 200px; height: 200px; background-color: red; border-width: 10px; border-style: solid; border-color: black; padding: 10px; margin: 20px; box-sizing: border-box; /*width, height只针对于content*/ } </style> </head> <body> <div id="box">这是一个盒子模型</div> </body> </html>
盒子模型尺寸：
盒子模型之margin叠加问题：
1. margin叠加：
当给两个盒子同时加上上下margin的时候，就会出现叠加问题，但是左右不存在这种叠加问题，例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1{ width: 200px; height: 200px; background-color: red; margin-bottom: 20px; } #box2{ width: 200px; height: 200px; background-color: blue; margin-top: 20px; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
上面盒子的margin-bottom 20px和下面盒子的margin-top 20px是会重叠在一些，所以上下只相距20px,且如果上下的外边距不同的话，则按照较大的边距进行重叠。
解决方案：
1. BFC规范：
2. 只给一个元素添加外边距（只给上面或者下面加）
盒子模型之margin传递问题：
margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题
子容器的margin-top变化会影响父容器的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1{ width: 200px; height: 200px; background-color: red; } #box2{ width: 100px; height: 100px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
当给box2(子容器) 添加margin-top之后，box1(父容器)的位置会发生变化
解决方案：
1. BFC规范
2. 给父容器加边框
3. margin换成padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1{ width: 200px; height: 200px; background-color: red; border: 1px transparent solid; } #box2{ width: 100px; height: 100px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
CSS盒子模型扩展
1. margin自适应居中：左右自适应会左右居中，但是不能上下自适应。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 400px; height: 100px; background-color: red; margin-left: auto; /*相当于左右居中*/ margin-right: auto; } </style> </head> <body> <div id="box"></div> </body> </html>
2. 不设置content的现象，即width,height不设置的时候对盒子模型的影响
div标签在不设置width的条件下会充满整个父容器，即使再增加border和margin的条件下不会超过父容器的大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1{ width: 300px; height: 300px; background-color: red; } #box2{ /*width: 100%;*/ height: 100px; /*如果写了width的尺寸，box2就会超出父容器的大小*/ background-color: blue; color: aliceblue; border: solid 10px black; margin: 5px; } </style> </head> <body> <div id="box1"> <div id="box2"> This is content. </div> </div> </body> </html>
---------------------------------------------------------------------------------------------------
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）