css
barbed
这个作者很懒,什么都没留下…
展开
-
float实现12栅格系统
12栅格系统布局,需要几份就占份,比如4–8分;2–10分 下面的结果图是每个都只占一份 <style> /* 占一行中的一列 */ .col-1 { width: calc(100%/12); /* width: 8.33333%; */ } /* 占一行中的两列 */ .col-2 { /* width: 16.66666%;原创 2020-09-12 16:11:33 · 296 阅读 · 0 评论 -
position定位
position定位元素有相对定位、绝对定位、固定定位、粘性定位 position定位可以用来进行网页布局 1、相对定位: 相对于原先位置进行定位,在没有设置定位属性的情况下,默认在当前位置 。 相对定位不脱离文档流, 原先位置保留。 2、绝对定位: 如果有定位祖先元素,相对于离该元素最近的定位祖先元素进行定位, 如果没有定位祖先元素,相对于视口区定位。如果没有设置定位属性,那么在原来位置显示。 绝对定位脱离文档流,原先位置不保留。 3、固定定位 固定在视口区的某一位置,原来位置不保留,如果没有设置定位属性原创 2020-09-12 15:51:54 · 159 阅读 · 0 评论 -
Float浮动&清除浮动产生的影响
Float浮动:浮动元素脱离文档流,原先位置不保留,飘在文档流上方 一、兄弟元素之间的浮动 <body> <div class="one"></div> <div class="two"></div> </body> 1)、未浮动时 <style> .one { width: 100px; height: 100px; background-color原创 2020-09-12 15:21:34 · 282 阅读 · 0 评论 -
css图片精灵技术
1、CSS Sprites(图片精灵)技术可以减轻服务器的负载,提高网页加载速度。将网页需要的多个小图片整合到一张大图片上,原先需要访问多次服务器来获取对应的图片,现在可能只需要获取一张图片即可。 2、实现方式:给元素设置背景图片,重复方式为不重复,然后通过设置background-position属性来设置背景图片的位置。 3、使用图片精灵技术实现下面图片中音乐图标的显示 代码实现: div { width: 140px; height: 140px; /* 背景图片 */原创 2020-09-12 14:29:22 · 701 阅读 · 0 评论 -
css盒子水平居中
盒子水平居中 <body> <div class="one"> <div class="two"></div> </div> </body> ①利用margin:0 auto; <style> .one { width: 200px; height: 200px; background-color: rgb(155, 199, 199)原创 2020-09-12 14:05:49 · 347 阅读 · 0 评论 -
CSS选择器的优先级计算
1、行内样式,style属性内的特性值 1000 <div style="width: 100px;">one</div> 2、id选择器的特性值 100 #one { width: 100px; } <div id="one">one</div> 3、类选择器、伪类选择器、属性选择器特性值 10 /* 类选择器 */ .one { width: 100px; } /* 伪类选择器 */ div:first-child { he原创 2020-09-12 13:16:20 · 361 阅读 · 0 评论