HTML5学习笔记(1.0)

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

浏览器不出现滚动条：

::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;

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: HTML5

返回列表

HTML5学习路线1年前 (2023-02-09)