详解Css常用操作分类方法
程序员文章站
2022-05-02 20:14:28
...
这篇文章主要为大家详解Css常用操作分类方法，感兴趣的小伙伴们可以参考一下
一、尺寸操作
height 设置元素高度
line-height 设置行高
.p1{
width: 400px;
line-height: normal;
}
.p2{
width: 400px;
line-height: 200%;
}
.p3{
width: 400px;
line-height: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="p1">This is my web page
This is my web page
This is my web page
This is my web page
This is my web page
This is my web page
</p>
<p class="p2">This is my web page
This is my web page
This is my web page
This is my web page
This is my web page
This is my web page
</p>
<p class="p3">This is my web page
This is my web page
This is my web page
This is my web page
This is my web page
This is my web page
</p>
</body>
</html>
max-height 设置元素最大高度
max-width 设置元素最大宽度
.p1{
line-height: normal;
max-width: 250px;
}
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度
二、分类操作
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
p{
cursor: auto;
}
p{
cursor: alias;
}
p{
cursor: cell;
}
display 设置是否及何时显示元素
li{
display: inline;
}
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
float 定义元素在哪个方向浮动
position 把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility 设置元素是否可见或不可见
li{
display: inline;
visibility: hidden;
}
li{
display: inline;
visibility: visible;
}
以上就是详解Css常用操作分类方法的详细内容，更多请关注其它相关文章！