HTML5学习笔记(1.0)
  TEZNKK3IfmPf 2天前 7 0

浏览器不出现滚动条:

::webkit-scrollbar{
display:none;
}

css样式中的所属关系表达式:

.content{}        //点表示类,后面content表示类名
.content div{} //类content下的 div标签
.content div>ul{} //类content下的div标签下的亲儿子ul标签

设置弹性布局:

body{
display:flex;
}

弹性布局折行显示:

body{
display:flex;
flex-wrap:wrap;
}

控制弹性盒行间距:

body{
display:flex;
flex-wrap:wrap;
align-content:flex-start; //flex-end,center,space-between,space-around;
}

控制块元素边距:

{
margin-top:
margin-bottom:
margin-left:
margin-right:
margin:apx bpx cpx dpx;
}

弹性盒自动控制滚动条:

overflow:auto;

无序列表不显示前面的点:

{list-style:none;}

弹性盒水平方向排列:

ul{
overflow:auto;
}
ul li{
flex-shrink:0; //不允许被挤压
}

鼠标移动变色:

ul li:hover{
background:#ffffff;
color:blue;
}

控制显示的列数:

{column-count:5;}

调整列间距:

{column-gap:xx px;}

调整列边框(列与列之间的分割线):

{column-rule:npx solid red;}

列高度统一:

column-fill:balance;  //auto

调整列宽:
 

column-width:npx;

元素横跨列:

column-span:none;    //all;

分列时不允许元素折行:

break-inside:avoid;
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2天前 0

暂无评论

TEZNKK3IfmPf