css復習ノート、基礎知識集錦

1467 ワード

css復習ノート、基礎知識集錦


一、復習回顧1.Web構造------html Webレイアウトの3つの要素:ボックスモデル、フローティング、位置決め(1)ボックスモデル:インライン要素、ブロックレベル要素
ブロックレベル要素:p/div/hn(h 1~h 6)/ol秩序/ul/li/table/tr行/td列/th/form...header/section/article/aside/footer[html 5構造化フラグ]
	  :1.     
		 2.             
		 3.         
		 4.margin  padding    
		 5.                 
	    :p  (           )	 

インライン要素:a/img/br/b/span/strong/em/i/input/button/textarea/select...特徴:1.ネストできるのは、インライン要素2のみです.1行に表示されます.marginとpaddingは左右方向に有効である.高さと幅は変更できません.背景画像の特例設定不可:img
               :  display

(2)フローティング:左フローティング、フローティングあり
(3)位置決め:絶対位置決め、相対位置決め、固定位置決め
2.ウェブスタイル----css(1)ボックスモデル:1)display:block(ブロックレベル)/inline(インライン)/inline-block(インラインブロック)2)4つの構成部分:コンテンツ(content)、充填(padding)、枠線(border)、マージン(margin)padding/border/margin値順border:5 px 10 px 15 px 20 px-上下左下5 px 10 px 15 px-上下左右5 px 10 px-上下左右5 px 10 px-上下左右5 px-上下左右5 px
(2)フローティング:float:right/left/フローティングが周囲の要素に与える影響----1)後の兄弟要素に与える影響:明確:clear:right/left/both
2)親要素への影響:高度な集約消去方法1--overflow:auto(自動)スクロールバー/scrollとスクロールバー/hiddenを自動的に追加できる内容非表示(共通)方法2-親要素のすべての子要素の最後に、空のdivまたはbrを追加し、clear:bothメソッド3を設定する-親要素に擬似要素afterを設定する
(3)位置決め:position:absolute/relative/fixed--絶対、相対、規定1)参照物–絶対位置決めの参照物:祖先要素(彼のいくつかを含む)であり、彼に最も近い祖先相対位置決めの参照物:要素自体(自己)固定位置決めの参照物:ブラウザ
--absolute
2)方向属性と合わせてtop:5 pxを使用する必要があります.left:10px/left/bottom/right
3.ウェブ行動------JavaScript
【4.JS三大フレームの一つVue.js】