各种属性的应用

102 阅读2分钟

修饰属性

列表属性

微信图片_20230829180344.jpg

背景属性

微信图片_20230829180932.jpg

注: 【1】在background-repeat中 repeat:默认平铺(背景框太大会重复排列;背景框太小则只显示一部分) repet-x:x轴平铺 repeat-y:y轴平铺 no-repeat:不平铺
   【2】background-position 1. 20px 20px 2. 10% 10% 3. left;center;right;top;bottom
   【4】background-size 1. 400px 400px    2.10% 10    3. cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。也许无法显示在背景区域中。    4. contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。铺不满盒子,留白。

复合写法:1.用空格隔开
                 2.顺序可以换
                 3.可以只取一个值,放在后面能覆盖前面的值。

浮动属性

微信图片_20230831174601.jpg 微信图片_20230831174926.jpg

正常文档流,竖向排列,独占一行。若一方浮动,另一方不浮动,则会产生重叠现象;若均设为浮动,则不会产生覆盖现象,各元素会产生见缝插针的现象

微信图片_20230831181957.jpg 微信图片_20230831181954.jpg

取消浮动覆盖现象

【1】写固定高度

微信图片_20230831180459.jpg

                                                                                                        【2】清浮动 clear:none/left/right/both

微信图片_20230831180126.jpg

                                                                                                        【3】当前浮动元素后面补一个盒子,不设置宽高,clear:...

微信图片_20230831181331.jpg

                                                                                                       【4】overflow:hidden,让浮动元素计算高度(bfc)

微信图片_20230831181529.jpg