CSS
一.css佈局
1.盒模型css
/*以下代碼，請問div1的offsetWidth是多大？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}
</style>
<div id="div1"></div>
/*答案：offsetWidth=width+padding+border=122px：*/
/*擴展：若是讓offsetWidth=100px,該如何作？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
box-sizing:border-box; /*設置盒模型*/
}
</style>
<div id="div1"></div>
2.margin縱向重疊問題這個之前知道會重疊可是不知道空標籤也會重疊html
/*以下代碼，AAA和BBB之間的距離是多少？*/
<style>
p{
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
/*
答案：15px。
解釋：相鄰的margin-top和margin-bottom會發生重疊；
空白的<p></p>也會重疊。
*/
3.margin負值問題佈局
- margin-top和margin-left負值，元素向上、向左移動； - margin-right負值，右側元素移動，自身不受影響； - margin-bottom負值，下方元素移動，自身不受影響。
4.BFC的理解和應用學習
什麼是BFC?如何應用？
BFC：
block format context 塊級格式化上下文
一塊獨立渲染區域，內部元素的渲染不會影響邊界之外的元素
造成BFC的常見條件：
float：不是none
position：absolute/fixed
overflow:部位visible
display:inline-block,flex等
BFC常見應用
清除浮動
5.如何實現聖盃佈局和雙飛翼佈局flex
聖盃佈局和雙飛翼佈局的目的
三欄佈局，中間一欄最早加載和渲染（內容最重要）
兩側內容固定，中間內容隨着寬度自適應
通常用於PC網頁
聖盃佈局和雙飛翼佈局的技術總結
使用float佈局
兩側使用margin負值，以便和中間內容橫向重疊
防止中間內容被兩側覆蓋，一個用padding一個用margin
聖盃佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.header{
width: 100%;
height: 50px;
background: red;
}
/* 2.padding兩邊留白 */
.content{
padding: 0 200px 0 200px;
background: yellow;
}
/* 1.浮動佈局 */
.content .col{
float: left;
}
.content .main{
width: 100%;
height: 50px;
background: blue;
}
/* 3.左 margin-left: -100%;*/
.content .left{
width: 200px;
height: 50px;
background: #eee;
margin-left: -100%;
position: relative;
right: 200px;
}
/* 4.右 margin-right: -200px; */
.content .right{
width: 200px;
height: 50px;
background: peru;
margin-right: -200px;
}
.footer{
width: 100%;
height: 50px;
background: green;
}
/* 手寫clearfix */
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom:1;
}
</style>
<div class="header">header</div>
<div class="content clearfix">
<div class="main col">center</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
雙飛翼佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.header{
width: 100%;
height: 50px;
background: red;
}
.content{
width: 100%;
background: yellow;
}
/* 1.浮動佈局 */
.content .col{
float: left;
}
.content .main{
width: 100%;
height: 50px;
background: blue;
}
/* 2.margin留白 */
.content .main-wrap{
margin: 0 200px 0 200px;
}
/* 3.左 margin-left: -100%;*/
.content .left{
width: 200px;
height: 50px;
background: #eee;
margin-left: -100%;
}
/* 4.右 margin-left: -200px; */
.content .right{
width: 200px;
height: 50px;
background: peru;
margin-left: -200px;
}
.footer{
width: 100%;
height: 50px;
background: green;
}
/* 手寫clearfix */
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom:1;
}
</style>
<div class="header">header</div>
<div class="content clearfix">
<div class="main col">
<div class="main-wrap">center</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
6.手寫clearfixui
/* 手寫clearfix */
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom:1;
}
7.flex實現一個三點的色子spa
flex經常使用語法回顧：
flex-direction：方向
justify-content：元素在主軸的對齊方式
align-items：元素在交叉軸的對齊方式
flex-wrap：換行
align-self:子元素在交叉軸的對齊方式
align-self這個其實我一直沒仔細看啥意思，如今學習回顧了是懟子元素起做用的code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #333;
/* flex佈局 */
display: flex;
justify-content: space-between;
}
.point{
width: 50px;
height: 50px;
background-color: #666;
border-radius: 50%;
}
.point:nth-child(2){
align-self: center;
}
.point:nth-child(3){
align-self: flex-end;
}
</style>
<div class="box">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>
二.css定位
1.absolute和relative分別依據什麼定位？orm
relative依據自身定位
absolute依據最近一層的定位元素定位
定位元素：absolute，relative，fixed
body
2.居中對齊有哪些實現方式？htm
水平居中
1. inline元素：text-align:center
2. block元素：margin:auto
3. absolute元素：left50%+margin-left負值
4. flex元素：display: flex; jusitity-content: center;
垂直居中
1. inline元素：line-height的值等於height的值
2. absolute元素1：top50%+margin-top負值
3. absolute元素2：transform:translate(-50%,-50%)
4. absolute元素3：top,bottom,left,right=0+margin:auto
能夠實現元素水平垂直居中，既保證兼容性又沒必要知道子元素的長度。
5. flex元素：display: flex; align-items: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>水平居中</h1>
<style>
.shuiping{
border:1px solid #333;
padding: 20px;
}
.shuiping .container {
background: #666;
margin-bottom: 10px;
height: 50px;
}
.shuiping .inline{
text-align: center;
}
.shuiping .inline .content{
background: green;
}
.shuiping .block{
}
.shuiping .block .content{
width: 300px;
margin: 10px auto;
background: green;
}
.shuiping .absolute{
position: relative;
}
.shuiping .absolute .content{
width: 200px;
height: 40px;
position: absolute;
background: green;
left: 50%;
margin-left: -100px;
}
.shuiping .flex{
display: flex;
justify-content: center;
}
.shuiping .flex .content{
background: green;
}
</style>
<div class="shuiping">
<div class="container inline"><span class="content">inline元素</span></div>
<div class="container block">
<div class="content">block元素</div>
</div>
<div class="container absolute">
<div class="content">absolute</div>
</div>
<div class="container flex">
<div class="content">flex元素</div>
</div>
</div>
<h1>垂直居中</h1>
<style>
.cz{
border:1px solid #333;
padding: 20px;
}
.cz .container {
background: #666;
margin-bottom: 10px;
height: 50px;
}
.cz .inline{
}
.cz .inline .content{
line-height: 50px;
background: green;
}
.cz .absolute{
position: relative;
}
.cz .absolute .content{
width: 200px;
height: 40px;
position: absolute;
background: green;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -20px;
}
.cz .absolute2{
position: relative;
}
.cz .absolute2 .content{
width: 200px;
height: 40px;
position: absolute;
background: green;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.cz .transform{
position: relative;
}
.cz .transform .content{
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.cz .flex{
display: flex;
justify-content: center;
align-items: center
}
.cz .flex .content{
background: green;
}
</style>
<div class="cz">
<div class="container inline"><span class="content">inline元素</span></div>
<div class="container absolute">
<div class="content">absolute</div>
</div>
<div class="container absolute2">
<div class="content">absolute2</div>
</div>
<div class="container transform">
<div class="content">transform</div>
</div>
<div class="container flex">
<div class="content">flex元素</div>
</div>
</div>
</body>
</html>
三.css圖文樣式
1.line-height:如何繼承
以下代碼，p的行高將會是多少？
<style>
body{
font-size:20px;
line-height:200%
}
p{
font-size:16px;
}
</style>
<body>
<p>AAA</p>
</body>
答案：40px（font-size * line-height）=20*200%=40
我也不知道寫百分比繼承的是計算出來的值，之前都沒有用過百分比這種line-height
寫具體值，如30px，則繼承該值（比較好理解） 寫比例，如2/1.5，則繼承該值(比較好理解) 寫百分比，如200%，則繼承計算出來的值（考點）
四.CSS響應式
1.rem是什麼？
rem是一個長度單位 px：絕對長度單位，最經常使用 em：相對長度單位，相對於父元素，不經常使用 rem：相對長度單位，相對於根元素，經常使用於響應式佈局
2.響應式佈局的常見方案？
media-query:根據不一樣的屏幕寬度設置根元素font-size rem:基於根元素的相對單位
3.vw/vh
rem&media-query弊端：階梯性
網頁視口尺寸：
window.screen.height:屏幕高度
window.innerHeight:網頁視口高度
document.body.clientBody:body高度
vw/vh:
vh:網頁視口高度1/100
vw:網頁視口寬度1/100
vmax取二者最大值，vmin取二者最小值
window.innerHeight=100vh
window.innerwidth=100vw
相關文章
- 1. CSS——CSS樣式
- 2. 【CSS】理解CSS
- 3. CSS Tools: Reset CSS
- 4. CSS——CSS基礎
- 5. CSS之CSS hack
- 6. CSS：關於CSS Hack
- 7. CSS animation & CSS animation 101
- 8. CSS+DIV-CSS與Javascript
- 9. css樣式 --- CSS hack
- 10. CSS 框架 Blueprint CSS
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章