标准格式注意：

super()和this()调用语句不能同时在一个构造器中。

super()或this()调用语句只能作为构造器中的第一句出现。原因：

无论通过哪个构造器创建子类对象，需要保证先初始化父类。

目的是，当子类继承父类后，“继承”父类所有的属性和方法，因此子类有必要知道父类如何为对象进行初始化。

从结果上看：继承性

子类继承父类以后，就获取了父类中声明的属性或方法。

创建子类的对象，在堆空间中，就会加载所父类中声明的属性。

从过程上看：

当我们通过子类的构造器创建子类对象时，我们一定会直接或间接的调用其父类的构造器，进而调用父类的父类的构造器，…直到调用了java.lang.Object类中空参的构造器为止。正因为加载过所的父类的结构，所以才可以看到内存中父类中的结构，子类对象才可以考虑进行调用。

强调说明：

虽然创建子类对象时，调用了父类的构造器，但是自始至终就创建过一个对象，即为new的子类对象。

html标签分为两种，内联元素和块级元素，首先我们先了解一下内联元素和块级元素的概念：



块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)高度(height)属性，正常流中的块级元素会垂直摆放。常见块状元素为“div”



内联元素（行内元素）：内联元素只能容纳文本或者其他内联元素，是块级元素的后代，它允许其他内联元素与其位于同一行，不能设置高度（height）和宽度（width）。常见内联元素为“a”。



根据块级元素的概念我们可以理解为块级元素前后带有换行符，也就相当于元素前后加了一个<br>标签。我们可以把块级元素想象成一个块或一个矩形，所以块级元素能设置高度宽度属性



新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

例：

css文件:

 



复制代码



代码如下:

div1{ 

width:200px; 

height:200px; 

background:#666 

} 

div2{ 

width:200px; 

height:200px; 

background:#F00 

}





html文件： 

 



复制代码



代码如下:





<div id="div1"> 

div1 

块级元素排斥其他元素与其位于同一行 

</div> 

<div id="div2"> 

div2 

块级元素排斥其他元素与其位于同一行 

</div>





显示效果： 



两个div元素不位于同一行



 



根据内联元素的概念，我们可以理解为内联元素前后没有换行符。我们可以把内联元素想象成一条线，所以它不能设置height属性和width属性。



块级元素（block element）标签



address -地址

blockquote - 块引用

center – 居中对齐

dir -目录列表

div - 常用块级容易，也是CSS layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表



内联元素(inline element)



a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

dfn - 定义字段

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 定义打字机文本

————————————————

版权声明：本文为CSDN博主「前端学习线路」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/webxuexi168/article/details/104382660

一、你能学到什么？

①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性



css变量设置(两个布局都有的部分)

:root{

    / 左边栏宽度 /

    --lw:300px;

    /负左边栏宽度/

    --lwf:-300px;

    / 右边栏宽度 /

    --rw:400px;

    /负左边栏宽度/

    --rwf:-400px;

    / 高度 /

    --height:300px;

}



二、圣杯布局的html和css代码

html部分

  <div class="holyGrail">

    <div class="hg_main">main</div>

    <div class="hg_left">left</div>

    <div class="hg_right">right</div>

  </div>



css 实现对应的四个class

.holyGrail {

    height: var(--height);

    / 留出左右两栏的布局 为了字体不被覆盖/

    padding-left: var(--lw);

    padding-right: var(--rw);

}

.hg_main{

    width:100%;

    float: left;

    height: var(--height);

    background-color: blanchedalmond;

}

.hg_left{

    position: relative;

    left: var(--lwf);

    float: left;

    margin-left: -100%;

    width:var(--lw);

    height: var(--height);

    background-color: blueviolet;

}

.hg_right{

    float: left;

    margin-right: var(--rwf);

    width:var(--rw);

    height: var(--height);

    background-color: brown;

}





三、双飞翼布局的html和css代码

html部分

<div class="doubleWing">

    <div class="dw_main">

      <div class="dw_con">main</div>

    </div>

    <div class="dw_left">left</div>

    <div class="dw_right">right</div>

  </div>



css 实现对应的五个class

.doubleWing{

    padding-right: var(--rw);

}

.dw_left{

    float: left;

    margin-left: -100%;

    width:var(--lw);

    height: var(--height);

    background-color: blueviolet;

}

.dw_main{

    width:100%;

    float: left;

    height: var(--height);

    background-color: blanchedalmond;

}

.dw_con {

margin-left: var(--lw);

}

.dw_right{

    float: left;

    margin-right: var(--rwf);

    width:var(--rw);

    background-color: brown;

    height: var(--height); 

}



四、学会两个布局的注意点

圣杯布局

在最外边的类（holyGrail）左右要留出左栏和右栏的宽度（使用padding-left，padding-right)

中间的div.hg_main放在最上面，优先渲染，中间div自适应，width为100%

左中右栏的div都设置浮动，左栏通过margin-left:-100%移动到和中间的div同一起点，然后通过position: relative;

left: -（左栏的宽度）；会移动到最外层div的左内边距的区域（中间div的左边）

右栏可以通过margin-right:-(右栏的宽度)；移动到最外层div的右内边距的区域（中间div的右边）

双飞翼布局

在中栏的div再加一个div,设置margin-left:左栏的宽度，这样可以省略左栏的div使用postion和left的属性移动

最外层的div可以不用预留左栏的位置了

五、两个布局的对比的优缺点

布局 优点 缺点

圣杯 无多余dom 当中间的宽度小于左右的宽度时，结构混乱

双飞翼 可以支持各种宽度，通用性强较强 需要多加一层dom

代码下载地址

记得一定要自己去实现一下

CSS 选择器分组



CSS选择器分组，可以把定义相同属性的不同标签做为一组处理，缩短了CSS样式编写的时间和CSS样式表的大小。



例如希望h2和p标签的字体颜色都设置为黑色，则可以写成：



h2,p{color:black;}

通过分组，可以将相同属性的样式“压缩”在一起，这样就可以得到更简洁的样式表。例如：



/ no grouping /

h1 {color:blue;}

h2 {color:blue;}

h3 {color:blue;}

h4 {color:blue;}

h5 {color:blue;}

h6 {color:blue;}



/ grouping /

h1, h2, h3, h4, h5, h6 {color:blue;}



当有多个标签有相同属性时，可以抽出相同属性进行分组，不同的属性另外书写样式。



除了使用标签来进行相同标签CSS选择外，还可以使用类选择器来选择。



类选择器前面使用符号.



(1)基本使用



为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。例如：



<h1 class="important">This heading is very important.</h1>

<p class="important">This paragraph is very important.</p>

在样式表中定义：



.important {color:red;}

这样定义后，class为important的h1和p标签的字体颜色也就都是红色。



(2)结合元素选择器



类选择器可以结合元素选择器来使用。



例如，您可能希望只有段落显示为红色文本：



p.important {color:red;}

这个样式表示的是，所有class为important ，且为p标签的元素中的字体为红色。其他标签的无效。



(3)CSS 多类选择器



一个标签可以定义多class，则这个标签有这多个class的所有属性，例如：



<p class="important warning">This paragraph is a very 

important warning.</p>





.important {font-weight:bold;}

.warning {color:red;}



例子中为p标签定义了important和warning两个class,所以p标签的字体是加粗且字体颜色是红色的。

————————————————

版权声明：本文为CSDN博主「前端学习线路」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/webxuexi168/article/details/104349157

javascript中window.open()与window.location.href的区别

window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面，并不刷新

location.href(‘index.html’) 表示在当前窗口重定向到新页面，打开并刷新 index.html 这个页面



window.location 是 window 对象的属性，用来替换当前页，也就是重新定位当前页

而window.open 是 window 对象的方法，是用来打开一个新窗口的函数



// 打开新页面

// 注意：有些浏览器的安全设置会将window.open()屏蔽，例如避免弹出广告窗

window.open('./index.html');



// 在原窗口打开新页面

window.location.href＝"./index.html";



window.open()详解



window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')





参数解释： 三个参数

window.open 弹出新窗口的命令；

‘page.html’ 弹出窗口的文件名；

‘newPage’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；

height=100 窗口高度；

width=400 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值；

toolbar=no 是否显示工具栏，yes为显示；

menubar=no 是否显示菜单栏，yes为显示；

scrollbars=no 是否显示滚动栏，yes为显示；

resizable=no 是否允许改变窗口大小，yes为允许；

location=no 是否显示地址栏，yes为允许；

status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；



常用的js返回与刷新页面

在此用a标签举例





<a href="javascript: history.back(-1)">返回上一页</a> 

<a href="javascript:history.go(-1)">返回上一页</a> 

<a href="javascript:history.go(-2)">返回前两页</a> 

<a href="javascript:location.reload()">刷新当前页面</a> 

<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a> 





js





// 刷新当前页面

window.location.Reload();

self.location.reload();

window.location.href = window.location.href;

转自：站酷-姚成浩

弹性布局（Flex）

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

下面是一些弹性布局的基本语法：

两部分：

1. 语法是添加到父容器上的
   
           display : flex;（弹性盒子的标志哦！！！）
   
           flex-direction: row; 布局的排列方向 （主轴排列方向）
   
                row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
   
                row-reverse  显示为行。但方向和row属性值是反的
   
                column  显示为列
   
                column-reverse 显示为列。但方向和column属性值是反的
   
           flex-wrap : nowrap; 是否进行换行处理。
   
                nowrap; 默认值，不换行处理
   
                wrap; 换行处理
   
                wrap-reverse; 反向换行
   
           flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
   
           justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。  
   
               flex-start ： 子项都去起始位置对齐。
   
               flex-end ： 子项都去结束位置对齐。
   
               center ： 子项都去中心位置对齐。
   
               space-between : 表现为两端对齐。多余的空白间距在元素中间区域分配，两边没宽。 
   
               space-around : 边缘两侧的空白只有中间空白宽度一半即每个块都有左右间距。
   
               space-evenly :每个flex子项两侧空白间距完全相等。
   
           align-items : 每一行中的子元素上下对齐方式。
   
               stretch;默认值，flex子项拉伸
   
               flex-start;容器顶部对齐
   
               center;容器居中对齐
   
               flex-end;容器底部对齐
   
           align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
   
               默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
   
               值跟justify-content取值是相同的。
   
   
   
2. 语法是添加到子容器上的？
   
           order : 排序(值越大越后)
   
               0：默认值      eg:1234
   
               1：放在后面    eg:1342
   
               -2：放在前面   eg:2134
   
           flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )
   
               0 : 默认值 , 不去扩展
   
               0.5：占空隙的一半
   
               1 : 去扩展 , 会把空白区域全部沾满
   
            （ 注：子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。）
   
           flex-shrink : 收缩
   
               正常默认值是1
   
               0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）
   
           flex-basis : 跟flex-shrink/flex-grow很像。
   
               flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。
   
           flex : 一种复合写法
   
               flex-grow  flex-shrink  flex-basis
   
               flex:1;
   
                   flex : 1 1 0    
   
               flex:0;
   
                   flex : 0 1 0
   
           algin-self: 跟align-items操作很像，区别就是只是针对某一个子项。
   
               
   
   
   
   注：默认情况下，在弹性盒子中的子元素的左右排列的。
   
   注：
   
       水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
   
       垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
   
   
   
   注：当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
   
   注：当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
   
   
   
   注：弹性布局中用的频率比较多的语法：
   
       display : flex;
   
       flex-direction;
   
       justify-content;
   
       align-items;
   
       flex;
   
   
   
   注：弹性布局的优势是做一维布局，网格布局的优势是做二维布局。
   
   
   
   下面是弹性布局骰子案例代码：
   
   
   
   <!DOCTYPE html>
   
   <html lang="en">
   
   <head>
   
       <meta charset="UTF-8">
   
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
       <title>Document</title>
   
       <style>
   
           *{margin: 0;padding: 0;}
   
           ul{list-style: none;}
   
           a{text-decoration: none;}
   
           img{display: block;}
   
   
   
           .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
   
           .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
   
           .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
   
           .box2 div:nth-of-type(1){align-self: flex-start;}
   
           .box2 div:nth-of-type(2){align-self: flex-end;}
   
   
   
           .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
   
           .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
   
           .box3 div:nth-of-type(1){align-self: flex-start;}
   
           .box3 div:nth-of-type(3){align-self: flex-end;}
   
   
   
           .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 
   
           perspective: 500px;perspective-origin: right top;}
   
           #box .main{position: relative;width: 150px;height: 150px;margin: 125px;
   
           transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
   
           #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;}
   
           #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
   
           #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
   
           #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
   
           #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
   
           #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}
   
   
   
           #box:hover .main{transform:rotateY(360deg);}
   
       </style>
   
   </head>
   
   <body>
   
       <div id="box">
   
           <div class="main">
   
               <div class="box1">
   
                   <div></div>
   
               </div>
   
               <div class="box2">
   
                   <div></div>
   
                   <div></div>
   
               </div>
   
               <div class="box3">
   
                   <div></div>
   
                   <div></div>
   
                   <div></div>
   
               </div>
   
               <div class="box4">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
               <div class="box5">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
               <div class="box6">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
           </div>
   
       </div>
   
   </body>
   
   </html>