1.文档流normal flow
-网页是一个多层结构
-通过CSS可以分别为每一层设置样式
-用户只能看到最顶层
-最底层:文档流(我们所创建的元素默认都是从文档流中进行排列)
<head>
<style>
.box1 {
background-color: blue;
}
/*它的父元素为body*/
.box2 {
width: 100px;
background-color: red;
}
span {
background-color: aqua;
}
</style>
</head>
<!--
元素有两个状态:在文档流中/不在文档流(现在只考虑前者)
-元素在文档流(基岩)中有什么特点:(元素也可以脱离文档流,不再区分块和行内)
-块元素 div
--块元素会在页面中独占一行
--默认宽度时父元素的全部(即浏览器设置宽度为多少,背景就宽多少)
--默认高度是子元素的总和
-行内元素 span
--行内元素不会只占一行,只占自身大小
--在页面中自左向右排列(若一行容纳不了,则会换行)
--默认高度和宽度跟里面的元素有关
-->
<body>
<!--两个块元素-->
<div class="box1">
我是div1
</div>
<div class="box2">
我是div2
</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
2.盒子模型
<!--盒子模型(对元素进行布局)
-CSS将页面中的所有元素都设置了一个矩形的盒子
-将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
-每一个盒子都有一下几个部分组成:
--内容区(content)
--内边距(padding)
--边框(border)
--外边距(margin),决定盒子位置
-->
<head>
<style>
.box1 {
/*内容区content,元素中的所有子元素和文本都在内容去中
大小由width和height来设置*/
width: 100px;
height: 100px;
background-color: aqua;
/*边框border,边框属于盒子边缘
设置边框:
宽度 border-width
颜色 border-color
样式 border-style
边框的大小会影响到盒子大小(盒子内容一直不变)
*/
border-width: 20px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<div class="box1">
1234
</div>
</body>
1.盒子模型-边框
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: rgb(6, 106, 139);
/*边框,下面三个元素缺一不可(border-width有默认值,一般3px)*/
/*border-xxx-width,xxx可以为top right bottom left来指定某一个边的宽度*/
border-width: 10px 20px 30px 40px;
/*边框上右下左(顺时针)宽度*/
/*指定边框颜色,同样可以分别制定四个边框的颜色,也可以用border-xxx-color指定颜色*/
border-color: orange red yellow green;
/*指定边框样式,与上面类似。默认值为none(无边框)
solid 实线
dotted 点状虚线
dashed 虚线
double 双线*/
border-style: solid dotted dashed double;
}
.box2 {
width: 100px;
height: 100px;
background-color: rgb(6, 106, 139);
/*border简写属性,没有顺序要求
border-xxx xxx可以为top right bottom left单独设置一边的样式*/
border: solid 10px orange;
/*单独去掉一边*/
border-bottom: none;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
2.盒子模型-内边距
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: rgb(6, 106, 139);
border: solid 10px orange;
/*内边距padding
-内容区和边框之间的距离
-四个方向:padding-top/right/bottom/left
内边距的设置会影响到盒子大小,颜色默认为内容颜色
盒子可见框的大小由内容区+内边距+边框共同决定*/
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
/*padding的简写,上右下左,跟前面的border一样*/
padding: 10px 20px 30px 40px;
}
.inner {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">
</div>
</div>
</body>
3.盒子模型-外边距
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
border: 10px red solid;
/*外边距margin
不影响盒子可见框的大小
影响盒子的位置
共有四个方向的外边距:
margin-top/right/bottom/left
*/
margin-top: 100px; /*盒子向下移动*/
margin-left: 100px; /*盒子向右移动*/
/*margin简写,跟border一样*/
margin: 100px,100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
4.盒子模型-水平方向的布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
/*width默认为auto*/
width: 800px;
height: 200px;
border: 10px red solid;
}
/*元素水平方向的布局:
元素在其父元素中水平方向的位置有以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right(一般不用,浏览器会自动调整确保下面的等式成立)
要满足以下等式:
上面的加起来=父元素内容区的宽度
若不成立,则称为过度约束,等式会自动调整(一般调整margin-right)
水平居中:width:xxxpx;margin:0 auto;
*/
.inner {
width: 200px;
height: 200px;
background-color: aqua;
margin-left: 100px;
margin-right: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
5.盒子模型-垂直方向的布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*元素垂直方向的布局*/
.outer {
width: 250px;
height: 400px;
background-color: #bfa;
/*默认情况下父元素的高度被子元素撑开
若设置具体值,则按具体值来 */
}
/*子元素实在父元素的内容区中排列的
若子元素大于父元素,则溢出
用overflow处理溢出的子元素
overflow:visible:默认显示
hidden:隐藏溢出部分
scroll:生成两个滚动条,通过滚动条查看完整内容
auto 根据需要生成滚动条*/
.inner {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner">111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111111111111111
</div>
</div>
</body>
6.盒子模型-外边距的折叠
(1)兄弟元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*外边距的重叠
"相邻"的"垂直方向"的外边距会出现重叠现象
兄弟元素
相邻垂直外边距取两者的较大值
特殊情况:
如果外边距一正一负,则取两者的和
如果外边距都为负,则取绝对值大的*/
.box1,
.box2 {
width: 50px;
height: 50px;
font-size: 50px;
}
/*box1的下外边距和box2的上外边距重叠了
尽管两个加起来是200px,但实际上是100px*/
.box1 {
background-color: aqua;
/*设置下外边距*/
margin-bottom: 50px;
}
.box2 {
background-color: orange;
/*设置上外边距*/
margin-top: 50px;
}
</style>
</head>
(2)父子元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*外边距的重叠
"相邻"的"垂直方向"的外边距会出现重叠现象
父子元素:
相邻外边距,子元素会传递给父元素
会影响页面的布局,因此必须要处理
*/
/*将子元素box4下移,不移动父元素box3*/
.box3 {
width: 200px;
height: 100px;
background-color: aqua;
padding-top: 100px;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
7.行内元素的盒子模型
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1 {
background-color: yellow;
/*行内元素的盒子模型
行内元素不支持设置宽度和高度
行内元素可以设置padding,垂直方向的padding不会影响页面布局
行内元素可以设置border,垂直方向的border不会影响页面布局
行内元素可以设置margin,垂直方向的margin不会影响页面布局*/
/*width和height无效*/
width: 100px;
height: 100px;
padding: 100px;
border: 50px solid red;
margin: 20px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
</head>
<body>
<span class="s1">
我是span
</span>
<div class="box1">我是box1</div>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1 {
background-color: yellow;
margin: 100px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
a {
/*对于超链接的放大
width和height没有用
使用display设置元素显示的类型,这样可以使用width和height
可选值 (若隐藏,则不占位置)
inline:将元素设为行内元素
block:将元素设为块元素
inline-block:行内块元素,既可以设置宽高,又不会独占一行
table:将元素设为表格
none:隐藏(可以设置为鼠标点击而显示)*/
/*visibility设置元素的显示状态
可选值(若隐藏,则依然占位置)
visible:默认值,正常显示
hidden:隐藏,但是依然占据页面位置*/
display: inline-block;/*缺点:兼具行内元素和块元素的优缺点,两者之间有间隔*/
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<a href="javascript:;">超链接</a>
<a href="javascript:;">超链接</a>
<span class="s1">我是span</span>
<div class="box1">我是box1</div>
</body>
未完待续。。