這篇文章主要為大家詳解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;}