一：盒子模型
1.定义：
- html中的所有标签都可以看成是盒子
2.属性：
1.margin（外边距）:两个标签之间的距离
2.padding（内边距）:内标签边框外壁距离外标签边框内壁的距离
3.border（边框）:边框
4.content（内容）:标签内部的内容提供
3.属性值
1.取消body标签默认的外边距
body {
margin: 0;
}
2.margin的属性值
1.margin后面跟1个属性值：表示：上下左右
margin: 20px;
2.margin后面跟两2属性值：表示：上下左右
margin: 20px 30px;
3.margin后面跟3个属性值：表示：上左右下
margin: 20px 30px 40px;
4.margin后面跟4个属性值：表示：上右下左（顺时针）
margin: 20px 30px 40px 50px;
5.水平方向居中显示
margin: 0 auto;
3.padding的属性值
1.跟1个属性值：表示：上下左右
padding: 10px;
2.跟2个属性值：表示：上下左右
padding: 10px 20px;
3.跟3个属性值：表示：上左右下
padding: 10px 20px 30px;
4.跟4个属性值：表示：上右下左
padding: 10px 20px 30px 40px;
二：浮动布局
1.在css中的任何元素都能浮动
2.如何解决浮动造成的父类塌陷问题:
提前写好下面的代码，当遇到父类塌陷问题的时候，直接给塌陷的父类的class属性加上：clearfix
.clearfix: after {
content: '';
display: black;
clear: both;
}
3.示例：
<style>
.c1 {
border: 1px black solid;
}
.c2 {
height: 100px;
width: 100px;
background-color: green;
float: left;
}
.c3 {
height: 100px;
width: 100px;
background-color: gold;
float: right;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="c1 clearfix">
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
三：溢出属性
1.溢出属性不同的属性值
| 属性值 | 作用 |
|---|---|
| visible | 默认值，内容不会被修剪，有多大就溢出多大 |
| hiddle | 内容会被修剪，剪掉的内容不可见 |
| scroll | 内容被修剪，但是可以通过滚动条查看 |
| auto | 如果内容被修剪，滚动条可以查看其余没有没剪掉的内容 |
| inherit | 从父标签继承overflow属性值 |
2.如何正确的处理溢出问题
<style>
div {
height: 200px;
width: 200px;
border: 5px solid gold;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
四：定位
1.分类：
| 类型 | 作用 |
|---|---|
| static静态 | 默认值，所有的标签都不能直接通过定位修改位置，必须要切换到下面的三种状态中的任意一种 |
| relative相对定位 | 相对于标签原来的位置定位 |
| absolute绝对定位 | 基于已经定位过的父标签做定位，如果没有父标签则以body为父标签 |
| fixed固定定位 | 相对于浏览器窗口做定位 |
2.练习：
1.相对定位
div {
height: 100px;
width: 100px;
background-color: pink;
position: relative;
left: 200px;
}
2.绝对定位
.c1 {
height: 100px;
width: 100px;
background-color: pink;
position: relative;
}
.c2 {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
left: 100px;
top: 100px;
}
3.固定定位
.c1 {
height: 600px;
width: 100%;
background-color: pink;
float: left;
}
.c2 {
height: 600px;
width: 100%;
background-color: green;
float: left;
}
.c3 {
height: 600px;
width: 100%;
background-color: gold;
float: left;
}
.c4 {
height: 50px;
width: 50px;
background-color: gainsboro;
position: fixed;
float: right;
right: 30px;
bottom: 30px;
}
五：z-index
1.定义：
浏览器页面其实就是一个三维坐标系，z轴指向用户
2.使用：
1.z-index 数值大的压着数值小的
2.只有定位了的元素才能有z-index,浮动的元素不能使用
3.z-index值没有单位，是正整数，默认z-index值为：0
3.代码实现
<style>
body {
background-color: darkgray;
}
div {
height: 200px;
width: 200px;
background-color: #ffffff;
position: relative;
margin: 200px auto;
}
</style>
</head>
<body>
<p>我是最底层</p>
<div>
<p>username:<input type="text" name="username"></p>
<p>password:<input type="text" name="password"></p>
</div>
</body>
4.补充知识点：
opacity：用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明
opacity: 0.1;
六：JavaScript
1.基本内容
1.跟Java没有任何关系
2.JavaScript与ECMAScript的区别：早期由于版权问题用ECMAScript，后面改回到JavaScript
3.是一门编程语言
4.两种注释方式：
//单行注释
/*多行注释*/
5.建议结束符使用分号
6.支持编写JS代码的地方：浏览器，pycharm
2.变量与常量
1.定义变量和常量需要使用的关键字：
- 变量：var（全局有效）, let（局部有效）
- 常量：const
2.JS也是动态类型：变量名绑定的数据值类型不固定
var name = 'a'
name
'a'
name = 123
123
name = [1, 2, 3]
(3) [1, 2, 3]
3.JS数据类型之数值类型（number）
-
1.JS中不分整型和浮点型，统称为数值类型
-
2.查看数据类型的方法：typeof
-
3.类型转换：parseInt(), parseFloat()
-
parseInt('123') 123 arseInt('123.12') 123 parseFloat ('123') 123 parseFloat ('123.12') 123.12 -
4.NaN: 不是一个数字
-
parseFloat ('aaa') NaN
四：JS数据类型之字符串类型(string)
1.字符串的三种定义方式
let s1 = 'xie'
let s2 = "wang"
var s3 = `ming` 模板字符串
2.练习
var name1 = 'xie'
var age1 = 18
let s1 = `my name is ${name1},my age is ${age1}`
'my name is xie,my age is 18'
3.JS中字符串拼接建议使用’+'号
var name1 = 'xie'
var age1 = 18
name1+age1
'xie18'
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。