css布局
1、文档流
- 文档流
- 网页是一个多层的结构,一层摞着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户只能看到最上面一层
- 这些层中,最底下的一层称之为***文档流***,文档流是网页的基础
- 我们所创建的元素,默认都是在文档流中进行排列
- 对于元素主要有两个状态
- 在文档流中
- 不再文档流中(脱离文档流)
- 元素在文档文档流中的特点
- 块元素
- 块元素会在页面中独占一行(自上向下排列)
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被子元素撑开
- 行内元素
- 不会独占一行,只占自身的大小
- 行内元素在页面中自左向右水平排列,如果一行之中不能容纳所有元素,就换另换一行继续排列
- 行内元素的默认宽高度是被内容撑开
- 块元素
2、盒子模型
- CSS将页面中的所有元素都设置为了一个***矩形的盒子***
- 将元素设置为矩形之后,页面的布局就变成了将不同的盒子摆放在相应的位置
- 每一个盒子都有一下几个部分组成
- 内容区(content)
- 边框(border)
- 内边距(padding)
- 外边距(margin)
1、内容区(content)
- 元素中所有的子元素和文本内容都在内容区中排列
- 内容区的大小由height和width两个属性来设置
- height设置内容区高度
- width设置内容区宽度
- 内容区的大小由height和width两个属性来设置
2、边框(border)
- 边框属于盒子的边缘
- 边框的大小会影响盒子整个盒子的大小
- 设置比边框,需要至少设置三个样式
- 边框的宽度:border-width
- 默认值,一般都是3个像素
- 可以用来指定四个方向的边框宽度
- 四个值的时候:上、右、下、左
- 三个值:上、左右、下
- 两个值:上下、左右
- 一个值:上、下、左、右
- border-xxx-width
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- 边框的颜色:border-color
- 用来指定边框的颜色,同样可以分别指定四个边框的颜色
- 规则和border-width一样
- 默认值black
- 用来指定边框的颜色,同样可以分别指定四个边框的颜色
- 边框的样式:border-style
- 实线:solid
- 点状虚线:dotted
- 线状虚线:dashed
- 双线:double
- 边框的宽度:border-width
- 简写的方式:border:width color style
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
border-width: 10px;
border-color: blue;
border-style: solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3、内边距(padding)
- 内容区和边框的之间的距离
- 一共有四个方向的内边距
- padding-top
- padding-right
- padding-bottom
- padding-left
- 内边距的设置会影响到盒子的大小
- 背景颜色会延伸到内边距上
- 盒子的可见大小,由内容区、边框、内边距共同决定
4、外边距(margin)
- 外边距不会影响盒子可见的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距
- margin可以设置成负值
3、水平布局
-
元素在其父元素中水平方向的位置由以下几个属性共同决定
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
-
一个元素在其父元素中,水平布局必须满足以下的等式
-
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容的宽度(必须满足)
-
以上等式必须满足,如果相加结果使等式不成立,则成为过度约束,则等式会自动调整
- 调整情况
- 如果七个值中没有为auto的情况,则浏览器会自动调整margin-right,使等式满足
- 调整情况
-
这七个值中有三个值可以设置为auto
- width
- margin-left
- margin-right
- 如果某个值为auto,则会自动调整为auto的那个值以使等式成立
- 如果将宽度和外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0
- 如果将三个值都设置为auto,则外边距都是0,宽度最大
- 如果将两个外边距设置成auto,宽度固定值,则会将外边距设置成相同的值
- width:xxpx;
- margin:0 auto;
- 是一个元素水平居中
<!DOCTYPE
-