CSS要点_4

5 篇文章 0 订阅
5 篇文章 0 订阅

前端构图三大方法:1.标准流(块,行内,行内块)

                                 2.浮动(flow:top)

                                 3.定位(position:absolute,left、top为主)


口诀:子绝父相(子级块用absolute绝对,父级块用relative相对)

fixed和absolute均 脱标(不占原位置,display转变为行内块)


定位方式居中对齐:1.left:50%;

                                   top:50%;

                                   margin-left:-XXpx;(XX为定位块级宽度的一半)

                                   margin-top:-XXpx;

                                 2.left:50%;

                                    top:50%;

                                    transform:translate(-50%,-50%);

                                 注意:标准流常用的margin:0,auto;在定位中不好使。


显示层级:标准流<浮动<定位

                 定位中的覆盖层级:html里块级后来者居上;也可用z-index:XX(XX为整数,越大层级越靠上,只能配定位好使)


 对齐方式:1.文字:text-align水平

                                 line_height垂直

                   2.图片/行内块(当作文字处理):vertical-align


光标类型:


圆角:border-radius:10px;(四个角全是10px半径的圆,左上角开始顺时针设置,没有取对角)

           border-radius:50%;(正圆)

           border-radius:XX;(XX取长方形高度一半,胶囊型)


溢出:overflow


显示隐藏:display:none(常用)

                 visibility:hidden(占位,不常用)

 注意:控制的不是a标签,而是a标签下的图片img属性!


精灵图:一个大的盒子有多个功能的小图片


背景图片大小:background-repeat:no-repeat

                         background-size:如下

                         contain:某一方向填满,可能使盒子有空白;

                         cover:完全填满,可能图片显示不全;


盒子阴影:box-shadow


过渡:transition


SEO三大标签:title,discription,keywords

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值