一、顯示隱藏
visibility：
hidden（保留原來的空間）
visible（可見的，默認）
display：
none（不會保存原來的空間）
block（塊級標簽）
inline（行內標簽）
inline-block（行內塊級）
flex（彈性布局）
二、寬高
1.單位：
px、vw(頁面寬度百分比 履肃，100vw代表100%寬度)、vw(頁面高度百分比 坐桩，100vw代表100%高度)尺棋、cale函數(shù)（計算剩余空間 ：100vw-50px）
2.寬高問題
里面只有一個標簽設置高為百分百的話，只會占字體那么大
只有把樣式body的高度變成百分百
三绵跷、字體
1.font-family 字體家族
2.字體顏色
顏色單位：
英文單詞膘螟、十六進制、rgb（三原色）碾局、rgba（最后一個為透明度）
3.字體粗細
font-weight取值為：
100~900
400等同于normal
700等同于bold
4.文本行高
line-height可以使用px荆残，也可以使用倍數(shù)
當行高等于元素高度的時候，文本垂直居中
直接設置行高可以消除尺寸偏差
四擦俐、背景
1.背景圖片重復
background-repeat 取值為：
repeat脊阴、no-repeat、repeat-x蚯瞧、repeat-y
2.背景圖片大小
background-size取值為：
cation（保持寬高比例嘿期，長邊拉伸）
cover（保持寬高比例，短邊拉伸）
直接設置百分比埋合、px（不包持寬高比）
3.背景圖片位置
background-position取值為：
使用百分比（background-position: xx% xx%;）
使用px (background-position: xxpx xxxpx)
使用方位詞（top备徐、bottom、left甚颂、right蜜猾，第一個為左右，第二個為上下）
也可以直接合并寫
變成三角形的第一種
background: url(http://zl.huruqing.cn/assets/bg2.78d35cdc.83c30b86.png)no-repeat left bottom;
后面還可以加顏色和定位
變成三角形的第二種
background: linear-gradient(45deg, red, red 50%, transparent 50%, transparent 100%);
五振诬、三角形
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
height: 0;
width: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
六蹭睡、外邊距塌陷
塌陷現(xiàn)象
當我們給子元素設置margin-top的時候, 子元素與父元素并沒有產生距離, 但是父元素往下"掉"了, 這種現(xiàn)象我們稱之為margin-top塌陷, 原因是因為父元素和子元素在margin-top上進行了合并, 合并后的margin-top只作用于父元素上。
解決的辦法：
給父元素添加邊框
給父元素添加padding-top
給父元素添加overflow
七赶么、固定定位
固定定位之后, 元素的不再是塊級元素, 而是變成 "行內塊級", 若是元素沒有內容, 且沒有設置寬度, 那么它的寬度為0
1.固定定位應用
半透明遮罩層
屏幕正中間的對話框(彈窗)
設置為固定定位(若有需要也設置一下z-index)
top:50%, left: 50%;
margin-left: 元素寬度一半(取負數(shù)), margin-top: 元素高度一半(取負數(shù))
對話框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.pop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .5);
}
.dialog {
position: fixed;
width: 200px;
height: 100px;
background-color: #fff;
z-index: 1;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="pop"></div>
<div class="dialog">這是一個對話框</div>
</body>
</html>
八肩豁、絕對定位
元素變成"行內塊級"
脫離文檔流, 跟在其后面的元素會"陷進去"
九、元素溢出
overflow取值為：
hidden（溢出隱藏）
scroll（滾動條）
auto（自適應）
注：當元素之間沒有空格不會自動換行
十、溢出省略
overflow：hidden
white-space：nowarp（文本字體不換行）
text-overflow:ellipsis(文本溢出顯示省略號)
單行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
width: 300px;
border: 1px solid;
height: 50px;
/*內容溢出隱藏*/
overflow: hidden;
/*遇到空白怎么處理: 不換行*/
white-space: nowrap;
/*文字溢出設置*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</body>
</html>
多行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
width: 300px;
border: 1px solid;
line-height: 20px;
height: 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<p>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</body>
</html>
