第五十七天 盒模型布局

Posted 2021-01-26 gongcheng-

1.常用标签的使用

　　前往本页面中个某个位置：Top =>锚点

　　1.设置锚点

　　2.设置前往锚点的a跳转

　　    设置前往锚点的a跳转：#锚点名

　　　　<div id="t_123">123</div>

　　　　<a href="#page_top"Top</a>

　　　　<a href="#t_123">123</a>

　　　　<a href="00_复习预习.html#md">前往锚点</a>

2.边界圆角

　　边界圆角用百分比控制，border-radius: 50%;

3.背景样式

　　background-image: url(‘图片地址‘） #导入图片作为背景

　　background-size: 200px 200px;   #规定背景图片显示尺寸

　　background-repeat:no-repeat;#平铺图片大小不够，复制后填充

　　background-position: 10px  40px;#控制图片移动

　　

　　background: url(‘img/123.png‘) red no-repeat 50px 50px;

4.精灵图

　　精灵图： 各种小图拼接起来的一张大图。

　　为什么使用精灵图：减少请求次数，降低性能的消耗，二次加载图片资源时极为迅速（不需要发送请求）

　　.box{

　　　　background-image: url(‘img/bd.png‘);

　　　　background-position:0 -150px;

　　}

　　.box:hover {

　　　　cursor: pointer;

　　　　background-position:0 -250px;

　　}

5.盒布局细节

　　margin坑：

　　上兄弟margin-bottom与下兄弟margin-top重合，取大值。

　　解决方案：

　　只设置一个，建议设置下兄弟margin-top

　　margin布局： 下盒子的垂直起始位置决定于同结构中上盒子的margin结果位置；水平起始位置就是父级content最左侧。