css之盒子模型
1.邊框
??全寫 border:10px solid red
??單獨寫 border-bottom:10px solid red
??拆分寫：
???width 粗細
???style 樣式(solid 實線;dashed 虛線;dotted 點狀線)
???color 顏色
???top 上
???bottom 下
???right 右
???left 左
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.mydiv{
background-color: gold;
width: 300px;
height: 300px;
border: 10px solid red;
border-bottom-style: dashed;
border-bottom-width: 20px; */
}
</style>
</head>
<body>
<div class="mydiv">
中華人民共和國(the People's Republic of China
)，簡稱“中國”，成立于1949年10月1日 ，位于亞洲東部，太平洋西岸， 是工
人階級領(lǐng)導的、以工農(nóng)聯(lián)盟為基礎(chǔ)的人民民主專政的社會主義國家，以五星紅旗
為國旗《義 勇軍進行曲》為國歌，國徽內(nèi)容為國旗、天安門、齒輪和麥稻穗
通用語言文字是普通話和規(guī)范漢字
首都北京，是一個以漢族為主體、56個
民族共同組成的統(tǒng)一-的多民族國家。
</div>
</body>
</html>
??效果圖如下：
2.padding內(nèi)邊距
??解釋:邊框到content內(nèi)容的距離;
??設(shè)置(padding-top;padding-right;padding-bottom;padding-left)
??padding:50px;四周
??padding:50px 100px;上下50 左右100
??padding:10px 20px 30px 40px;上10 右20 下30 左40
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.mydiv{
background-color: gold;
width: 300px;
height: 300px;
padding: 10px 100px;
}
</style>
</head>
<body>
<div class="mydiv">
中華人民共和國(the People's Republic of China
)，簡稱“中國”，成立于1949年10月1日 ，位于亞洲東部，太平洋西岸， 是工
人階級領(lǐng)導的、以工農(nóng)聯(lián)盟為基礎(chǔ)的人民民主專政的社會主義國家，以五星紅旗
為國旗《義 勇軍進行曲》為國歌，國徽內(nèi)容為國旗、天安門、齒輪和麥稻穗
通用語言文字是普通話和規(guī)范漢字
首都北京，是一個以漢族為主體、56個
民族共同組成的統(tǒng)一-的多民族國家。
</div>
</body>
</html>
??效果圖如下：
3.背景
??背景顏色 background-color
??背景圖片 background-image
??背景重復 background-repeat(no-repeat 不重復;repeat 重復;repeat-x 水平重復;repeat-y 垂直重復)
??背景位置background-position
??背景簡寫background:gold url() no-repeat center center
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.bg{
background-color:gold ;
height: 900px;
background-image: url(img/logo.png);
/* 層疊順序 背景顏色 背景圖片 文本內(nèi)容 */
background-repeat: no-repeat;
/* no-repeat不重復 repeat-x水平重復 repeat-y垂直重復 repeat重復 */
background-position: center center;
/* 左右 left center right px */
/* 上下 top center bottom px */
background: gold url(img/logo.png) no-repeat center center;
}
</style>
</head>
<body>
<div class="bg">我愛我的祖國</div>
</body>
</html>
??效果圖如下：
4.margin
??簡寫
???margin:100px;上下左右都是100px
???margin:50px 100px;上下50 左右100px
???margin:50px 100px 150px;上50 左右100 下150
???margin:50px 100px 150px 200px;上50 右150 下150 左200
??單獨寫
???margin-left:50px
???margin-right:50px
???margin-top:50px
???margin-bottom:50px
??規(guī)則
???垂直方向的margin會重疊取最大值
???行內(nèi)元素只有margin左右 沒有margin上下
???width與height隊行內(nèi)元素不啟用
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
border: 5px solid gold;
}
.son{
border: 5px solid pink;
width: 100px;
margin: 0 auto;
/* margin 左右為auto可以讓塊元素在父元素內(nèi)水平居中; */
/* margin: 50px; */
/* margin-top: 50px;
margin-bottom: 100px; */
/* margin:50px 100px 150px 200px; */
/* margin 垂直方向會重疊最大值 */
}
</style>
</head>
<body>
<div class="parent">
<div class="son">son1</div>
<div class="son">son2</div>
</div>
</body>
</html>
??效果圖如下：
5.行內(nèi)元素
??span i u b
??display:inline
??不能設(shè)置寬高 margin上下也不能設(shè)置
??水平排列
6.塊元素
??div p li ul ol
??display:block
??垂直排列
7.行內(nèi)塊元素
??display:inline-block
??水平排列可以設(shè)置寬高和margin
<html>
<head>
<meta charset="utf-8">
<title>標準文檔流</title>
<style type="text/css">
div{
background-color: #FFA500;
display: inline;
/* 轉(zhuǎn)換為行內(nèi)元素 */
}
p{background-color: #FFC0CB;}
span{background-color: green;}
em{
border: 2px solid red;
width: 100px;
height: 100px;
margin: 50px 100px;
/* display: block; */
/* 轉(zhuǎn)換為塊元素 */
display: inline-block;
}
h1{
background-color: #0000FF;
height: 100px;
width: 100px;
}
/* 塊級元素默認垂直排列 行內(nèi)元素默認水平排列 */
/* 塊級元素默認寬度100% 行內(nèi)元素默認寬是內(nèi)容寬 */
/* 行內(nèi)元素寬高設(shè)置不啟用 */
/* 行內(nèi)元素margin上下不啟用 */
/* display屬性可以修改行內(nèi)與塊元素 */
/* inline-block 行內(nèi)塊元素 水平排列可以設(shè)置寬高 */
</style>
</head>
<body>
<div>div</div>
<span>span</span>
<em>em</em>
<p>p</p>
<h1>h1</h1>
</body>
</html>
??效果圖如下：
8.float
??使元素脫離標準文檔流
??父元素和兄弟元素都認為該元素不存在,兄弟元素會占據(jù)期位置，文本會留出其位置
??多個float元素默認會水平排列，父元素寬度容不下，則會換行
??如果子元素都浮動了，name父元素也就沒有高度了（清除浮動）
??行內(nèi)元素浮動之后變成塊元素
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
width: 1204px;
border: 1px solid red;
height: 904px;
}
.left{
width: 300px;
height: 900px;
border: 2px solid green;
background-color: #FFD700;
/* display: inline-block; */
float: left;
/* 元素脫離文檔流 */
/* 如果子元素都脫離了文檔流，父元素就沒有高度 */
/* 如果寬度容不下就換一行 */
}
.right{
width: 900px;
height: 900px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div><div class="right">right</div>
</div>
</body>
</html>
??效果圖如下：
9.清除浮動
??1.給父元素手動設(shè)置一個高度
??2.讓父元素設(shè)置一個 overflow：hidden
??3.讓父元素最后一個元素不浮動clear:both;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 清除浮動 */
* {
margin: 0;
padding: 0;
}
.up {
background-color: #FFD700;
width: 1000px;
margin: 0 auto;
/* height: 300px; */
/* overflow: hidden; */
}
.down {
background-color: #FF1493;
width: 1000px;
margin: 0 auto;
margin-top: 50px;
}
.up .son {
height: 300px;
background-color: #FFC0CB;
width: 33.33%;
float: left;
}
.up .son2 {
background-color: #FFFFFF;
}
.up p {
/* clear: left;
clear: right; */
clear: both;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="up">
<div class="son">1</div>
<div class="son son2">2</div>
<div class="son">3</div>
<p class="">你好標題</p>
</div>
<div class="down">
你好標題
</div>
</body>
</html>
??效果圖如下：
