HTMLl和CSS基本知識點，HTMLlCSS知識點

HTMLl和CSS基本知識點，HTMLlCSS知識點

1.HTTP:超文字傳輸通訊協定 (HTTP)
　　HTTP請求（HTTP request）部分：

• • 　　　　請求行【HTTP方式（get或者post）；請求url；HTTP版本】
  • 　　　　要求標頭
  • 　　　   空行
  • 　　　　訊息體

　　HTTP響應（HTTP response）部分：　　　

• • 　　　　狀態行【HTTP版本；響應碼；響應描述】
  • 　　　　回應標頭
  • 　　　　空行
  • 　　　　訊息體

2.常見特殊符號

• 空格　　  
• 小於＜ 　<
• 大於＞    >
• 著作權號© ©
• 登入® ®
• and &    &
• 長破折號 —

3.常見區塊層級元素和內嵌元素

　　區塊層級元素:區塊層級元素定義的文本會換行；
　　　　div,列表系列（ol,ul,dl),fieldset,form,p,h1-h6,hr,table
　　內嵌元素:內嵌元素定義的文本不會換行，
　　　　span,a,img,lable,input系列,iframe,object

4.css選取器及權重問題:
　　　　　　　　　　1　　1　　1　　1
　　元素　　  　　　　　　　　　　　　1 　　　　　 列如：p{}
　　類,屬性及偽類                     1                         列如：.class{};input[type=text]{};
　　id                             1                                列如：#id{};
　　內嵌                1                                          列如：<p>注意：在寫外邊距的時候，如果有兩個靠在一起的，它們的左右外邊距是相加的，但是上下的外邊距會只取最大的外邊距；不會將兩個外邊距的屬性相加;

　　　　並且margin 還可以有負邊距 ；

　　border: 邊框 ， 書寫方式同margin 類似的 只是border可以設定顏色和樣式 ，書寫： 

　　　　border: 5px solid;　　　　border: 5px dotted red;　　　border:5px dashed;　   border:5px double; 　　　border: 5px ridge;  等等樣式

　　　　　　　　　　　　   　   　　　　　     　　　　　　　　　　　　　　　

　　　padding:盒模型內邊距，書寫方式與margin類似，只是在寫padding 的時候會影響內部文字的排版，並且padding有負邊距的寫法；

　　　　　　列如：

　　　　沒padding的時候： 　　　　　　　　　　　　　　　　　　　　　　　　　　　padding：10px;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 

　　　　注意： 書寫盒模型的padding的時候，給元素添加了padding 會使得盒模型的整體都添加與bottom同等的尺寸；

7.浮動:float

　　float的值可以為： none / left/right  none為預設值  left 表示將元素往左浮動； right 表示將元素往右浮動 ；

　　注意：在使用浮動的時候，因為浮動的元素會脫離正常文本的文檔流，即該元素已經不再正常的文檔中了，如果後面有內容就會填充改元素原有的位置；所以為了讓後面的元素　　　　不會佔有該元素的位置，就需要的浮動的元素進行清除浮動處理，用clear 清除浮動影響；

　　　　　元素浮動時，該元素將會被視作塊級；

　　　　　浮動的元素如果沒有設定寬度，那麼該元素將會被摺疊為最小的寬度；

　　　　　浮動的元素只會在父級元素中移動，不會穿過其父級元素的padding；

　　　　　浮動的元素不會產生重疊；

8.定位:position 

　　position 的值可以為： static （靜態定位）relative(相對定位) absolute(絕對位置) fixed（固定定位）

　　在定位當中除了static （靜態定位）、relative(相對定位) 定位的時候不會脫離文檔流，其它的定位都會脫離文檔流；

　　注意：absolute（絕對位置）是絕對於父級的定位，因此使用  absolute(絕對位置)定位的時候一定要注意父級是否定位，如果父級沒有定位就會一層一層往上找，一直找到定　　　位的，如果所有的父級都沒有定位，該元素的定位就會絕對於body定位；

　　　　　　fixed（固定定位）的定位如論在哪層都會絕對於body定位，因此在使用時注意；

 

9.溢出處理:overflow

　　overflow  的值為visible(該值為預設的) /hidden（隱藏）/scroll （超出的就加捲軸）/auto （必要時才裁剪內容並添加捲軸） 

　　其中overflow 還可以只為x 或是y 方向的溢出做裁剪或是添加捲軸；

10.可見度的設定:visibility 和 display

　　visibility  的值為 visible（可見）/ hidden （隱藏）/ inherit(繼承父級顯示內容)

　 　　　注意：visibility 定義屬性時同樣會保留原來的顯示空間；

　　display  的值為 none(表示隱藏，同時不會保留原來佔有的位置)/ block(表示顯示，同時將元素轉換為塊級)/inline(同樣可以為顯示，只是將元素轉化　　為內嵌級)/inline-block(顯現，同時將元素轉化為可具有block和inline的屬性的元素)