技术扫盲分享系列002：小试 CSS

扫盲关键词：CSS、class（样式类）、style、margin、padding、border

概述

CSS：层叠样式表 (Cascading Style Sheets)。HTML代表内容，CSS代表样式，内容和样式分离是很重要的原则。

小试牛刀

目标页面

image.png

代码示例

    
    
    
    


    

        

            12
            (2016年江苏苏州苏州市景范中学校初三一模第6题4分)
            较易
        
        

            
阅读下面一首诗歌，完成下题。
            

                
游山西村
                
陆游
                

                    
莫笑农家腊酒浑，丰年留客足鸡豚。
                    
山重水复疑无路，柳暗花明又一村。
                    
萧鼓追随春社近，衣冠简朴古风存。
                    
从今若许闲乘月，拄杖无时夜叩门。
                
                
                
            
        
        

            
(1) “山重水复疑无路”经常被错认为是“山穷水尽疑无路”，请联系诗句，说说为什么要用“山重水复”?
        
        

            
(2) 关于本诗，下列说法有误的一项是?
            

                
A.诗歌朗读的节奏可以按音节兼顾意义来划分，例:“衣冠/简朴/古风/存”。
                
B.“丰年留客足鸡豚”一句写出了农民热情好客、淳朴厚道的性格。
                
C.全诗生动地描绘了优美的农村风光，充满了浓郁的生活气息。
                
D.全诗在写实中按时间推移展开叙述，层次清晰，表达了诗人的闲适心情。
            
        
    

知识补充

盒子模型

image.png

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

块级元素与内联元素

• display:block
  • block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  • block元素可以设置width，height属性。块级元素即使设置了宽度，仍然是独占一行。
  • block元素可以设置margin和padding属性。
• display:inline
  • inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  • inline元素设置width，height属性无效。
  • inline元素的margin和padding属性，水平方向的padding-left， padding-right， margin-left， margin-right都产生边距效果；但竖直方向的padding-top， padding-bottom， margin-top， margin-bottom不会产生边距效果。
• display:inline-block
  • 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。