python 学习之前端css、js
.CSS盒子模型
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
元素的宽度和高度
重要：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。
实例
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
计算如下：
320px(宽度)
+ 20px（左+右内边距）
+ 10px（左+右边框）
+ 0px（左+右外边距）
= 350px
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
margin外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
推荐使用简写：
.margin-test {
margin: 5px 10px 15px 20px;
}
顺序：上右下左
常见居中：
.mycenter {
margin: 0 auto;
}
padding内边距
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
推荐使用简写：
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序：上右下左
补充padding的常用简写方式：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
浮动布局
| 性 | 描述 | 值 |
|---|---|---|
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit |
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit |
float属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
浮动会造成父标签塌陷，这是一个不好的现象。解决浮动造成的父标签塌陷：
.clearfix:after {
content: '';
display: block;
clear: both;
}
/* 提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可 */
溢出属性
Overflow
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容溢出不会被剪裁，会呈现在元素框之外。 |
| hidden | 内容溢出被剪裁，其余内容将不可见 |
| scroll | 内容溢出被剪裁，同时添加滚动条以查看其余内容其余的内容。 |
| auto | 与 scroll 类似，但仅在必要时添加滚动条 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注释：
overflow属性仅适用于具有指定高度的块元素。注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。
-
overflow: visible
默认情况下，溢出是可见的(
visible)，这意味着它不会被裁剪，而是在元素框外渲染：div { width: 100px; height: 50px; background-color: rgb(193, 193, 193); overflow: visible; }当您希望更好地控制布局时，可以使用 overflow 属性。overflow 属性指定如果内容溢出元素框会发生什么。
overflow-x 和 overflow-y
| 属性 | 描述 |
|---|---|
| overflow | 规定如果内容溢出元素框会发生什么情况。 |
| overflow-x | 规定在元素的内容区域溢出时如何处理内容的左/右边缘。 |
| overflow-y | 指定在元素的内容区域溢出时如何处理内容的上/下边缘。 |
Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
- static（静态定位）- 默认情况下的定位方式
- relative（相对定位）- 相对于其正常位置进行定位
- fixed（固定定位）- 相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置
- absolute（绝对定位）- 相对于最近的定位祖先元素进行定位
- sticky（粘性定位）- 根据用户的滚动位置进行定位
ps：子绝父相
z-index
#i2 {
z-index: 999;
}
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
JavaScript
- JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
注释语法
// 这是单行注释
/*
这是
多行注释
*/
变量与常量
变量是用于存储信息的"容器"。
在JS中声明变量和常量都需要使用关键字
- var：全局有效
- let：如果在局部名称空间中使用 那么仅在局部名称空间有效
- const：定义常量
注意：
变量名是区分大小写的
推荐使用驼峰式命名规则
保留字不能用做变量名。
var pi=3.14;
// 如果你熟悉 ES6，pi 可以使用 const 关键字，表示一个常量
// const pi = 3.14;
var person="kwan";
var answer='111';
JS也是动态类型：变量名绑定的数据值类型不固定
var name = 'kwan'
name = 123
name = [11, 22, 33, 44]
数据类型
值类型(基本类型)：
- 字符串（String）
- 数字(Number)
- 布尔(Boolean)
- 空（Null）
- 未定义（Undefined）
- Symbol
引用数据类型（对象类型）：
- 对象(Object)
- 数组(Array)
- 函数(Function)
还有两个特殊的对象
- 正则（RegExp）
- 日期（Date）
变量的数据类型可以使用 typeof 操作符来查看
数值类型
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
NaN，表示不是一个数字（Not a Number）
字符串类型
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
拼接字符串一般使用“+”
浙公网安备 33010602011771号