day3笔记

day03-网页布局实战

一、元素的分类

1.标签分类两类：

1. 块级标签：独占一行，撑满整个屏幕
2. 行级标签：组织文本，内容有多大宽度就有多大。

. 块级标签

作用：网页布局用块级标签设计。

特点：块级标签默认支持width，height属性。

. 行级标签

作用：网页组织内容的时候使用。

特点：默认不支持width，height属性。由内容来决定大小。

2.行和块的转换

页面元素 的转换需要一下代码：

/* 行-块转换 ： block*/
display: block;


/* 块-行转换： inline*/
display: inline;

/* inline-block  这个属性是行元素，但是可以支持宽高  */
display: inline-block;

发现高度和宽度都无效了；如果需要转行内块元素，则使用display:inline-block
一旦将一个元素转化为指定的类型，就具备这个类型的所以特点。

补充了解：

可有将两个盒子放在一行显示。但是这种盒子排列不推荐你们用inline-block,兼容问题
盒子之间默认会有间隙，这个在不同浏览器里面可能值差异。

实际应用场景：一般会将超链接变成inline-block。 以后选中这个盒子区域，就能够跳转

图片标签默认就是行内块元素。

二、标准盒模型

1.目的

1. 计算盒子最终大小。
2. 固定盒子的位置。

2.布局

padding：内边距属于盒子内部的可变空间

border：边框

margin：外边距代表盒子之间的距离

3.外边距margin

参数数据排列的特点：

.container .box{
            width: 200px;
            height: 200px;
            background-color: royalblue;
            /* 外边距margin */
            /* margin-left: 100px;
            margin-top: 100px; */
            /* 盒子底部距离 */
            /* margin-bottom: 100px; */
            /* 盒子里面的参数：
            一个为：上右下左都相同
            二个为：上下  左右
            三个为：上  左右  下  
            四个为：上 右 下 左*/
        }

参数最多可以写四个

margin-top:-10px;

/* 水平居中 */
margin:0px auto;

当参数为负数的负数:默认往反方向进行移动，可能会产生模块的重叠。

一旦这个元素用负数往上移动，原来空间消失，后面元素会继续往上走。

如果遇到两个auto

margin:auto auto;

第一个auto代表垂直方向的居中，默认在浏览器里面是不生效的。对于浏览器来说，垂直方向高度一直都在变化ruguo的。不能auto来居中。

margin-top传递性

在使用margin这个属性的时候,经常会遇到margin-top这个值传递给父级，让父级进行移动了
margin-top在进行移动的以后，必须要找到一个参考位置。如果一个父盒 子没有边框。这种情况margin-top这个属性传递给父亲，让父亲以body作为参考进行移动。

解决方案：

1. 给父级盒子增加边框。(并不是最优方案， 增加边框后盒子大小会受到影响)
2. 给父级盒子增加一个overflow: hidden属性

        .header{
            width: 100%;
            height: 140px;
            background-color: antiquewhite;
            /* border: 1px solid red; */
            /* 给父级盒子设置overflow: hidden; 让父级盒子变成一个封闭空间，这个空间里面所有内容都不影响外部元素 */
            overflow: hidden;
        }
        .header .center{
            width: 1160%;
            height: 200px;
            background-color: tomato;
            margin-top: 20px;
        }

4.边框 border

盒子的边框的三个内容：

1. 边框的方向（left、right、top 、bottom）

2. 边框的大小（用像素）

3. 边框的样式（虚线、实线、、）

border: 1px solid red;
/* 1.可以分开写
   2.所有属性可以合并用符合属性表示 */

solid:实线 dashed：虚线 dotted：圆点线

内容大小

在开发过程中，width和height代表的盒子内容的大小。
并不代表这个盒子真正的大小。盒子真正的大小还需要考虑边框的大小、内边距大小

5.内边距padding

外边距代表盒子之间的距离。
内边距属于盒子内部的可变空间。
购买商品快递盒子会有海绵，海绵所占的空间就是我们内边距

使用规则和margin一样

三、盒子真正的大小

padding：内边距属于盒子内部的可变空间

border：边框

盒子内容大小

以上有盒子的真正的大小

margin：外边距代表盒子之间的距离

快捷键

div.class名字+enter

div#id名字+enter

div.cate*3