目录
1.盒子模型
组成：边框，内容，内边距，外边距
1.边框(border)
组成：边框宽度(粗细) 边框样式 边框颜色
border：border-width|border-style|border-color
style：solid(实线) dashed(虚线) dotted(点线)
复合写法：没有顺序
分开写法：top|bottom|left|right
表格的细线边框
border-collapse:collapse 合并相邻的边框
边框会影响盒子大小：边框会增加盒子实际大小
解决方案：
1.测量盒子大小时，不量边框
2.如果测量时包含了边框，需要width/height减去边框宽度
2.内边距
padding属性设置：top|bottom|left|right
复合写法(简写属性)：
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 1个值，代表上下左右都为5 |
| padding: 5px 10px; | 2个值，代表上下是5，左右是10 |
| padding: 5px 10px 20px; | 3个值，代表上是5,左右是10，下是20 |
| padding: 5px 10px 20px 30px; | 4个值，代表上是5，右是20，下是20，左是30(顺时针) |
内边距也会影响盒子实际大小，会撑大盒子
解决方案：如果保证盒子和效果图大小一致，让width/height减去多出来的内边距大小
巧妙运用：导航栏字数不一样多，可以不用给每个盒子宽度，直接给padding最合适
如果盒子没有指定width/height属性，padding不会撑大盒子
3.外边距
margin控制盒子之间的距离，简写与padding一致
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
1.块级盒子水平居中
1.必须指定宽度(width)
2.盒子左右外边距都设置为auto
写法:
margin-left: auto; margin-right: auto; 或margin: auto 或margin: 0 auto
2.行内元素或行内块元素水平居中
给其父元素添加text-align: center;
3.嵌套块元素垂直外边距塌陷(使用margin当外边距合并时会选较大的)
解决方案：
-
可以为父元素定义边框
-
可以为父元素定义内边距
-
可以为父元素添加overflow:hidden
4.清除内外边距
网页元素带有默认的内外边距,做法：
*{
margin= 0;
padding= 0;
}
行内元素为了照顾兼容性，一般只设置左右内外边距
4.总结
1.合理的地方用合理的标签，比如产品标题用h，大量文字段用p
2.类名是给每个盒子起一个名字，可以更好地找到盒子，选取盒子更容易，后期维护方便
3.margin和padding大部分情况可以混用，根据实际情况实现
4.去掉ul中li前面的小圆点
list-style：none;
5.圆角边框
border-radius：length；设置外边框圆角
radius 半价(圆的)，原理：椭圆与边框交集形成圆角效果
-
圆形：正方形高度或宽度的一半或者50%
-
圆角矩阵：矩形高度的一半
-
简写属性，可以跟4个值(左上，右上，右下，左下(顺时针))
两个数值：左上右下，右上左下(一般不设置3个)
分开写：border-top-left-radius
6.盒子阴影
box-shadow
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。可以负值 |
| v-shadow | 必需。垂直阴影的位置。可以负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影尺寸 |
| color | 可选。阴影颜色(rgba) |
| insert | 可选。将外部阴影(outset)改为内部阴影 |
默认外阴影(outset)，不能写单词，否则无效
盒子阴影不占空间，不影响其他盒子排列
原先盒子没有影子，鼠标经过添加阴影效果
div:hover {
box-shadow：
}
7.文字阴影
text-shadow：h-shadow v-shadow blur color
2.浮动
应用：让多个块级元素一行内排列显示
网页第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float属性创建浮动框移动，直到左(或右)边缘触及包含块或另一个浮动框的边缘
none：不浮动(默认值)；left：左浮；right：右浮
特性
1.浮动元素脱离标准流(脱标)
脱落标准普通流的控制浮动起来
浮动的盒子不再保留原先的位置
2.浮动的元素会一行内显示并且元素顶部对齐排列
浮动的元素互相贴靠在一起(没有缝隙)，如果父级宽度装不下，多出的盒子会另起一行对齐
3.浮动的元素会有行内块元素的特性
任何元素都能浮动，添加浮动都有行内块元素特性，不需要转换
块级盒子没设置宽度，添加浮动后，大小根据内容决定
4.约束浮动元素位置
策略：先用标准流的父元素排列上下，再内部子元素浮动排列左右，符合网页布局第一准则
常见网页布局
只要是通栏的盒子(和浏览器一样宽)，不需要指定宽度，只要高度
一个元素浮动，其余的兄弟元素也要浮动，防止出现问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的
清除浮动
父级盒子不方便给高度，子盒子浮动不占位置，父级盒子高度为0时，会影响下面的标准流盒子
清除浮动之后，父级会根据子盒子
clear：left|right|both(最常用，清除左右两侧浮动)
策略：闭合浮动,只在父盒子内部影响
方法：
1.额外标签法(隔墙法)
在浮动元素末尾添加一个空标签(必须是块级)，如'<div>', 添加无意义标签，结构化较差
2.父级添加overflow
设置为hidden|auto|scroll，给父元素添加代码，无法显示溢出的部分
3.父级添加after伪元素
是额外标签法的升级版，给父元素添加
.clearfix:after {
content: "";
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 { /IE6/7专有/
*zoom: 1;
}
3.定位
定位=定位模式(指定元素在文档中的定位方式)+边偏移(决定元素最终位置)
1.定位模式
position：static(静态定位)|relative(相对)|absolute(绝对)|fixed(固定)
1.静态定位
默认，无定位，按照标准流性，没有边偏移，很少使用
2.相对定位
相对于原来位置比较，与指定方向相反
它原来在标准流的位置继续占有，后面的盒子以标准流的方式对待(不脱标，继续保留原来位置)
应用：限制绝对定位，经常作为绝对定位的父级
3.绝对定位
相对于它祖先元素比较
-
如果没有祖先元素或者没有定位，则以浏览器为准定位(Document文档)
-
如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
-
不再占有原先的位置(脱标)
子绝父相(口诀)
子级使用绝对定位，父级则需要相对定位
父盒子需要加定位限制子盒子在父盒子内显示，需要占有位置
而子盒子不需要占有位置，不影响其他的兄弟盒子
子绝父相不是永远不变，子绝父绝也有可能
4.固定定位
固定于浏览器可视区的位置，在页面滚动时元素不会改变位置
以浏览器的可视窗口为参照点移动元素
跟父元素没有关系，不随滚动条滚动，不再占有原先的位置
也是脱标，可以看做特殊的绝对定位
固定在版心右侧位置
算法：让固定定位的盒子left: 50%，走到可视区(版心)的一半位置
再margin-left: 版心宽度的一半，多走版心宽度的一半位置
5.粘性定位
相对定位和固定定位的混合 sticky
以浏览器可视窗口为参照点移动元素(固定定位)，占有原先的位置(相对定位)
必须添加top，left，right，bottom其中一个才有效
跟页面滚动搭配使用，兼容性较差，IE不支持
6.定位叠放次序 z-index
使用定位时，可能会出现盒子重叠的情况，可以使用来控制盒子的前后次序(z轴)
数值越大，盒子越靠上，默认是auto，无单位
如果属性值相同，则按照书写顺序，后来居上
只有定位的盒子才有这个属性
7.绝对定位的盒子水平垂直居中
加了绝对定位的盒子不能使用margin: auto
算法：left: 50%，让盒子的左侧移动到父级元素的水平中心位置
margin-left: -……px;让盒子向左移动自身宽度的一半
8.定位特殊特性
绝对定位和相对定位与浮动类似
行内元素添加定位，可以直接设置高度和宽度
块级元素添加定位，如果不给宽度或者高度，默认为内容的大小
脱标的盒子不会触发外边距塌陷
浮动元素不同，只会压住标准流的盒子，不会压住标准流盒子里面的文字(图片)
但是绝对定位或固定定位会压住下面标准流所有内容
浮动压不住的原因：浮动产生的目的最初是为了做文字环绕效果的
2.边偏移
| 属性 | 描述 |
|---|---|
| top | 顶端，相对于其父元素上边线距离 |
| bottom | 底部，相对于其父元素下边线距离 |
| left | 左侧，相对于其父元素左边线距离 |
| right | 右侧，相对于其父元素右边线距离 |
实际开发中，基本都包含三种布局方式(移动端会有新的)
4.基础技巧
1.PS切图
1.图层切图
最简单的方式：右键图层 -> 快速导出为png
选中需要图层：图层菜单 -> 合并图层(Ctrl+E)
2.切片切图
选中：利用切片工具手动划出
导出：文件菜单 -> 导出 -> 存储为web设备所用格式 -> 选择所要图片格式 -> 存储
3.PS插件切图
cutterman在PS运行，能自动将需要图片导出
2.属性书写顺序
1.布局定位属性：display(建议第一个写，毕竟关系到模式)/position/float/clear/visibility/overflow
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient……
3.页面布局整体思路
1.必须确定页面的版心(可视区)，测量可得
2.分析页面行模块，以及每个行模块中的列模块，其实就是页面布局第一准则
3.一行中的列模块浮动布局，先确定每列大小，再确定列的位置，页面布局第二准则
4.先写结构，后写样式，结构最重要
5.先理清布局结构，再写代码，要多写多积累经验！
4.导航栏注意点
实际开发中，不会直接用链接a而是用li包含链接(li+a)
这样做语义更清晰，是有条理的列表内容
如果直接用a，搜索引擎辨别会有关键字堆砌(容易被搜索引擎降权)，影响网站排名
让导航栏一行显示，给li加浮动
导航栏可以不给宽度，可以继续添加其余文字
按钮默认有边框
浮动的盒子不会有外边距合并的问题
Ctrl+G 搜索导航跳转到对应行数
如果一个盒子既有left(top)属性也有right(bottom)属性，默认会执行left(top)
5.元素的显示与隐藏
网站广告当点击关闭就不见，但重新刷新页面，会重新出现
属性
display: none(隐藏对象)|block(除了转换为块级元素，还能显示元素)
隐藏元素后，不再占有原来的位置
后面应用极其广泛，搭配js做特效
visibility: visible(可见)|hidden(隐藏，继续占有原来的位置)
overflow: visible(默认)|hidden(隐藏多出的部分)|scroll(溢出与否都 会显示滚动条)|auto(在需要时才添加滚动条)
一般并不想让溢出内容显示，因为会影响布局
如果有定位的盒子，慎用hidden，因为它会隐藏多余的部分
5.高级技巧
1.精灵技术
网页中会应用很多小的背景图像作为装饰，当过多时，服务器会频繁地接收和发送请求图片，造成请求压力过大，这将大大降低页面的加载速度
为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术(CSS Sprites、CSS 雪碧)
核心原理：将网页中的小图像整合到一张大图中，这样只需要一次请求就可以
核心：
1.主要针对于背景图片使用
2.大图片也叫sprites
3.移动背景图片位置，可以使用background-position
4.移动距离就是图片的x和y坐标，与网页坐标有所不同
5.一般都是往上往左移动，数值为负
6.使用精灵图需要精确测量，每个小图片的大小和位置
缺点：文件比较大，图片本身放大和缩小会失真，一旦制作完毕想更换很复杂
2.字体图标(iconfont)
主要显示网页通用、常用的小图标
可为前端工程师提供方便高效的图标使用方式，展示的是图标，本质是字体
优点
轻量级：一个图标字体比一系列图像要小，一旦加载，图标马上就能渲染出来，减少服务器请求
灵活性：可以随意改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器
不能替换精灵技术，只是对工作图标部分技术提升和优化
如果遇到结构和样式复杂一点的图片，就用精灵图
1.下载
推荐网站：1.icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon 内容种类繁多，很全面，国外服务器，打开网速较慢
2.阿里iconfont字库 iconfont-阿里巴巴矢量图标库 包含淘宝和阿里巴巴图标库
2.引入
不同浏览器支持的字体格式是不一样的，而字体图标的兼容，是因为包含了主流浏览器支持的字体文件
1.把下载包里的fonts文件夹放入页面(要用的)根目录下
2.在CSS样式中全局声明字体(可以在style.css文件中复制第一段)
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?6y334q'); src: url('fonts/icomoon.eot?6y334q#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?6y334q') format('truetype'), url('fonts/icomoon.woff?6y334q') format('woff'), url('fonts/icomoon.svg?6y334q#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }
3.html标签里复制右侧小方框(一般打开demo.html文件即可)
3.追加
如果原来的字体图标不够用，需要添加新的到原来的字体文件中
把压缩包里的selection.json从新上传，然后选中自己想要的新图标，再下载压缩包，并替换原来的
3.CSS三角
网页常见一些三角形，使用CSS画出来，不必做出图片或者字体图标
一般写法(只给边框)：
div {
width: 0;
height: 0;
line-height: 0; //可以不写
font-size: 0; //可以不写
border: px solid transparent;
border- -color: ;
}
4.用户界面
更改一些用户操作样式，更好的提高用户体验
1.鼠标样式 cursor
设置或检索在对象上移动的鼠标指针采用系统预定义的光标样式
| 属性 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
2.轮廓线 outline
给表单添加outline: 0(none);样式之后，就可以去掉默认的蓝色边框
input {outline: none; }
3.防止拖拽文本域 resize
实际开发中，文本域右下角是不可以拖拽的，textarea {resize: none(0);}
4.vertical-align
用于图片或者表单和文字垂直对齐
vertical-align: baseline(基线)|top(顶线)|middle(中线)|bottom(底线)
图片、表单都属于行内块元素，默认是基线对齐
想居中对齐，可以添加vertical-align属性设置为middle
5.解决图片底部默认空白
bug：图片底侧会有空白缝隙，原因是行内块元素会和文字基线对齐
1.给图片添加vertical-align: middle|top|bottom等 (提倡使用)
2.把图片转换为块级元素 display: block；
6.溢出的文字省略号显示
1.单行文字
条件：1.先强制一行内显示文本 (默认为normal自动换行)
white-space: nowrap;
2.超出的部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow: elliipsis;
2.多行文字
有较大兼容性问题，适合于webkit浏览器或移动端，移动端大部分是webkit内核
但是要严格控制盒子的大小
overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素现实的文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;
更推荐让后台人员做这个效果，因为可以设置显示多少个字，操作更简单
5.布局效果
1.margin负值运用
让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框
2.边框
鼠标经过摸个盒子时，提高当前盒子的层级即可(如果没有定位，则加相对定位；如果有定位，则加z-index)
3.文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
4.行内块的巧妙运用
给父盒子添加text-align: center; 子盒子自动水平居中对齐
5.CSS三角强化
把左边和下边边框宽度设置为0，把上边框设置大一些，最后只留下右边的
width: 0; height: 0; border-color: transparent red transparent transparent; border-style: solid; border-width: 22px 8px 0 0;
6.CSS初始化
不同浏览器对有些标签默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器兼容，需要初始化
其实就是重设浏览器样式(也叫CSS reset)
以京东为例：
/* 把所有的内外边距清零 */
* {
margin: 0;
padding: 0;
}
/* 斜体的文字不倾斜 */
em,
i,
u {
font-style: normal
}
/* 去掉li的小圆点 */
ol,
ul {
list-style: none
}
img {
/* 照顾低版本浏览器，如果图片外面包含链接会有边框问题 */
border: 0;
/* 取消图片底侧有空白缝隙问题 */
vertical-align: middle
}
button {
/* 当鼠标经过button按钮时，鼠标变成小手 */
cursor: pointer
}
/* 取消下划线 */
a {
text-decoration: none;
}
/* 隐藏元素 */
.hide {
display: none
}
.clear,
.clr {
display: block;
overflow: hidden;
clear: both;
height: 0;
line-height: 0;
font-size: 0
}
/* 清除浮动 */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix {
*zoom: 1
}
Unicode编码字体：
可以有效地避免浏览器解释CSS代码时出现乱码的问题
比如：黑体 \9ED1\4F53; 宋体 \5B8B\4F53; 微软雅黑 \5FAE\8F6F\96C5\9ED1
内容持续学习与更新，欢迎你的加入！
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
