盒子
网页布局有三大核心:盒子模型、浮动和定位
网页布局过程:
1、先准备好相关网页元素,网页元素基本都是盒子
2、利用css设置好盒子样式,然后摆放到相应的位置。
3、往盒子里面装内容
网页布局核心本质:利用css摆盒子
盒子的组成
盒子模型:就是把html页面中的布局元素看作是一个盒子,也就是一个能装内容的容器
盒子模型由四部分组成,它包括边框、外边距、内边距、实际内容
border就是我们盒子的边框
content就是我们的内容
padding是我们的内边距
margin是外边距(是控制一个盒子和另外一个盒子之间的距离)
-
内边距:
padding属性可以有一到四个值
padding:20px;代表上下左右都有20像素内边距;
padding: 20px 30px;第一个值代表上下,第二个值代表左右
padding: 20px 30px 40px;第一个值代表上、第二个值代表左右、第三个之代表下
padding: 20px 30px 40px 50px;第一个值代表上、第二个值代表右、第三个值代表下、第四个值代表左 顺时针。
padding: 20px 30px 40px 50px;
-
外边距
background-color: aqua;
外边距:控制盒子与盒子之间的距离
一个值:上下左右
两个值:上下 左右
三个值:上 左右 下
四个值:上 右 下 左
margin: 50px;
单独设置外边距 top上、left左、right右、bottom下
margin-right: 30px;
-
标签转换
把其他类型标签转换成块表签 (行标签)
display: block;
把其他类型标签转换成行内块 (块标签)
display: inline-block;
标签转换:转换成什么类型的标签 就具有了该类型标签的排列特点 原来的特点不再保留
-
-
通配符选择器
清楚浏览器body自带的8px外边距 取消一些标签自带的外边距
margin: 0;
padding: 0;