div+css å¦ä½è®©èæ¯å¾ç横å缩å°æ¹æ³
æ¹æ³/æ¥éª¤
1ãé¦å ï¼éè¦æ°å»ºä¸ä¸ªhtml页é¢ï¼å¹¶å¨é¡µé¢ä¸åä¸ä¸ä¸ªdivã并为divæ·»å èæ¯å¾çï¼ä¸ºèæ¯å¾çæ·»å ä¸äºåºæ¬çæ ·å¼ã
2ãç¶åï¼æä¸é®çä¸çF12ï¼æ¥çå ¶å¨æµè§å¨ä¸çææãææè¯å®æ¯é¡µé¢ä¸æ²¡æç¸åºçèæ¯å¾çï¼çç±æ¯åçæ¯èæ¯å¾çï¼æ æ³å°divæèµ·ä¸å®çé«åº¦ã
3ãæ¢ç¶ä¸è½æèµ·æ¥ï¼ä¹ä¸è½å纯ç为div设置é«åº¦ï¼è¿æ ·æ æ³è§£å³ä¸å大å°èæ¯å¾ççé®é¢ï¼å¯ä»¥å©ç¨cssä¸ç伪å ç´ ::afteræè ::before
4ãå¯ä»¥ç®åç解éä¸ä¸ï¼å©ç¨ä¼ªå ç´ æ¯å°æå®æ ç¾çåé¢æè åé¢çå 容设为空ï¼å¹¶è®¾æåå ç´ ï¼å¹¶è®¾å®ä»¥ç¾åæ¯ä¸ºåä½çpadding-bottomæè padding-topã以æ¤æå¼è¿ä¸ªdivã
5ãå¦ä¸ç§æ¹æ³æ¯ï¼æ们å¨æèæ¯å¾ççdivçå é¨åå¥ä¸ä¸ªdivï¼ç¶å为è¿ä¸ªå é¨çdivæ·»å ç¸åºçæ ·å¼ï¼ä½¿å¾å¤å±divå¯ä»¥è¢«æèµ·æ¥ã
6ãè¿ééç¨çæ¯å第ä¸ä¸ªç¸åçåæ³ï¼ä¸ºè¿ä¸ªå é¨div设å®å é¨è¾¹è·ä¸æè ä¸é½å¯ä»¥ãåæ ·æ¯ä»¥ç¾åæ¯ä½ä¸ºåä½ãè¿æ ·æ们å次å¨æµè§å¨ä¸æ¥çï¼å°±å¯ä»¥çå°ä½ä¸ºèæ¯çå¾çäºã
7ãä¸ç®¡éç¨æ¹æ³ä¸è¿æ¯æ¹æ³äºï¼é½æ¯è®¾ç½®çä¸ä¸çå è¾¹è·èä¸æ¯å¤è¾¹è·ï¼å¹¶ä¸è¦ä»¥ç¾åæ¯ä½ä¸ºåä½ã