前端构图三大方法: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
CSS要点_4
最新推荐文章于 2024-11-01 10:52:38 发布