(接上)
1.7 盒子模型外边距margin
控制盒子与盒子之间的距离
属性:
margin-left margin-right margin-top margin-bottom
使用方法和padding基本一致。
简写意义与padding也一致。
典型应用:外边距可以让块级盒子水平居中,但必须满足两个条件:(1)盒子必须指定了宽度(width)(2)盒子左右的外边距都设置为auto(自动)。
最常见的写法:margin: 0 auto;
注:行内元素和行内块元素水平居中可以给它的父元素添加text-align:center。
1.8 外边距合并
嵌套块元素垂直外边距的塌陷:对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:法一,为父元素定以上边框。法二,为父元素定以上内边距,法三,为父元素添加overflow:hidden。(还有其他方法,比如浮动,固定,绝对定位的盒子不会有塌陷问题)
1.9 清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致,因此我们在布局前,首先要清除下网页元素的内外边距。
* {
padding:0;
margin:0;
}
这也是我们css的第一行代码。
注:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
PS基本操作
因为网页美工大部分效果图都是利用PS来做的,所以以后我们大部分切图工作都是在PS里面完成的。
Crtl➕R:打开标尺,或者视图->标尺
右击标尺,改单位为像素。
按住空格变小抓手,可以自由拖动。
选区工具,矩形选区,测量大小
Crtl+D 取消选区,或者在旁边空白处点击一下。
吸管工具取色。
综合案例:产品模块
代码:
最终效果: