HTML学习之盒模型、布局、定位

仔细观察我们自己开始写页面的时候，距离顶部都会有一丝距离，这是因为有默认的距离，所以为了取消这一丝缝隙我们可以在最开始添加如下代码

*{
padding=0;
margin=0;
}

background-image;加背景图片
background-repeat;设置背景图片平铺 
background-size:cover；整体覆盖
border-radius:圆角  顺时针原则
正圆宽高一半
opacity设置透明度

边框border
圆角边框 border-radius:
padding：内边距
margin：外边距

box-sizing：

box-sizing:border-box：是让边框区、内容区填充区都包含在height、width里，压缩内容区（有极限性）；简单来理解：就是若设置高度为100px，就是100px不用考虑边框之类的属性，里面内容若超过100px会自动压缩（但是有一定极限性）

resize：

用于是否可以通过拖动来改变元素大小
（要搭配overflow一起用 overflow：auto）

calc函数

实现自适应布局，运算符中间必须有空白

补充：

display:inline-block;是是元素横向排列但是中间会有一条缝隙
span默认盒子模型inline内联
内联元素特征：对宽高不识别；所以默认横着摆；
<span></span> <span></span>
一排这样写，页面显示的时候也是一排然后中间有一个空格
<span></span><span></span>
一排这样写，页面显示的时候也是一排然后中没有空格
内联块级元素，可以使横排，中间会自带点空白 ( float：left这种横排没有)
block元素特征：支持宽高，默认不横着摆
inline-block：支持宽高设置，同时在一行上摆着
如何取消inline-black中的空白
第一种方法：
<div></div><div></div>这样不换行即可
第二种：给父级设成font-size=0px;这样空白会没但是字也会没，然后在字中再：font-size=14px;

定位

position:
absolute;
relative;
static;仅以页面参考
fixed；固定
z-index;层级

定位：（大体布局尽量不用，会不稳定，小细节用）
当值为absolute：靠近顶部时的基准点为浏览器左上角
（但不一定是取决用的是bottom还是top，right还是left）
relative：基准点当前文档流的上一个位置
absolute与relative的配合使用：让absolute可控可以给它加一个relative的父级
这样配合使用可以让

盒

inline-block；
既可以让多个div占据一行；还可以修改weight、height；
多个inline-block采取底端对齐；加vertical-align:top;使其顶端对齐（但底端是否对齐取决于各自的长度了 ，若想默认底端也对齐可以考虑弹性盒子）
inline-table;
使表格可以设置高宽，也可以在表格左右出现其他内容

弹性盒display:flex

更好用于页面布局
flex-direction 排列方向 column从上到下 row左到右
flex-wrap 换行wrap换行
justify-content 子元素的分布方式,均匀分布父级空间

布局

clear;清除float属性；也可以理解为强制换行
float用完之后会破坏父级高度：
如图：子级div覆盖父级div

解决办法：1.clear
2.给父级加高（不提倡，不能自适应）
3.给父级加overflow:hidden；可以自适应高度，子级高度可灵活更改且父级会随着自行适应（推荐）