1、常用屬性
【不可以繼承的屬性
display: inline block inline-block table-cell none
文字屬性: vertical-align 垂直文字對齊 text-decoration 規定新增到文字的裝飾 a標籤的預設下劃線
text-shadow :文字陰影效果
white-space:空白符的處理
unicode-bidi: 設定文字的方向
可以繼承屬性
文字系列樣式屬性 font
font-family:字型系列
font-weight:字型粗細
font-size:設定字型的尺寸
font-style:定義字型的風格
文字系列樣式屬性
text-align 文字水平對齊 line-height 行高 text-indent 文字縮排
word-spacing:單詞間的空白(字間隔)
letter-spacing:字元間的空白(字元間距)
text-transform :控制文字大小寫
direction:規定文字的書寫方向
盒子模型: 寬度和高度
width
height
寬度和高度的單位
1、px 畫素 固定單位
2、% 百分比 動態計算的單位(自適應 響應式)
padding
內邊距會影響盒子在瀏覽器中的實際大小
padding:10px 上 右 下 左 都是10px
padding: 10px 20px 上下都是10px 左右都是20px
padding: 10px 30px 20px 上 10px 左右 30px 下 20px
padding:10px 20px 30px 40px 上 10px 右 20px 下 30px 左 40px
border
邊框的寬度 邊框線型別 邊框線的顏色
邊框線型別
solid:實線
dashed: 虛線
dotted:點狀線
邊框的顏色 黑色 白色
顏色的英文名 black white
# #000 #fff
rgb rgb(0,0,0) rgb(255,255,255)
border: 10px solid #000 如果沒有指明方向的情況下 表示四個方向都有邊框線 而且邊框線相等
border-top border-right . border-bottom border-left
border-style 形狀 border-color 顏色
去掉邊框線 border:0
如果border屬性 只有邊框寬度 沒有邊框線的型別和顏色 導致border屬性失效
複製程式碼
2、三角形原理
利用border的3個屬性: border-width/border=style/border-color去實現 寬度和高度要為0 實現一個由小三角形組成的正方形
要什麼方向的三角形 只需要保留這個方向的顏色色值 其餘的方向的顏色色值 設為透明即可
.triangle {
width :0;
height:0;
border-width:100px;
border-style:solid;
border-color: red transparent transparent transparent
}
transparent: 顏色透明
三角形的大小 由border-width 邊框線的寬度去控制
三角形的顏色 由border-color 邊框的顏色去控制
transform:rotate(180deg);旋轉180度
border-radius:40px
複製程式碼
3 margin面試題
margin 面試題 （並列的兩個子元素）
一個盒子有上邊距 另一個有下邊距 會出現margin邊距的重疊問題
並列盒子的margin重疊 雙margin的重疊
取大值 並不是他們的相加之和 也就是誰大聽誰的
margin的相容問題:(父元素和子元素的margin-top傳遞問題)
大盒子裡巢狀小盒子 給小盒子加margin-top值 不但沒有實現和大盒子之間的間距 反而傳遞到大盒子身上 導致整體下移
=> 解決相容問題：
1、overflow: hidden 解決margin-top的傳遞問題（此處並不是溢位隱藏）
2、padding-top: 1px 這種方式會影響最後實際的高度 需要在高度height基礎上減掉 才不會影響最後實際的高度
3、border-top: 1px solid transparent (設定為透明色) 這種方式會影響最後實際的高度 需要在高度height基礎上減掉 才不會影響最後實際的高度
4、給子元素的margin-top值改為給父元素加padding-top 這樣就避免了使用margin-top值導致的傳遞問題
.wrap {
width: 300px;
height:299px;
backgroud-color:red;
padding-top:1px
}
.inner {
width:200px;
height:200px;
margin-top:20px;
background-color:blue
}
margin 負值的使用技巧
.left {
float:left;
width:500px;
height:800px;
backgroud:red;
font-size:50px;
}
.right {
float:left;
width:800px;
height: 800px;
backgroud: darkgreen;
margin-left: -1300px (兩者寬度之和)
}
1、margin外邊距 padding內邊距
2、margin不會影響最後元素的實際寬高 padding是會影響最後元素的實際寬高的 如果要不影響 我們需要在width、height裡減去padding的值
3、margin主要用來控制元素和元素之間的間距 padding不能控制元素和另一個元素間的間距 只能控制它裡邊的元素
複製程式碼
4 盒子模型的計算
元素實際寬度 = 寬度width + padding-left/padding-right + border-left/border-right
元素實際高度 = 高度height + padding-top/padding-bottom + border-top/border-bottom
口號:元素的實際大小隻會受padding和border的影響 和margin沒有半毛錢關係
如果加了padding和border的值 要在width和height上減去padding和border的值 否則內容會溢位
border-left:40px 這樣設定 不生效 因為缺少border-style 和border-color這兩個屬性
text-align 表示文字的對齊方式
center 居中對齊
left 居左對齊
right 居有對齊
text-align:center 控制文字內容居中
margin: 0 auto 控制塊級元素居中
height和line-height一致 文字內容垂直居中
line-height 用來控制行間距(一行文字和一行文字垂直的間距)
複製程式碼
5 backgroud相關屬性
backgroud-color: transparent 預設顏色是透明色
backgroud-image 背景之 背景圖片
backgroud-image:url("背景圖片的路徑")
backgroud:url("背景圖片的路徑")
logo 一般 都會用h1標籤
<h1 class="logo"> <a href="#">背景圖片</a></h1>
.logo a {
display: block; // a標籤是行內元素 轉化為block元素 寬度和高度 才能生效
width: 173px;
height: 66px;
backgroud-image: url(http://www.zhufengpeixun.com/skin/20142/image/logo.png);
text-indent: -9999px; /*首段縮排 將看不到背景圖片這幾個字*/
}
backgroud-repeat:背景重複(平鋪的方式)
預設值 repeat(x/y軸同時平鋪)
no-repeat 不平鋪(重複)
repeat-x x軸平鋪
repeat-y y軸平鋪
<h1 class="logo"></h1>
.logo {
width: 300px;
height: 300px;
backgroud-image:url("http://www.zhufengpeixun.com/skin/20142/img/logo.png")
}
這樣會出現很多重複的背景圖 x軸和y軸都有
將backgroud-repeat:no-repeat 能解決這個bug
<div class = "nav"></div>
.nav {
情況：navbj這個背景圖片 正好是42px 所以我們不寫backgroud-repeat 它也是隻有x軸方向的平鋪 因為y軸沒有多的高度去平鋪
但是如果height跟navbj不相等的情況下 我們不寫backgroud-repeat會出現除了x軸平鋪之外 y軸也會看到平鋪的效果 所以我們最好在backgroud的圖片後面緊跟著要指明平鋪的方式
width:100%;
height:42px;
backgroud-image:url("http://www.zhufengpeixun.com/skin/20142/img/navbj.png")
backgroud-repeat:repeat-x;
//可以合併成 background:url("http://www.zhufengpeixun.com/skin/20142/img/logo.png") no-repeat
}
backgroud-position: x軸的座標(水平方向) y軸的座標(垂直方向) x軸越大 越往右 y軸越大 越往下
50% 50% center center 正中心的位置
backgroud-position:背景定位 規定背景圖片的起始座標點(位置) 單位:px (畫素) % (百分比) 方位(top、bottom、left、right、center)
方位只指明x軸 沒有y軸 預設y軸為center
百分比只寫x軸 50% y軸預設也是50%
backgroud-position:left ===> 則代表left center
backgroud-position:right ===> 則代表right center
複合形式 寫法
backgroud:#3385ff url(http://www.zhufengpeixun.com/skin/20142/img/logo.png) no-repeat center center
backgroud-attachment 背景關聯
1、scroll 背景隨著頁面滾動條的滾動而滾動(預設值)
2、fixed 背景不會隨著頁面滾動條的滾動而滾動 固定不動
背景類:背景尺寸 backgroud-size:x軸的尺寸大小 y軸的尺寸大小 px 100% 不允許為負值
auto 自動 背景圖片原來的尺寸
cover 覆蓋 背景圖片會等比例伸縮 到完全覆蓋盒子大小為止 ---- 會出現被拉伸 變虛
contain 背景圖片會等比例拉伸 只要有一條邊 觸碰到盒子的任何一條邊 它就會停止縮放 ---- 會出現留白
背景類:背景裁剪 backgroud-clip
content-box:從內容區域之外開始裁剪(裁剪掉的是內邊距和邊緣區域)
padding-box: 從內邊距區域之外開始裁剪(不包括內邊距 裁剪掉的是邊框區域)
border-box:從邊框線之外開始裁剪(不包括邊框線)
backgroud-origin設定背景影象的參考原點(位置)
border-box: 從border區域(含border)開始顯示背景圖片
padding-box: 從padding區域(含padding)開始顯示背景影象
content-box: 從content區域開始顯示背景影象
backgroud-size backgroud-origin backgroud-clip css3新增的屬性 不能寫成backgroud的複合形式
雪碧圖
技巧:backgroud-position x軸 y軸
雪碧圖的座標主要是負值 預設值是 0 0
overflow:hidden的3個作用
1、溢位隱藏(超出內容之外的部分給隱藏起來)
2、用來清除浮動元素產生的影響
3、解決margin-top的傳遞問題
複製程式碼
6 如何讓多個元素在一行顯示
面試題:如何讓多個元素在一行顯示
<div class = "wrap">
<div class="content1">內容1</div>
<div class="content2">內容2</div>
</div>
.wrap {
font-size:0;
}
.content1 {
display:inline-block;
*display:inline;/*css hack* ie瀏覽器可以識別/
*zoom:1;/*觸發css hack的layout*/
width: 200px;
height: 100px;
backgroud-color:darkblue;
font-size:14px;
}
.content2 {
display:inline-block;
*display:inline;/*css hack* ie瀏覽器可以識別/
*zoom:1;/*處罰css hack的layout*/
width: 200px;
height: 100px;
backgroud-color:darkblue;
font-size:14px;
}
1、用display:inline 把元素轉化為行內元素 但是設定寬高屬性不起作用
2、用display:inline-block 可以讓元素在一行顯示 但是它會受空格/換行鍵的影響 會產生預設的間距
===>解決辦法
A)、去掉空格和換行鍵的影響 讓標籤都在一行(這種方法不推薦 閱讀性差)
B)、給加了display:inline-block屬性的元素的父元素加一個屬性font-size:0; 但是我們發現一個問題:元素裡面如果有文字 文字消失了
===>解決:我們只需要在元素身上加一個font-size把父元素font-size:0覆蓋
其中display:inline-block在ie6 7下不相容的解決辦法 (css hack相容)
在兩個子元素里加 *display:inline *zoom:1
3、利用浮動float:left/right 但是我們需要清浮動
複製程式碼
7 省略號的面試題
面試題:如何出現單行省略號
h2 {
1、width 寬度(不寫寬度 預設繼承父元素的寬度)
2、overflow:hidden 溢位隱藏
3、white-space:nowrap 強制不折行
4、text-overflow:ellipsis 文字隱藏的方式:以省略號的方式隱藏
}
面試題:多行文字出現省略號的必備條件:主要用在移動端手機頁面
h2 {
width:600px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2
overflow:hidden;
}
複製程式碼
- 動力: 這是我的學習筆記(來源於視訊或者查閱文件),您能從中得到收穫和進步,是我分享的動力,幫助別人,自己也會更快樂
- 期望: 不喜勿噴,謝謝合作！如果涉及版權請及時聯絡我,馬上刪除!