1、学习网页资料1,HTML圣杯布局及双飞翼布局的一些信息
圣杯布局和双飞翼布局(前端面试必看)www.jianshu.com![5bb4d7b153b3b2a569544adbb42adc19.png](https://i-blog.csdnimg.cn/blog_migrate/6593b1c4e4127f62b7dc1f8ba5a6fcff.png)
2、盒子模型的一些基本概念
HTML CSS + DIV实现整体布局blog.csdn.net![c9aa18736f4568dfb3eda385953b477d.png](https://i-blog.csdnimg.cn/blog_migrate/1996f7b1589e70d55ea1b39269d259b9.png)
盒子模型的相关属性
- margin(外边距/边界)
- border(边框)
- padding(内边距/填充 )
![84ec7999df37588fe07d66edcaaf67df.png](https://i-blog.csdnimg.cn/blog_migrate/e766a9a0c0faa30e9060a50add05a95e.png)
盒模型的层次关系
我们通过一个经典的盒模型3D立体结构图来理解,如图:
![c110c88ded35d8e895675666505f2d93.png](https://i-blog.csdnimg.cn/blog_migrate/f7ceb0b513e7e98abf0edf2c98a96715.png)
从上往下看,层次关系如下:
第1层:盒子的边框(border),
第2层:元素的内容(content)、内边距(padding)
第3层:背景图(background-image)
第4层:背景色(background-color)
第5层:盒子的外边距(margin)
从这个层次关系中可以看出,当同时设置背景图和背景色时,背景
图将在背景色的上方显示
11、水平居中和垂直居中
水平居中包含两种情况:
块级元素的水平居中:margin:0px auto;
文字内容的水平居中:text-align: center;
垂直居中:
常见的单行文字的垂直居中可设置文字所在行的height与
行高样式属性一致,比如:
div{
width: 400px;
height: 400px;
line-height: 400px;/*行高与div高度一致*/
}