一、盒子模型
1.盒子的组成
盒子模型:就是把HTML页面中的布局元素看作一个矩形盒子,也就是一个盛装内容的容器
CSS盒子模型的本质就是一个盒子,封装周围的HTML元素,包括:边框、外边距、内边距和实际内容。(border、margin、padding、content)
2.边框border
语法:
border: border-width || border-style || border-color
属性:
border-width:定义边框的粗细,单位是px
border-style:边框的样式
属性值:
none:定义无边框
hidden:与none相同,不过应用于表时除外,对于表,hidden用于解决边框冲突
dotted:定义点状边框,在大多数浏览器中呈现为实线
dashed:定义虚线,大多数浏览器呈现为实线
solid:定义实线
double:定义双线,双线的宽度等于border-width的值
groove:定义3D凹槽边框,其效果取决于border-color的值
ridge:定义3D垄状边框,其效果取决于border-color的值
inset:定义3Dinset边框,其效果取决于border-color的值
inherit:定义应该从父元素继承边框样式
border-color:边框颜色
边框的复合写法:简写
border: 5px solid red; 没有顺序
边框可以拆开写:
border-top: 5px dotted red;
border-bottom: 5px double red;
border-left: 5px dashed red;
border-right: 5px groove red;
3.表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式,它控制相邻单元格的边框。
语法:
border-collapse:collapse;
属性值:
collapse:边框会合并为一个单一的边框,会忽略border-spacing和empty-cells属性
separate:默认值,边框会被分开,不会忽略border-spacing和empty-cells属性
inherit:规定应该从父元素继承border-collapse属性的值
注:
1)collapse单词是合并的意思
2)border-collapse:collapse;表示相邻边框合并在一起
4,边框会影响盒子实际大小
边框会额外增加盒子的实际大小,因此
1)测量盒子大小时,不量边框
2)如果测量时包含边框,则需要width/height减去边框的宽度
5.盒子的内边距padding
padding属性用于设置内边距,即边框与内容之间的距离
属性:
padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
复合属性写法:简写
padding: 5px; 1个值,代表上下左右都有5像素内边距
padding: 5px 10px 2个值,代表上下边距5像素,左右边距10像素
padding: 5px 10px 20px; 3个值,代表上内边距5像素,左右边距10像素,下边界20像素
padding: 5px 10px 20px 30px; 4个值,代表上、右、下、左,顺时针
注:
1)如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子
2)如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可
3)如果盒子本身没有指定width/height属性,则此时的padding不会撑开盒子的大小
6.盒子的外边距margin
margin属性用于设置外边距,即控制盒子和盒子之间的距离
属性:
margin-left
margin-right
margin-top
margin-bottom
复合属性写法:简写
同padding相同
7.外边距的典型应用
外边距可以让块级盒子水平居中,但必须满足以下:
1)盒子必须指定了宽度
2)盒子左右外边距都设置为auto
常见写法:
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
8.外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
1.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值(即,当父元素的margin值大时,按父元素的参数进行塌陷,若子元素的margin值大时,按子元素的参数进行塌陷)
解决方案:
1)可以为父元素定义上边框(border-top)
2)可以为父元素定义上内边距(padding-top)
3)可以为父元素添加overflow:hidden
4)其他方法:如浮动、固定、绝对定位的盒子不会出现塌陷
2.两个同级的div1和div2,当div1定义下边距,div2定义上边距,则边距较小的一个会被吃掉
9.清除外边距
网页元素很多都带有默认的内外边距,而且不同浏览器的也不一致,因此在布局之前,首先要清除下网页元素的内外边距
* {
padding: 0; 清除内边距
margin: 0; 清除外边距
}
注:
行内元素为了照顾兼容性,尽量只设置左右内外边距。不要设置上下内外边距,但是转换为块级和行内块元素就可以了
因为行内元素设置margin: 20px后,仅左右边距生效,上下不生效,故为了兼容性,尽量只设置左右边距
10.总结
1)布局为啥用不同盒子,我只想用div?
标签都是有语义的,合理的地方用合理的标签,如产品的标题就用h,大量文字段落就用p
2)为啥用那么多类名?
类名就是给每个盒子起一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便
3)到底用margin还是padding?
大部分情况两个都可以混用,两者各有优缺点,根据实际情况使用
4)
11.圆角边框
在CSS3中,新增了圆角边框样式
border-radius属性用于设置元素的外边框圆角
语法:
border-radius: length;
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
radius半径(圆的半径)原理:
(椭)圆与边框的交集形成圆角效果
属性值:
可以为数值,也可以为百分比
属性值复合写法:
border-radius: 左上角、右上角、右下角、左下角
border-radius: 参数1 参数2 #表示左上角及对角(右下角)为参数1,右上角和对角(左下角)为参数2
border-radius: 参数1 参数2 参数3 #左上角-参数1,右上角及左下角-参数2,右下角-参数3
圆形块:
设置border-radius属性值为正方形边框的一半。
注:
1)当属性值设置为百分百时,属性值和边框(高度或宽度中较短的边框)的长度
2)当属性值为百分之五十时,属性值为边框(高度或宽度中较短的边框)的一半
3)当属性值为百分比时,最高仅能设置到百分之五十
4)当属性值为数值时,最高仅能设置为(高度或宽度中较短的边框)的一半
12.盒子阴影
box-shadow属性为盒子添加阴影
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
属性值:
h-shadow:必须,水平阴影的位置,允许负值(正数向右移动,负数反之)
v-shadow:必须,垂直阴影的位置,允许负值(正数向下移动,负数反之)
blur:可选,模糊距离(阴影的虚实)
spread:可选,阴影的尺寸(阴影的大小)
color:可选,阴影的颜色
inset:可选,将外部阴影(outset)改为内部阴影
box-shadow: 10px 10px 10px 10px rgba(0,0,0, .3) inset;
注:
1)默认为外阴影(outset),但是不可以写这个单词,否则会导致阴影失效
2)盒子阴影不占用空间,不会影响其他盒子的排列
13.文字阴影
使用text-shadow属性将阴影应用于文本
语法:
text-shadow: h-shadow v-shadow blur color;
属性值:
h-shadow:必须,水平阴影位置,允许负值
v-shadow:必须,垂直阴影位置,允许负值
blur:可选,模糊距离
color:可选,阴影的颜色
二、传统网页布局的三种方式
1.普通流(标准流/文档流)
标准流:标签按照规定好的默认方式排列
1)块级元素独占一行,从上向下顺序排列
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
2)行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
常用元素:span、a、i、em等
2.浮动float
1)浮动的典型应用:可以让多个块级元素一行内排列显示
2)网页布局的第一准则:多个块级元素纵向排列找标准流(即存在多个div,且为垂直向下排列),多个块级元素横向排列找浮动(即存在多个div保存在同一行显示)
3)网页布局的第二准则:先设置盒子大小,再设置盒子的位置
4)一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题(浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流)
float属性用于创建浮动框,将其移动一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法:
选择器 { float: 属性值}
属性值:
none:元素不浮动(默认)
left:元素向左浮动
right:元素向右浮动
2.浮动特性
1)脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标
2)浮动的盒子不在保留原先的位置
3)如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
4)浮动元素具有行内块元素特性,任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后都具有行内块元素相似的特性
即:
a、当行内元素添加浮动后,就可以配置宽度和高度(span)
b、如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容长度决定
c、浮动的盒子中间没有缝隙,是紧挨着一起的
注:
1)浮动的元素是相互贴靠在一起(中间不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐显示
3.浮动位置的约束
浮动元素经常和标准流父级搭配使用
为了约束浮动元素的位置,网页布局一般采取的策略是:
1)先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局的第一准则
4.清除浮动
清除浮动的本质:
1)清除浮动元素脱离标准流造成的影响
2)如果父盒子本身右高度,则不需要清除浮动
3)清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响到下面的标准流了
1)清除浮动-额外隔墙法
语法:
clear: 属性值
属性值:
left:不允许左侧有浮动(清除左侧浮动的影响)
right:不允许右侧有浮动(清除右侧浮动的影响)
both:同时清除左右侧浮动的影响
在最后一个浮动元素的后面加个空标签,并添加clear属性
<div style="clear:both">
注:空元素必须是块元素,不能是行内元素
清除浮动的策略是:闭合浮动
2)清除浮动-父级添加overflow
给父级添加overflow属性,将其属性值设置为hidden、auto或scroll
注:
1)overflow是给父级添加的
2)缺点:无法显示溢出的部分
3)清除浮动-:after伪元素法
:after方式是额外标签法的升级版,也是给父元素添加
.clearfix:after {
conten: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6、7专有 */
*zoom: 1;
}
4)清除浮动-双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix: after {
clear: both;
}
.clearfix {
*zoom: 1;
}
5)清除浮动-总结
为什么需要清除浮动
1)父级没有高度
2)子盒子浮动了
3)影响下面的布局,我们就应该清除浮动
三、ps切图
1.常见图片个数
1)jpg格式:JPEG(jpg)对色彩的信息保留较好,高清、颜色较多,产品类的图片经常用jpg格式
2)gif格式:GIF格式最多只能存储256色,所以通常用来显示简单图形及字体,但可以保存透明背景和动画效果,常用于图片小动画效果
3)png格式:结合jpg和gif的优点,具有存储形式丰富的特点,能够保持透明背景,如果想要切成背景透明的图片,请选择png格式
4)psd格式:Photoshop专用格式,可以存放图层、通道、遮罩等
2.图层切图
3.切片切图
4.插件切图
Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行书城,以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程
网址:http://www.cutterman.cn/zh/cutterman/