目录
一、前端
1.css三大特性：
层叠性，继承性，优先级
1.层叠性
层叠性：给相同的选择器设置相同的样式，样式会覆盖到最新的
<style>
div{
color: aqua;
}
div{
color: brown;
}
2.继承性
继承性：孩子会继承父亲的样式
合理的使用可以简化代码
子元素可以继承父元素的样式(text-,font-,line-以及color属性)
<style>
div {
color: pink;
font-size: 14px;
}
</style>
<body>
<div>
<p> 123456</p>
</div>
</body>行高的继承性
<style>
body {
color: pink;
font: 12px/1.5 'Microsoft YaHei';
}
div{
font-size: 14px;
/* 行高为14*1.5px */
}
p{
font-size: 16px;
/* 行高为16*1.5px */
}
</style>
<body>
<div>粉红色</div>
<p>粉红色</p>
<ul>
<li>没有指定文字大小</li>
<!-- li没有指定文字大小，继承父亲的文字大小 -->
<!-- 所以li的文字大小为12px，行高为12*1.5px -->
</ul>
</body>
行高可以带单位,也可以不带单位
不带单位:1.5表示当前元素文字大小的1.5倍
3.优先级
同一个元素指定多个选择器，就会有优先级
选择器相同，执行层叠性
选择器不同，根据选择器权重执行
选择器权重有小到大：1.继承或者*；2.元素选择器；3.类选择器，伪类选择器；4.ID选择器；5.行内样式style；6.！important
div {
color: pink !important;
/* 权重：0,0,0,0 */
}
.test {
color: red;
/* 权重：0,0,1,0 */
}
#demo {
color: green;
/* 权重：0,1,0,0 */
}
body {
color: red;
}
a {
color: green;
}
<body>
<div class="test" id="demo" style="color: purple;">
<!-- 行内样式表权重：1,0,0,0 -->
123
</div>
<!-- 依次是类选择器，ID选择器，行内样式表style -->
<!-- 对元素选择器加！important ，这样元素选择器的权重就最大了-->
<!-- 继承的权重是0,0,0,0，只要选择器选中了元素，就比继承优先 -->
<!-- 即使继承加上！important，也没有选出来的样式优先级高 -->
<a href="#">我是单独的样式</a>
<!-- a链接：浏览器默认指定了一个样式（蓝色，有下划线） -->
</body>
css权重叠加问题：
<style>
li {
color: red
}
ul li {
color: green;
}
/* 复合选择器涉及权重叠加问题 */
/* 权重会叠加，但是不会进位 */
/* 权重是从左往右依次对比优先级 */
/* li的权重是0,0,0,1 */
/* ul li的权重是0,0,0,1+0,0,0,1 =0,0,0,2*/
.nav li {
color: pink;
}
/* .nav li的权重是0,0,1,0+0,0,0,1=0,0,1,1 */
</style>
</head>
<body>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
2.css盒子模型
网页布局过程：
1.先准备好相关页面元素，页面元素基本都是盒子
2.利用css设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
网页布局的核心本质：利用css摆放盒子
css盒子模型本质上是一个盒子，封装周围的html元素，它包括：border边框，content内容，padding内边距，margin外边距
1.边框border
border可以设置元素的边框，由三部分组成：边框宽度，边框样式，边框颜色
<style>
div {
width: 300px;
height: 200px;
/*
border-width: 5px;
border-color: blue;
border-style: dotted;
*/
/* 边框样式：solid：实线边框 dashed：虚线边框 dotted：点线边框 */
/* 边框简写：（没有顺序） */
/* border:1px solid black; */
/* 边框分开写法 （四条边）*/
border-top: 5px solid pink;
border-bottom: 5px dashed blue;
}
</style>
</head>
<body>
<div>123</div>
</body>
表格边框的粗细问题：
两个相邻表格，如果都设置了边框宽度，那么实际的边框宽度就是设置的两个宽度之和，这就需要合并边框宽度。
border-collapse:collapse
<style>
table {
width: 500px;
height: 250px;
}
table,
td {
border: 1px solid pink;
/* border-collapse: 控制相邻单元格的边框 */
border-collapse: collapse;
/* 表示相邻边框合并在一起 */
font-size: 14px;
text-align: center;
}
</style>边框对盒子实际大小的影响：
盒子边框会使盒子变大，如果测量时候包括边框，设置盒子大小就要用盒子实际大小-边框宽度
2.内边距padding
内边距：设置盒子边框和内容之间的距离
div{
width: 200px;
height: 200px;
background-color: pink;
/*
padding-top: 10px;
padding-left: 10px;
*/
/* padding的复合写法 */
/* padding:5px */
/* 上下左右都有5像素内边距 */
/* padding:5px 10px */
/* 上下5像素内边距，左右10像素内边距 */
/* padding：5px 10px 20px */
/* 上5，左右10，下20 */
/* padding：5px 10px 20px 30px */
/* 上5 右10 下20 左30（顺时针方向） */
/* 四种方法都需要记住 */
padding: 20px;
/* 内边距也会影响盒子的实际大小 */
/* 盒子实际大小=盒子设置宽度+内边距大小 */
}
</style>
</head>
<body>
<div>
盒子内容盒子内容盒子内容盒子内容盒子内容盒子内容
</div>
</body>padding不会撑开盒子的情况：
如果盒子没有指定width/heights属性，此时padding不会撑开盒子的宽度/高度。
<style>
h1 {
background-color: pink;
padding: 30px;
}
div{
width: 300px;
height: 100px;
background-color: purple;
}
div p{
padding: 30px;
}
</style>
</head>
<p>
123
</p>
</div>
</body>通常情况下，不会继承宽和高，但是块元素可以继承父标签的宽度，属于特例
父标签有宽度，子标签有内边距，子标签padding也不会撑开盒子的宽度
3.外边距margin
<style>
div {
background-color: pink;
width: 200px;
height: 200px;
}
.one {
/* margin: 20px; */
/* margin:5px 10px;
上下5 左右10 */
/* margin:5px 10px 20px
上5 左右10 下20 */
margin: 5px 10px 20px 30px
/* 顺时针，上右下左 */
}
</style>
</head>
<body>
<div class="one">
1
</div>
<div class="two">
2
</div>
</body>
设置的方法与padding一样。
外边距的应用：块级盒子水平居中对齐
<style>
.header{
width: 900px;
height: 200px;
background-color: pink;
margin: auto;
/* margin: 0 auto; 上下外边距0,左右外边距auto (最常使用) */
/* margin-left: auto;margin-right: auto; */
/* 上面三种写法都可以 */
text-align:center;
}
</style>
</head>
<body>
<div class="header">
<span>里面的文字</span>
</div>
</body>想要让块级盒子水平居中，必须满足两个条件：
1.盒子必须指定了宽度。2.盒子左右的外边距都设置为auto
这种方法对行内元素和行内块元素是无效的。
行内元素或者行内块元素水平居中：给其父元素添加text-align：center（把它们看做是文字）
外边距margin合并的两种情况
问题1：相邻块元素垂直外边距的合并
<style>
.damao,.ermao{
width: 200px;
height: 200px;
background-color: pink;
}
.damao{
margin-bottom: 100px;
}
.ermao {
margin-top: 200px;
}
/*
</style>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
</body>实际上，两个盒子之间的距离只有200px，而不是100+200px。这就是外边距合并。
如果上下相邻的两个块元素（兄弟关系）相遇时，上面元素有下外边距，下面元素有上外边距。那么它们之间的垂直距离不是两个外边距之和，而是两个外边距中较大的那个，这种现象叫做相邻块元素垂直外边距的合并。
解决方法，只给一个盒子添加margin。
问题2：嵌套块元素塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距， 此时父元素会塌陷较大的外边距。
<style>
.father{
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* 解决方法1 */
/* border:1px solid transparent */
/* 解决方法2 */
/* padding: 1px; */
/* 解决方法3 */
overflow:hidden
}
.son{
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
例子：
父元素有上外边距50px，子元素有上外边距100px。
（塌陷后）实际情况父元素和子元素都会有上外边距100px。
解决方案：
1.为父元素定义上边框
2.为父元素定义上内边距
3.为父元素添加overflow：hidden
如何：清除内外边距
<style>
*{
margin: 0;
padding: 0;
}
/* 清除网页元素的内外边距 */
/* 这也是css的第一行代码 */
span{
background-color: pink;
margin: 20px;
}
</style>
<body>
123
<ul>
<li>123456</li>
</ul>
<span>行内元素尽量只设置左右内外边距</span>
</body>网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一样，所以要先清除网页元素的内外边距。
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。转换成块级元素和行内块元素就可以了。
二、python学习
第二章
name="E13c"
massage=f"hello {name},would you like"
print(f"{massage}")
first_name="adc"
last_name="qwer"
full_name=f"{first_name} {last_name}" # f"{} 将括号内的变量赋值，并看做字符串
print(f"{full_name.title()}") # 首字母大写
print(f"{full_name.upper()}") # 全部大写
print(f"{full_name.lower()}") # 全部小写
word='Albert Einstein once said,"A person new."'
print(f"{word}")
famous_name="Albert Einstein" # 单引号和双引号都可以扩住字符串，单引号扩住字符串时，内部的双引号正常显示。反过来同理
message=f'{famous_name.title()} once said,"A person new."'
print(message)
first_name="\tadc" # .strip 剔除函数。消除字符串前后空白
last_name="qwer\t" # \t空格 \n换行
full_name=f"{first_name} {last_name}"
print(f"{full_name.rstrip()}")
print(f"{full_name.lstrip()}")
print(f"{full_name.strip()}")
universe_age=14_000_000_000_000 # 数字下划线不会显示，只是区分位数
print(universe_age)
x,y,z=0,0,0 # 同时给多个数赋值
print(x,y,z)
MAX_CONNECTIONS=5000 # 常量一般用大写字母表示
第三章
bicycles=['trek','cannondale','redline''specialized']
print(bicycles)
# 访问列表元素
print(bicycles[0].title())
print(bicycles[-1]) # 返回最后一个元素
message=f"My first bicycle was a {bicycles[0].title()}"
print(message)
# 修改、添加和删除元素
# 1.修改
motorcycles=['honda','yamaha','suzuki']
print(motorcycles)
motorcycles[0]='ducati' # 修改列表元素的值
print(motorcycles)
# 2.添加
motorcycles.append('honda') # 添加元素到列表末尾
print(motorcycles)
motorcycles=[] # 通过添加列表元素的方式创建列表
motorcycles.append('honda')
motorcycles.append('honda')
motorcycles.append('honda')
print(motorcycles)
motorcycles=['honda','yamaha','suzuki']
motorcycles.insert(0,'ducati') # 在对应位置插入元素
print(motorcycles)
# 3.删除
motorcycles=['honda','yamaha','suzuki']
print(motorcycles)
del motorcycles[0] # 使用del语句删除对应位置元素
print(motorcycles)
motorcycles=['honda','yamaha','suzuki']
print(motorcycles)
popped_motorcycles=motorcycles.pop() # pop（）将最后一个元素弹出，也就是删除最后一个元素
print(motorcycles)
print(popped_motorcycles)
# 弹出列表中任何位置的元素
motorcycles=['honda','yamaha','suzuki']
first_owned=motorcycles.pop(0)
print(first_owned)
print(motorcycles)
# 根据值删除元素（不知道元素的位置）remove只能删除第一个指定的值，要删除的值可能在列表中多次出现，这就需要使用循环
motorcycles=['honda','yamaha','suzuki']
print(motorcycles)
motorcycles.remove('honda')
print(motorcycles)
# 组织列表
# 1.sort（）对列表永久排序
cars=['bmw','audi','toyota','subaru']
cars.sort(reverse=True) # 与字母顺序相反的顺序排列
print(cars)
# 2.sorted()对列表临时排序
cars=['bmw','audi','toyota','subaru']
print("Here is the original list:")
print(cars)
print("\nHere is the sorted list:")
print(sorted(cars))
print("\nHere is the original list again:")
print(cars)
# 3.反转列表元素的排列顺序
cars=['bmw','audi','toyota','subaru']
print("\n")
print(cars)
cars.reverse()
print(cars)
# 4.确定列表长度
print(len(cars))
# 5.使用列表索引时发生索引错误，可以尝试将列表或其长度打印出来。
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
