標準格式注意：

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>