1. Floating
1. After clearing the floating
element, once the floating element is floated, the element behind it must move forward and occupy the place, which may be pressed down by the floating element. If the following elements do not want to come forward and occupy the place, you can solve the problem by clearing the floating effect
1、语法
属性：clear
取值：
1、none
默认值，不做任何清除浮动操作的
2、left
清除当前元素前面元素左浮动带来的影响，即不会被前面元素左浮动压在底下
3、right
清除当前元素前面元素右浮动带来的影响，即不会被前面元素右浮动压在底下
4、both
清除情面元素任何一种浮动方式所带来的影响
2、浮动元素对父元素高度的影响
由于浮动元素会脱离文档流，所以不占据页面空间的，那么也就不占父元素的空间。所以父元素的高度是以未浮动的子元素为准的。
解决方案：
1、为父元素设置高度
弊端：不一定每次都清楚高度是多少
2、让父元素也浮动
弊端：会对父元素后面的元素产生位置影响
3、设置父元素的overflow为hidden或auto
弊端：有溢出要显示的元素也一同隐藏了
4、在父元素中追加空块级子元素，并设置其clear属性为both2. Other positioning
1. Related attributes
1. Positioning method
attribute: position
Function: Change the positioning method of the element
Value:
1. static - static, default value
2, relative - relative positioning
3, absolute - absolute positioning
4, fixed - Fixed positioning
Note: If the position of an element is set to any of relative/absolute/fixed, then the element is called a "positioned element"
2. Offset attributes (4 in total)
function: cooperate with the positioned element to achieve the position The movement
property of: top / right / bottom / left
Value: number in px
top: move the element based on the top edge of the element
right: move the element based on the right edge of the element
bottom: ...
left: . ..
2. Positioning method - relative positioning
1. What is relative positioning?
An element will be offset by a certain distance relative to its original position
. 2. Syntax
attribute: position
value: relative
cooperates with the offset attribute to realize the movement of the element position
:
Create a ul, four li
float left, set the size to 100*30, 10px right margin
1, use relative positioning to complete
When the mouse hovers over the li, the li is offset by 10px to the upper left corner
2. Use the margin method to complete the above operation
3. Positioning method - absolute positioning (difficulty)
1. What is absolute positioning & features
1. Absolutely positioned elements will be detached Document flow - does not occupy the page
space
Use the body to initialize the position
2. Syntax
attribute: position
value: absolute
cooperates with the offset attribute to realize the positioning of the position
3. Note that
the absolutely positioned element will become a block-level element
(if an inline element is made absolutely positioned, it can be Directly modify the size)
4. Stacking order
1. What is the stacking order
Specify the arrangement order of elements stacked together
2. Syntax
attribute: z-index
value: unitless number, the larger the number, the higher the front, the default value is 0
3 , Note
1. If the stacking order is the same, the latecomer will be on top
2. Only positioned elements can use z-index
relative/absolute/fixed
3. Between parent and child elements, the child is always pressed on the parent, not affected by the stacking order
5. Positioning method - fixed positioning 1.
Syntax
attribute: position
value: fixed
2. Note 1. Fixed-positioned elements
will become block-level
2. Fixed-positioned elements are always initialized relative to the body.
<div>
<p>
<span>
<b></b>
</span>
</p>
</div>
Display
1. Display mode
1. What is the display mode
? What kind of way is the element displayed on the page (block level/inline/inline block)
2. Syntax
attribute: display
value:
1. none
makes the element not displayed- Hidden out of the document flow - does
not occupy the page space Inline elements and text can be displayed in one line 2. Inline block elements allow modification of size 2, display effect 1, visibility attribute role: control the visibility attribute of the element: visibility value: 1, visible default value, visible 2, Hidden is hidden , not separated from the document flow, so it still occupies the page space 2. The role of transparency attribute: Change the transparent effect attribute of the element: opacity value: 0 (completely transparent) ~ 1 (completely opaque) 3. Vertical alignment attribute attribute: vertical-align
放在td中：相当于是 valign的效果
取值为 top / middle / bottom , 其中middle是默认值
放在图片和行内块元素中：
设置元素两端的文本相对于元素的垂直对齐方式取值：
top : 顶部对齐
middle : 居中对齐
bottom : 底部对齐
baseline : 基线对齐(默认值)
注意：
有图片的时候，尽量将图片的vertical-align更改为baseline以外的其他值
3、光标
作用：改变鼠标悬停在元素上时鼠标的样子
属性：cursor
取值：
1、default
2、pointer ：小手
3、text ：I
4、crosshair ：+
5、wait ：等待
6、help ：帮助
练习：
创建网页04-cursor.html
创建一个div，内容随意
鼠标悬停在元素上的时候，尝试上述的值2. List
1, list-style-type
value:
1, none (no logo is displayed)
2, disc
3, circle
4, square
…
2、list-style
属性：list-style
取值：none3. Transformation attribute - transform
1. What is transformation?
A way to change the position, size, and angle of an element on the page
2. Attribute
1. Transformation attribute
Attribute: transform
value:
1.
The default value of none, without any transformation effect
2 . , Conversion function
If there are multiple conversion functions, separate them with spaces
2. Conversion origin
1. What is the conversion origin
A point around the conversion operation is the conversion origin
2. Syntax
attribute: transform-origin
value: two Values, separated by spaces
1, number in px
2, number
3 in %, keywords
top / bottom / center / left / right
Note: The default transition origin is at the center of the element
3 , transformation effect
1, displacement
1, the effect
changes the position of the element on the page
2, syntax
attribute: transform
value (function):
1, translateX(x)
x represents the displacement distance (horizontal)
value of the element on the x-axis Positive, the
value of element right shift is negative, element left shift
2, translateY(y)
y represents the displacement distance of the element on the y axis (longitudinal)
The value is positive, the value of the element moving down
is negative, the element moving up
3, translate(x) is
equivalent to translateX(x)
4, translate(x, y)
performs the displacement operation on the x-axis and y-axis at the same time
2. Scaling
1. The function
changes the size of the element on the page.
2. Syntax
attribute: transform
value (function):
1. scaleX(x)
x represents the horizontal scaling ratio.
The default value of x is 1, that is, the number whose original scale is
greater than 1: enlarged A number whose scale is greater than 0 and less than 1 : the
reduction scale is less than
0: the extremes will be
reversed The scaling ratio is the same 3. Rotation 1. The function changes the angle of the element in the web page. 2. Syntax attribute: transform value (function): 1. rotate(ndeg) n is positive, and clockwise rotation n is Negative, rotate counterclockwise 3. Note 1. Converting the origin will affect the conversion effect
2. When rotating, it will rotate along with the coordinate axis. Will affect the displacement after rotation
练习：
1、创建网页，创建一个圆形元素 200*200
2、鼠标悬停在元素上的时候
1、元素向右位移500px 并且 同时旋转3圈
2、使用过渡效果体现上上述功能=====================================================
1. Overview of JavaScript
1. What is Javascript JavaScript, abbreviated as JS, is an interpreted scripting language that
runs in a JS interpreter/engine In the web page, the name is CMM (c--), and it was renamed ScriptEase 2. In 1995, Netscape (Netscape) developed another scripting language for its browser Navigtor 2.0 - LiveScript, which was later renamed JavaScript 3. 1996 In 1997, Microsoft opened a JavaScript clone JScript 4 for its IE3.0. In 1997, Netscape found ECMA (European Computer Manufacturers Association). Netscape handed over the core module of JavaScript to ECMA. Since then, the core of JS was renamed ECMA Script, or ES for short.
JS的组成：
1、核心 - ECMAScript
包含了JS中最基本的语法规范
2、浏览器对象模型 - BOM
Browser Object Model
允许JS操作浏览器
3、文档对象模型 - DOM
Document Object Model
允许JS操作HTML里的内容How to use JS
1. Write JS code in element events
Events: some behaviors triggered by the user on the element
onclick: The operation to be done when the user clicks on the element
Syntax:
<ANY onclick="JS execution code">
JS execution Code:
console.log("output a sentence to the console");
console.log('output a sentence to the console');
2. Embed the code in <script></script> in the web page
Syntax:
in <script></script>
<script>
JS executable code
</script> can be embedded anywhere on
the
webpage
document.write("向网页中输出的一句话");
注意：如果将document.write()放在按钮中的话，在执行时，则会刷新网页中的内容
练习：
在一个按钮中，单击时，执行 document.write()
3、将JS执行代码编写在JS文件中
1、创建一个js文件(xxx.js)，并编写JS代码
2、在使用的网页上，对js文件进行引入
<script src="JS文件路径"></script>
注意：
在引入的JS的标记中，不能编写js代码
<script src="xxx.js">
console.log();
</script>
以上写法是错误的!
练习：
1、使用元素事件方式，向控制台中输出一句话"我的第一个JS练习"
2、使用<script></script>，向网页中输出一句话"我的第一个JS练习"
3、使用外部JS文件的方式，在网页中弹出一句话 "我的第一个JS练习"2. The basic grammar
of JS 1. JS is composed of statements
1. It is composed of operators, keywords or expressions
2. JS is strictly case-sensitive
console.log('');
Console.log("" ); //Error, C cannot be capitalized
3. Each statement must end with ;
2. Comment on a
single line: //
Multiple lines: //
3. Variables and constants in JS
1, Variable
1, declare variable
declaration: var variable name;
assignment: variable name = value;
declare and assign: var variable name = value;
var uname = "Wang Xiaoming";
console.log(uname);
2. Note
1. When declaring variables, try to use the var keyword. It can be omitted, but it is easy to cause problems
2. If the declared variable is not assigned a value, the default value is undefined
3. The naming convention of variable names
1. It cannot be a keyword or reserved keyword in JS
2. It consists of letters, numbers, and underscores ( ) and $ form
var $ = 35;
var = 46;
3. Can't start with a number
var 1=1; //Error
4. Try not to repeat
5. Try to know the name
var a;
var b;
var c;
var age;
var uname;
var gender;
6、如无特殊需求的话，尽量使用小驼峰命名法
var age;
var userName;
var name = ""; //不能用
4、变量的使用
1、为变量赋值
只要变量出现在赋值符号(=)的左边，一律是赋值操作
var age = 35;
var newAge = age;
2、获取变量的值
只要变量没出现在赋值符号的左边，一律都是取值
var age = 35; //赋值
console.log(age);//取值
var newAge = age;//newAge：赋值，age：取值
age = age + 35;
2、常量
1、什么是常量
一经声明就不允许被修改的数据就是常量
2、语法
const 常量名=值;
注意：
1、常量声明好之后是不允许修改的，所以一定要赋初始值
2、常量名一般采用全大写形式
练习：
1、创建一个网页 04-const-exer.html
2、声明一个常量PI，赋值为3.14
3、声明一个变量r,表示一个圆的半径,随意赋值
4、通过PI和r计算该圆的周长，并将结果保存在变量l中，并打印输出
5、通过PI和r计算该圆的面积，并将结果保存在变量s中，并打印输出
输出格式（控制台）
半径为...的圆的周长是...
半径为...的圆的面积是...
保留到n位小数：
var l = 3.1415926;
l = l.toFixed(n);4. Data types
The data types in JS are divided into the following two categories:
1. Basic data types
1. Number type
digital type, which can represent 32-bit (4-byte) integers and 64-bit (8-byte) floating-point numbers
Integer:
Represents decimal, octal, hexadecimal
decimal: var num=10;
octal: var num=010;
hex: var num=0x10;
decimal:
decimal notation: var num=123.456;
exponential notation: var num = 1.8e2;
2. String type
String type
consists of Unicode characters, numbers, and punctuation.
Note: Strings must be caused by "" or '' when using them.
1. Check the Unicode code of the character
var str = "Zhang" ;
var uCode=str.charCodeAt().toString(16);
2. How to convert Unicode code to corresponding character? ?
Known Unicode code: 5f20
var str = "\u5f20";
console.log(str);
3. Chinese range
"\u4e00" ~ "\u9fa5"
4. Escape character
\n : newline
\t : a tab
\" :
\ : \
3, boolean type
Boolean type, only used to represent true (true) or false (false)
usually represents the result of the condition
Note:
boolean type can participate in number operations, true as 1 to operate, false as 0 Operation
var r = 1 + true; // the result is 2
var r = 3784 * false; // the result is 0
var r = true + false; // the result is 1
4. Check the data type
Use typeof() or typeof to check the variable data type
2, reference data type
5, data type conversion
1, implicit conversion
In most addition operations, if the data types are inconsistent, implicit conversion can be performed
1, number + string: convert the number to a string
var num = 15; //number
var str = "18"; //string
var r = num + str; // 1518
var r = "15"+18+15;//151815
var r = "15"+(18+15);// 1533
var r = 15+18+"15";//3315
2、数字 + 布尔 ：将布尔类型转换为number
var r = 35 + true ; //36
3、字符串 + 布尔 ：将布尔转换为字符串
var result = "你好" + true;
结果为：你好true
4、布尔 + 布尔 ：将布尔转换成数字
var r = true + true;
结果：2
注意：
任何数据类型与字符串做"+"运算时，都是先转换成字符串再做拼接
2、强制转换(显示转换/转换函数)
1、toString()
将任意类型的数据转换成字符串，并返回转换后的结果
var num = 15;
var r = num.toString();
var num = 15;
var r = num + "";
2、parseInt()
作用：将任意类型的数据尽量转换成整数，如果实在无法转换的话，则返回 NaN(Not a Number)
ex:
1、
var r = parseInt("13");
r : 13
2、
var r = parseInt("13.5");
r : 13
3、
var r = parseInt("13你好");
r : 13
4、
var r = parseInt("你好13");
r : NaN
3、parseFloat()
作用：尽量将任意类型的数据转换为小数
1、
var num = parseFloat("35.07");
num : 35.07
2、
var num = parseFloat("35.7你好");
num : 35.7
3、
var num = parseFloat("你好35.7");
num : NaN
4、Number()
作用：将指定的数据转换成数字，只要包含非法字符的话，结果就为NaN
1、
var r = Number("35.5");
r : 35.5
2、
var r = Number("35你好");
r : NaN
3、
var r = Number("你好35);
r : NaN
练习：
1、创建网页08-dataType-exer.html
2、弹出一个输入提示框
var input = window.prompt("提示文字：");
input变量中，保存的就是用户输入的数据
3、要求从输入提示框中输入一个数字
4、将输入的数据 + 10，打印计算后的结果
5、使用typeof函数查看输入数据的数据类型
6、将输入的数据转换为数字，再 + 10查看结果
注意：
只要从网页中获取到的数据，永远都是string类型的