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日 ，位于亚洲东部，太平洋西岸， 是工
人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家，以五星红旗
为国旗《义 勇军进行曲》为国歌，国徽内容为国旗、天安门、齿轮和麦稻穗
通用语言文字是普通话和规范汉字
首都北京，是一个以汉族为主体、56个
民族共同组成的统一-的多民族国家。
</div>
</body>
</html>
效果图如下：
2.padding内边距
解释:边框到content内容的距离;
设置(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日 ，位于亚洲东部，太平洋西岸， 是工
人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家，以五星红旗
为国旗《义 勇军进行曲》为国歌，国徽内容为国旗、天安门、齿轮和麦稻穗
通用语言文字是普通话和规范汉字
首都北京，是一个以汉族为主体、56个
民族共同组成的统一-的多民族国家。
</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);
/* 层叠顺序 背景颜色 背景图片 文本内容 */
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
规则
垂直方向的margin会重叠取最大值
行内元素只有margin左右 没有margin上下
width与height队行内元素不启用
<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可以让块元素在父元素内水平居中; */
/* 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.行内元素
span i u b
display:inline
不能设置宽高 margin上下也不能设置
水平排列
6.块元素
div p li ul ol
display:block
垂直排列
7.行内块元素
display:inline-block
水平排列可以设置宽高和margin
<html>
<head>
<meta charset="utf-8">
<title>标准文档流</title>
<style type="text/css">
div{
background-color: #FFA500;
display: inline;
/* 转换为行内元素 */
}
p{background-color: #FFC0CB;}
span{background-color: green;}
em{
border: 2px solid red;
width: 100px;
height: 100px;
margin: 50px 100px;
/* display: block; */
/* 转换为块元素 */
display: inline-block;
}
h1{
background-color: #0000FF;
height: 100px;
width: 100px;
}
/* 块级元素默认垂直排列 行内元素默认水平排列 */
/* 块级元素默认宽度100% 行内元素默认宽是内容宽 */
/* 行内元素宽高设置不启用 */
/* 行内元素margin上下不启用 */
/* display属性可以修改行内与块元素 */
/* inline-block 行内块元素 水平排列可以设置宽高 */
</style>
</head>
<body>
<div>div</div>
<span>span</span>
<em>em</em>
<p>p</p>
<h1>h1</h1>
</body>
</html>
效果图如下：
8.float
使元素脱离标准文档流
父元素和兄弟元素都认为该元素不存在,兄弟元素会占据期位置，文本会留出其位置
多个float元素默认会水平排列，父元素宽度容不下，则会换行
如果子元素都浮动了，name父元素也就没有高度了（清除浮动）
行内元素浮动之后变成块元素
<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.给父元素手动设置一个高度
2.让父元素设置一个 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>
效果图如下：
