跟着pink老师学前端
浏览器内核（渲染引擎）：负责读取网页内容，整理信息，计算网页的显示方式并显示页面。
主要浏览器内核
Trident 主要浏览器 IE/猎豹/360百度浏览器
Gecko 主要浏览器 火狐浏览器
Webkit 主要浏览器Safari
Blink内核 Chrome/Opera
<!DOCTYPE html> |
文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
<html lang="en"> |
告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示
<meta charset="UTF-8"> |
字符编码
表格相关属性
cellpadding 单元格边框与内容之间的距离 默认1像素
cellspacing 单元格边框之间的距离 默认2像素
align left、center、right 规定表格相对周围元素的对齐方式
border “1”表示单元格是否有边框
width 表格的宽度
<table cellpadding="0" cellspacing="0" align="center" width="900px" border="1px"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>佟丽娅</td> <td>女</td> <td>32</td> </tr> </tbody> </table> |
合并单元格
rowspan=”跨行合并单元格的个数”
colspan=”跨列合并单元格的个数”
<table border="1px"> <tr> <th>性别</th> <th>性别</th> <th>性别</th> <th>性别</th> <th>性别</th> <th>性别</th> <th>性别</th> </tr> <tr> <td rowspan="3">合并三行</td> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> </tr> <tr> <td>哈哈</td> <td>哈哈</td> <td colspan="4">合并四列</td> </tr> <tr> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> <td>哈哈</td> </tr> </table> |
自定义列表
<dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl> |
input框
<form> maxlength 限定输入字符的数量 <input type="text" name="name" value="" maxlength="11"> 图片按钮 <input type="image" src="./image/1.jpg"> 重置按钮 <input type="reset"> </form> |
label标签
<form> <input type="radio" name="sex" id="boy"><label for="boy">男</label> <input type="radio" name="sex" id="girl"><label for="girl">女</label> </form> |
CSS选择器
选择所有父级是 div 元素的 p 元素（不包括孙子辈标签 ）
div>p {
color: red;
}
<div>
<p>red</p>
<p>red</p>
</div> |
选择所有紧接着 div 元素之后的 p 元素（div后面紧跟着的第一个p标签(必须是紧邻的标签)）
div+p {
color: blue;
}
<div>
<span>red</span>
</div>
<p>blue</p> |
选择所有带有 href 属性元素
[href] {
font-weight: bold;
} |
选择所有带有 href 属性值为 # 的元素
[href="#"] {
color: red;
} |
选择所有属性包含”单词”(空格隔开的)为 hao123 的元素 （如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~））
[alt~="important"] {
color: pink;
}
<p class="important warning">生效</p>
<p class="important">生效</p> |
选择所有属性为 en开头 或者 en
[alt^="en"] {
color: green;
}
<a href="#" alt="en">[alt^="en"] 生效</a>
<a href="#" alt="en-不错哦">[alt^="en"] 生效</a>
<a href="#" alt="enaaaa">[alt^="en"]生效</a> |
选择所有属性为 en-开头 或者 en
[alt|="en"] {
color: blueviolet;
}
<a href="#" alt="en">[alt|="en"]生效</a>
<a href="#" alt="en-不错哦">[alt|="en"]生效</a> |
选择属于其父元素的首个子元素且为 p 元素
p:first-child {
text-decoration: line-through;
}
<div>
<p>生效</p>
<p>不生效</p>
</div> |
选择每个 p 元素是其父级的第一个 p 元素
p:first-of-type {
color: red;
}
<div>
<span>span</span>
<p>生效</p>
</div> |
font-family属性
字体之间必须使用英文逗号隔开。
如果有空格隔开的多个单词组成的字体，加引号。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
span {
font-family: 'Microsoft Yahei';
}
p {
font-family: Arial, 'Microsoft Yahei';
} |
font-weight属性
100-900 400等同于normal,而700等同于bold，注意这个数字后边不要跟单位
font-style属性
normal 正常
italic 斜体
平时我们很少给文字加斜体，反而要给斜体标签(em,i)改为不倾斜字体。
font字体复合属性
font: font-style font-weight font-size/line-height font-family
使用font属性，必须按照顺序书写
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font将不起作用
p {
font: italic bold 18px "Microsoft Yahei";
} |
text-decoration
overline 上划线
line-through 删除线
underline 下划线
Emmet语法
①快速生成HTML结构语法
1.生成标签 直接输入标签名按tab键即可 比如div 然后tab键，就可以生成div标签
2.多个相同标签 标签*n 就可以生成n个标签
3.如果有父子级关系，可以用>,比如 ul>li
4.如果有兄弟关系的标签，用+,比如div+p
5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
6.如果生成的div类名是有顺序的，可以用自增符号$，如.demo$*3，生成
7.如果想要在生成的标签中有内容，可以用{},如.demo$*3{aaa}
②快速生成CSS样式语法
CSS权重计算规则
内联样式，如: style=” “，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类和属性选择器，如.content，权值为0010。
类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
网页布局特点
1.先准备好相关的网页元素，网页元素基本都是盒子BOX
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
border-collapse合并边框
table {
width: 500px;
height: 50px;
border-collapse: collapse;
/* border-collapse 属性设置表格的边框是否被合并为一个单一的边框 */
}
table td,
table th {
border: 1px solid pink;
} |
行内元素或者行内块元素水平居中，给其父亲设置水平居中text-align:center;即可。
嵌套块元素垂直外边距塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案
①可以为父元素定上边框 border:1px solid transparent
②可以为父元素定义上内边距 padding:1px
③可以为父元素添加上overflow:hidden
清除内外边距
网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致，因此，我们在布局前，首先要清除下网页元素的内外边距。
* {
padding:0;
margin:0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转化为行内和行内块元素就可以了。
PS测量基本操作
文件->打开:打开文件
CTRL+R：可以打开标尺，或者视图->标尺
右击标尺，把里面的单位改为像素
CTRL+加号(+)可以放大视图，CTRL+减号(-可以缩小视图)
按住空格键，鼠标可以变成小手，拖动ps视图
用选区拖动，可以测量大小
CTRL+D可以取消选区，或者在旁边空白处点击一下也可以取消选区
box-shadow阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
box-shadow: 10px 20px 20px 1px rgba(0, 0, 0, .3);
text-shadow文字阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离
color 可选。阴影的颜色
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
什么是浮动
float属性哟用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘。
设置了浮动的元素最重要特性：
1.脱离标准普通流的控制移动到指定位置，浮动的盒子不再保留原来的位置。
2.浮动元素具有行内块元素特性。任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
①如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
②浮动的盒子中间是没有间隙的，是紧挨着一起的。
③行内元素同理
浮动影响
一个盒子浮动，会压住后边的标准流，不会压住前边的标准流。
为什么要清除浮动
由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
清除浮动的几种方法
1.额外标签法也称为隔墙法，是W3C推荐的做法。额外标签法会在浮动元素末尾添加一个空的标签，例如
或者其他标签，比如
等。要求这个空标签，必须是块级元素。
.float_d {
float: left;
}
.clearfix {
clear: both;
}
<div>
<div class="float_d">
浮动内容
</div>
<div class="clearfix"></div>
</div>
<div class="footer">
footer
</div> |
2.父级添加overflow属性
可以给父级元素添加overflow属性，将其属性值设置为hidden，auto或者scroll。
.float_d {
float: left;
}
.box {
overflow: hidden;
}
<div class="box">
<div class="float_d">
浮动内容
</div>
</div>
<div class="footer">
footer
</div> |
3.父级添加after伪元素（强烈推荐）
.float_d {
float: left;
}
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
/*ie6,ie7专属*/
}
<div class="box clearfix">
<div class="float_d">
浮动内容
</div>
</div>
<div class="footer">
footer
</div> |
4.父级添加双伪元素
<style> .float_d { float: left; } .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /*ie6,ie7专属*/ } </style> <div class="box clearfix"> <div class="float_d"> 浮动内容 </div> </div> <div class="footer"> footer </div> |
块元素
①独占一行
②高度，宽度，外边距，以及内边距都可以控制
③宽度默认是容器的100%
④是一个容器及盒子，里面可以放行内或者块级元素
注意
文字类的元素内，不能使用块级元素
p标签主要存放文字，因此p里边不能放块级元素，特别是不能放div
同理h1 ~ h6 等都是文字类块级标签，里边也不能放其他块级元素
行内元素
①相邻行内元素在一行上，一行可以显示多个。
②高宽直接设置是无效的。
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素。
注意：
链接里边不能放链接，特殊情况a标签里边可以放块级元素，但是给a转换一下块级模式更安全
行内块元素
在行内元素中有几个特殊的标签 img input td，它们同事具有块元素和行内元素的特点，有些资料称他们为行内块元素。
①和相邻行内（行内块）元素在一行上，但是它们之间会有空白间隙，一行可以显示多个（行内元素特点）
②默认宽度就是它本身内容的宽度
③宽度，行高，外边距以及内边距都可以控制
background-position背景图片位置
1.参数是方位名词
①如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left一致
②如果只制定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精确单位
①如果参数值是精确坐标，那么第一个值一定是x坐标，第二个值是y坐标
②如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中，如background-position:20px;
3.参数是混合单位
背景半透明
background: rgba(0, 0, 0, 0.1);
PS测量基本操作
文件->打开:打开文件
CTRL+R：可以打开标尺，或者视图->标尺
右击标尺，把里面的单位改为像素
CTRL+加号(+)可以放大视图，CTRL+减号(-可以缩小视图)
按住空格键，鼠标可以变成小手，拖动ps视图
用选区拖动，可以测量大小
CTRL+D可以取消选区，或者在旁边空白处点击一下也可以取消选区
box-shadow阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
box-shadow: 10px 20px 20px 1px rgba(0, 0, 0, .3); |
text-shadow文字阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离
color 可选。阴影的颜色
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
PS切图
ps有很多的切图方式：图层切图、切片切图、PS插件切图。
1.图层切图
最简单的切图方式：右击图层->快速导出为png，很多情况下，我们需要合并图层再导出：选中需要的图层：图层菜单->合并图层
2.切片工具
①利用切片选中图片
利用切片工具手动划出
②导出选中的图片
文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储为web设备所用格式
③ps插件切图
Cutterman是一款运行在photoshop中的插件，能够自动将你所需要的图层进行输出，以替代传统的手工”导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程。
CSS属性书写顺序（重点）
建议遵循以下顺序
①布局定位属性：display/postion/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
②自身属性：width/height/margin/padding/border/background
③文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
④其他属性CSS3：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient
页面布局整体思路
为了提高网页制作的效率，布局时通常有以下整体思路：
①必须确定页面的版心（可视区），我们测量可得知
②分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则
③一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
④制作html结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要
⑤所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累
导航栏注意点
实际开发中，我们不会直接用链接a而是用li包含链接(li+a)的做法。
1.li+a语意更清晰，一看着就是有条理的列表型内容。
2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎降权的风险），从而影响网站排名
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
1.定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
2.边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right。
top top:80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom:80px 底部偏移量，定义元素相对于其父元素下边线的距离
left left:80px 左侧偏移量，定义元素相对于其父元素左边线的距离
right right:80px 右侧偏移量，定义元素相对于其父元素右边线的距离
静态定位static
静态定位是元素的默认定位方式，无定位的意思。静态定位按照标准流特性摆放位置，它没有边偏移。静态定位在布局时很少用到。
相对定位relative
相对定位是元素在移动位置的时候，是相对于它”原来”的位置来说的。
特点
1.它是相对于它自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2.原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。
绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2.只要祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置（脱标）
子绝父相
1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子。
2.父盒子需要加定位限制子盒子在父盒子内显示。
3.父盒子布局时，需要占有位置，因此父亲只能是相对定位。
总结：相对定位经常用来作为绝对定位的父级。因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
固定定位fixed
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
固定定位特点
1.以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系，不随滚动条滚动。
2.固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
固定定位小技巧，固定在版心右侧位置。
小算法：
1.让固定定位的盒子left:50%;,走到浏览器可视区（也可以看做版心的一半的位置）
2.让固定的盒子margin-left版心宽度的一半距离。
以上两步就可以让固定定位的盒子贴着版心右侧对齐了。
<style> .w { background-color: pink; margin: 30px auto; height: 500px; width: 1200px; } .fixed { position: fixed; left: 50%; top: 50%; margin-left: 605px; width: 80px; height: 80px; background-color: black; } </style> <body> <div class="w"> <div class="fixed"> </div> </div> </body> |
粘性定位 sticky
粘性定位可以被认为是相对定位和固定定位的混合。
特点：
1.以浏览器的可视窗口为擦参考点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加top、left、right、bottom其中一个才生效
定位叠放次序 z-index
z-index:1
1.数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
2.如果属性值相同，则按照书写顺序，后来居上。
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
.box {
position: absolute;
/*父容器宽度的一半*/
left: 50%;
/*自身宽度的一半*/
margin-left: -100px;
top: 50%;
margin-top: -150px;
background-color: pink;
width: 200px;
height: 300px;
} |
定位的特殊特性
绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
.box2 {
position: absolute;
width: 100px;
height: 200px;
background-color: pink;
}
<span class="box2"></span> |
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
.box3 {
position: absolute;
background-color: blue;
} |
3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。
4.绝对定位会完全压住盒子
①浮动元素不同，只会压住它下面标准的盒子，但是不会压住下面标准的盒子里面的文字（图片）。
.box {
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
<div class="box">
</div>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p> |
②绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做位子环绕效果，文字会围绕浮动元素。
display属性
用于设置一个元素如何显示
display:none 隐藏对象
display:block 除了转换块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置。
visibility 可见性
visibility:visible
visibility:hidden
visibility隐藏元素后，继续占有原来的位置。
overflow 溢出
auto溢出的时候才显示滚动条，不溢出不显示滚动条
scroll 溢出的部分显示滚动条 不溢出也显示滚动条
使用精灵图核心
1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
2.这个大图片也成为sprites精灵图 或者 雪碧图
3.移动背景图片的位置，此时可以使用background-position
4.移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值（x轴又走是正值，左走是负值，y轴同理）
6.使用精灵图的时候需要精确测量，每个小背景图图片的大小和位置
字体图标
使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图有很多优点，但是缺点也很明显：
1.图片本身还是比较大的。
2.图片本身放大和缩小都会失真。
3.一旦图片制作完毕想要更换非常复杂。
字体图标的优点
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有的浏览器，请放心使用
鼠标样式
<li style="cursor: default;">我是鼠标默认样式</li> <li style="cursor: pointer;">鼠标小手样式</li> <li style="cursor: move;">鼠标移动样式</li> <li style="cursor: text;">鼠标文本样式</li> <li style="cursor:not-allowed;">鼠标禁止样式</li> |
取消表单轮廓和禁止表单拖拽
轮廓线outline
给表单添加outline:0;或者outline:none;样式之后，就可以去掉默认的蓝色边框。
input,
textarea {
outline: none;
}
textarea {
resize: none;
} |
vertical-align
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
vertical-align:baseline | top | middle | bottom
baseline 默认。元素放置在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
解决图片底部默认空白缝隙问题
原因：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加vertical-align:middle top bottom
2.把图片转换为块级元素display:block;
单行文字溢出省略号 必须满足3个条件
white-space: nowrap; //强制不换行
overflow: hidden; // 超出的部分隐藏
text-overflow: ellipsis; // 省略号替代超出的部分
多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或者移动端(移动端大部分是webkit内核)
.box1 {
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型展示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置和检索伸缩对象的子元素的排列方式*/
-webkit-box-orient: vertical;
} |
margin负值巧妙运用
1.如果盒子没有定位，则鼠标经过添加相对定位即可
li {
float: left;
background-color: pink;
width: 250px;
height: 200px;
border: 1px solid black;
margin-left: -1px;
}
li:hover {
position: relative;
border: 1px solid blue;
} |
2.如果盒子有定位，则鼠标经过添加z-index即可
li {
position: relative;
float: left;
background-color: pink;
width: 250px;
height: 200px;
border: 1px solid black;
margin-left: -1px;
}
li:hover {
z-index: 1;
border: 1px solid blue;
} |
行内块巧妙运用分页
<style> * { padding: 0; margin: 0; } .box { text-align: center; } .box a { display: inline-block; height: 50px; line-height: 50px; padding: 0 18px; border: 1px solid #DCDCDC; background-color: #F5F5F5; text-align: center; text-decoration: none; } .page { height: 50px; outline: none; border: 1px solid #DCDCDC; } .submit { height: 50px; padding: 0 25px; border: 1px solid #DCDCDC; background-color: #F5F5F5; } </style> <div class="box"> <a href="" class="prev"><<上一页</a> <a href="">1</a> <a href="">2222</a> <a href="">33344</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">...</a> <a href="" class="next">下一页>></a> 共10页 到第 <input type="number" class="page" />页 <input type="button" value="提交" class="submit" /> </div> |
CSS三角强化
.box {
width: 0;
height: 0;
border-top: 150px solid transparent;
border-right: 50px solid pink;
border-bottom: 0 solid blue;
border-left: 0 solid green;
} |
css三角应用 京东价格
.price {
width: 180px;
height: 25px;
line-height: 25px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
height: 100%;
width: 120px;
text-align: center;
background-color: red;
font-weight: bold;
color: white;
}
.miaosha i {
position: absolute;
top: 0;
right: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 25px 10px 0 0;
}
.origin {
float: right;
height: 100%;
color: gray;
width: 60px;
text-align: center;
text-decoration: line-through;
}
<div class="box">
</div>
<div class="price">
<span class="miaosha">
¥1800
<i></i>
</span>
<span class="origin">
¥2500
</span>
</div> |
不同浏览器对标签的默认值是不同的，为了消除不同浏览器的差异，我们需要对css初始化，也就是重设浏览器的样式（也成为CSS reset）。
Unicode编码字体
把中文字体的名称用相应的unicode编码来代替，这样可以有效避免浏览器解释css代码的时候出现乱码的问题。
比如黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
html5新增的语义化标签
header 头部
nav 导航
article 内容
section 定义文档某个区域
aside 侧边栏
footer 尾部
nth-child和nth-of-type区别
E:nth-child(n) 会把所有的盒子都排列序号，执行的时候首先看序号，之后会回去看前面的元素E
E:nth-of-type(n) 执行的时候，先汇总所有的指定元素E，然后再看序号。
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
::before 在元素内部之前
::after 在元素内部之后
before和after创建的元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，我们成为伪元素
必须有content属性
伪元素选择器和标签选择器一样，权重为1
伪元素使用iconfont字体图标
<style> @font-face { font-family: 'iconfont'; src: url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .box { position: relative; width: 250px; background-color: pink; border: 1px solid grey; height: 35px; padding: 5px 30px; line-height: 35px; } .box::before { position: absolute; left: 10px; content: "\e760" } .box::after { position: absolute; right: 10px; content: "\e74d" } </style> <div class="box iconfont"> 这是一个div </div> |
土豆伪元素
<style> * { padding: 0; margin: 0; } .tudou { position: relative; width: 440px; height: 401px; } .tudou .mask { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .3) url('./image/播放.png') no-repeat center; display: none; z-index: 10; } .tudou img { width: 100%; height: 100%; } /*当鼠标经过 盒子里边的遮罩层显示出来*/ .tudou:hover .mask { display: block; } </style> <div class="tudou"> <div class="mask"> </div> <img src="./image/2.jpg" /> </div> |
伪元素改造
<style> * { padding: 0; margin: 0; } .tudou { position: relative; width: 440px; height: 401px; } .tudou::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .3) url('./image/播放.png') no-repeat center; display: none; z-index: 10; } .tudou img { width: 100%; height: 100%; } /*当鼠标经过 盒子里边的遮罩层显示出来*/ .tudou:hover::before { display: block; } </style> <body> <div class="tudou"> <img src="./image/2.jpg" /> </div> </body> |
伪元素清除浮动
.clearfix::after{
content:"",
display:block;
height:0;
clear:both;
visibility:hidden;
} |
CSS box-sizing指定盒子模型，有两个值，content-box和border-box
box-sizing:content-box（默认值） 盒子大小为width + padding + margin
box-sizing:border-box 盒子大小为width
calc()函数
width:calc(100% -30px) /*永远比父盒子小30px*/
.box {
width: 250px;
background-color: pink;
height: 300px;
}
.son {
background-color: blue;
width: calc(100% - 30px);
height: 30px;
} |
css过渡
transition:要过渡的属性 花费时间 运动曲线 合适开始;
1.想要变化的css属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以。
2.花费时间：单位是秒，必须写单位，比如0.5s
3.运动曲线：默认是ease(可以省略)
4.何时开始：单位是s（必须写单位），可以设置延迟触发时间，默认是0s（可以省略）
2d转换之移动translate，最大的优点是不影响其他元素的位置。
css三角旋转
.box2 {
position: relative;
width: 250px;
height: 35px;
border: 1px solid black;
}
.box2::after {
content: '';
position: absolute;
top: 5px;
right: 5px;
width: 12px;
height: 12px;
border-right: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
transition: all .5s;
}
.box2:hover::after {
transform: rotate(225deg);
} |
2D旋转综合写法顺序
transform: translate() rotate() scale(); |
当我们同时有位移和其他属性的时候，记得要将位移放到最前
动画的基本使用
制作动画分为两步
1.先定义动画
2.再使用(调用)动画
<style> /*①定义动画*/ @keyframes move { 0% { transform: translate(0px) } 100% { transform: translate(1000px) } } .box { width: 250px; height: 250px; background-color: pink; /*②调用动画*/ animation-name: move; animation-duration: 1s; } </style> |
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成。
x轴：水平向右为正
y轴：垂直向下为正
z轴：垂直屏幕向外为正
透视perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也成为视矩，视矩就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素
透视写在被观察元素的父盒子上面的
d:就是视矩，视矩就是一个距离人的眼睛到屏幕的距离
z:就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。
3D呈现 transform-style
控制子元素是否开启三位立体环境
transform-style:flat子元素不开启3d立体空间 默认的
transform-style:preserve
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1.私有前缀
-moz- 代表firefox浏览器私有属性
-ms- 代表ie浏览器私有属性
-webkit- 代表safari chrome私有属性
-o- 代表opera私有属性
2.提倡的写法
-moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px; |
理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽
meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商在出厂时就设置好了，比如苹果6/7/8是750*1334
我们开发时候的1px不是一定等于一个物理像素的
PC端页面，1个px等于一个物理像素，但是移动端就不尽相同
一个px的能显示的物理像素点的个数，成为物理像素比或屏幕像素比
多倍图
对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的像素比会放大倍数，这样会造成模糊。在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。通常使用二倍图，因为iphone6|7|8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发需求。
iphone下面
img{
/* 原始图片 100px * 100px */
width:50px;
height:50px;
}
.box{
/* 原始图片 100px * 100px */
background-size:50px 50px;
} |
css3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-box;
点击高亮我们需要清除 设置transparent完成透明
-webkit-tap-highlight-color:transparent;
在移动浏览器上默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance:none;
禁用长按页面时弹出菜单
img,a{
-webkit-touch-callout:none;
} |
移动端布局
1.单独制作移动端页面（主流）
流式布局（百分比布局）
flex弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局
2.响应式页面兼容移动端（其次）
媒体查询
bootstrap
二倍精灵图做法
在fireword里面把精灵图等比例缩放为原来的一半
之后根据大小测量坐标
注意代码里面background-size也要写:精灵图原来宽度的一半
flex布局
当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align都将失效。
常用叫法 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用flex布局的元素，我们成为flex容器，简称容器flex container。它的所有子元素自动成为容器成员，成为flex项目flex item
flex布局原理
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
常见父项属性
align-content 设置侧轴上的子元素的排列方式(多行)
flex-flow 复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction设置主轴的方向
1.主轴与侧轴（行与列 或者 x轴与y轴）
默认主轴方向是x轴方向，水平向右
默认侧轴就是y轴方向，水平向下
属性值
row、row-reverse、column、column-reverse
justify-content 设置主轴上的子元素排列方式
属性值
flex-start 默认值 从头部开始
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平均剩余空间
space-between 先贴两边 再评分剩余空间
flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线上（又称轴线）上。flex-wrap属性定义，flex布局中默认是不换行的。
no-wrap 默认值，不换行
wrap 换行
align-items 设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴上的排列方式，在子项为单项的时候使用
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸（默认值）
align-content
设置侧轴上子元素的排列方式（多行）
设置子轴在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行上是没有效果的。
flex-start
flex-end
center 在侧轴中间显示
space-between 子项在侧轴先分布在两头，在平分剩余空间
space-around 子项在侧轴平分剩余空间
stretch 设置子项元素高度评分父元素高度
align-items和align-content的区别
align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找align-items 多行找align-content
flex-flow
flex-flow属性是flex-direction和flex-wrap的复合属性
flex布局子项常见属性
flex子项目占的份数
flex属性自定义项目分配剩余空间，用flex表示占多少份数
align-self控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认为auto，表示集成父元素的align-items属性，如果没有父元素，则等同于stretch
order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0。注意：和z-index不一样。
rem适配布局
常见问题
1.页面布局文字能否随着屏幕大小变化而变化？
2.流式布局和flex布局主要针对于宽度布局，那高度如何设置？
3.怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
rem基础
rem单位
rem是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。比如，根元素html设置font-size=12px，非根元素设置width:2rem;换成px表示就是24px。
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。
媒体查询
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸，设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、安卓手机、平板等设备都用得到多媒体查询
语法规范
@media mediatype and|not|only (media feature){
}
用@media开头，注意@符号
mediatype 媒体类型
关键字 and not only
media feature媒体特性必须有小括号包含
1.mediatype查询类型
将不同的终端设备划分成不同的类型，成为媒体类型
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
2.关键字
关键字媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
and 可以将多个媒体特性连接到一起，相当于且的意思。
not 排除多个媒体类型，相当于非的意思，可以省略。
only 指定某个特定的媒体类型，可以省略。
3.媒体类型
每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，我们暂且了解三个，注意他们要加小括号包含
值 说明
width
max-width
min-width
①<=539蓝色 ②>=540且<=970绿色 ③>=970红色 @media screen and (max-width:539px) { body { background-color: blue; } } @media screen and (min-width:540px) { body { background-color: green; } } @media screen and (min-width:970px) { body { background-color: red; } } |
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸，媒体查询可以根据不同设备宽度来修改样式。媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化。
媒体查询 + rem实现元素动态变化
@media screen and (max-width: 999px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 1000px) {
html {
font-size: 100px;
}
}
body {
font-size: 1rem;
} |
引入资源
当样式比较多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）。原理：直接在link中判断设备的尺寸，然后引用不同的css文件。
语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href=""> |
引入资源示例
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"> <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)"> |
css弊端
css是一门非程式语言，没有变量、函数、SCOPE（作用域）等概念。
css需要书写大量看似没有逻辑的代码，css冗余度是比较高的。
不方便维护及扩展，不利于复用。
css没有很好的计算能力。
非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目。
less（leaner style sheets）是一门css扩展语言，也成为css预处理器。
作为css的一种形式的扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入程序式语言的特性。
它在css的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，就像它的名称所说的那样，less可以让我们用更少的代码做更多的事情。
常见css预处理器：sass、less、stylus
1.less变量
变量是指没有固定的值，可以改变的，因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值
变量命名规范
必须有@前缀
不能包含特殊字符
不能以数字开头
大小写敏感
2.less编译
本质上，less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规规则，这些规则最终会通过解析器，编译生成对应的css文件。所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。
Easy Less插件
less嵌套
如果遇见（交集|伪类|伪元素选择器）
内层选择器前面没有&符号，则它被解析为父选择器的后代
如果有&符号，它就被解析为父元素自身或者父元素的伪类
div a:hover {
color: red;
}
div a::before {
content: '';
}
div{
a{
&:hover{
color:red;
}
&::before{
content:''
}
}
} |
less运算
1.我们运算符的左右两侧必须敲一个空格隔开
2.两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
3.两个数参与运算，如果2个数都有单位，而且不一样的单位，最后的结果以第一个单位为准
注意
乘号(*)和除号（/）的写法
运算符中间左右有个空格隔开1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间有一个值有单位，则运算结果就取该单位
rem适配方案
1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。
rem实际开发适配方案
1.按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；
2.css中，设计稿元素的宽、高，相对位置等取值，按照同等比例换算为rem为单位的值。
rem适配方案技术使用
两种方案（如下）现在都存在，方案2更简单，现阶段大家无需了解里面的js代码。
rem实际开发适配方案①
less + 媒体查询 + rem
rem实际开发适配方案②(推荐)
flexible.js
rem
1.设计稿常见尺寸宽度
设备 常见宽度
iphone45 640px
iphone678 750px
android 常见320px、360px、375px、384px、400px、414px、500px、720px，大部分4.7~5寸的安卓设备为720px
一般情况下，我们以一套或者两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准。
2.动态设置html标签font-size大小
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③用我们页面元素的大小除以不同的html字体大小会发现他们比你还是相同的
④那么在320px设备的时候，字体大小为320/15就是21.33px
⑤用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
⑥比如我们以750px为标准设计稿
⑦一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem*2rem比例是1:1
⑧320屏幕下，html字体大小为21.33，则2rem=42.66px 此时宽和高都是42.66 但是宽和高的比例都是1比1
⑨但是已经能实现不同屏幕下，页面元素盒子等比例缩放的结果
元素大小取值方法
①最后的公式：页面元素的rem值 = 页面元素值（px）/(屏幕宽度/划分的份数)
②屏幕宽度/划分的份数 = html font-size的大小
③或者：页面元素的rem值 = 页面元素值(px)/html font-size字体大小
1.首先我们选一套标准尺寸750为准
2.我们用屏幕尺寸 除以 我们划分的份数 得到了html里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的
3.页面元素的rem值 = 页面元素在 750像素下px值/html 里面的文字大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @media screen and (min-width:320px) { html{ font-size:21.33px; } } @media screen and (min-width:750px){ html{ font-size:50px; } } div{ width:2rem; height:2rem; background-color: pink; } </style> </head> <body> <div> </div> </body> </html> |
4.设置公共common.less文件
①.设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
②.我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
③.我们划分的份数暂定为15等份
④.因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px,注意这句话写到最上面
flexible.js
它的原理是把当前的设备分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html文字大小就可以了。
比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以了。
里面页面元素的rem值：页面元素的px值/75
剩余的，让flexible.js计算
下载地址 https://github.com/amfe/lib-flexible
vscode px自动转换为rem和rpx
设置-> 搜索css root获取选项 cssrem:root font size选项，设置基准字体大小（需要在冒号后面留着空格才能说出）
发布到码云
创建仓库后提示
我们强烈建议所有的git仓库都有一个README, LICENSE, .gitignore文件
Git 全局设置:
git config –global user.name “WangShouwei”
git config –global user.email “412198579@qq.com”
创建 git 仓库:
mkdir heimamm
cd heimamm
git init
touch README.md
git add README.md
git commit -m “first commit”
git remote add origin https://gitee.com/WangShouwei/heimamm.git
git push -u origin master
已有仓库?
cd existing_git_repo
git remote add origin https://gitee.com/WangShouwei/heimamm.git
git push -u origin master
实操同步到线上流程
git init
Administrator@WIN-I70ME5UDN05 MINGW64 /d/phpstudy_pro/WWW/pink-qianduan/heimamm (master)
$ git init
Initialized empty Git repository in D:/phpstudy_pro/WWW/pink-qianduan/heimamm/.git/
cd heimamm
git init
添加 .gitignore 文件
git commit -m “first commit”
git remote add origin https://gitee.com/WangShouwei/heimamm.git
git push -u origin master
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备划分 尺寸区间
超小屏幕（手机） < 768px
小平设备 (平板) >= 768px ~ < 992px
中等屏幕（桌面显示器） >= 992px ~ <1200px
宽屏设备（大桌面显示器） >= 1200px
响应式布局容器
响应式需要一个父级作为布局容器，来配合子元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现再不同屏幕下，看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分
超小屏幕（手机，小于768px）：设置宽度为 100%
小屏幕（平板，大于等于768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ height: 200px; margin: 0 auto; background-color: pink; } @media screen and (max-width: 768px) { .container{ width: 100%; } } @media screen and (min-width: 768px) { .container{ width: 750px; } } @media screen and (min-width: 992px) { .container{ width: 970px; } } @media screen and (min-width: 1200px) { .container{ width: 1170px; } } </style> </head> <body> <div class="container"> </div> </body> </html> |
bootstrap布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个累，叫.container,它提供了两个作此用处的类。
1.container类
响应式布局容器 固定宽度
超小屏幕（手机，小于768px）：设置宽度为 100%
小屏幕（平板，大于等于768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px
2.container-fluid类
流失布局容器 百分百宽度
占据全部视口（viewport）的容器
适合于单独做移动端开发
bootstrap栅格系统
栅格系统英文为”grid systems”，也有人翻译为”网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或者视口尺寸的增加，系统会自动分为最多12例。bootstrap里面container的宽度是固定的，但是在不同屏幕下，container的宽度不同，我们再把container划分为12等份。
栅格选项参数
栅格系统用于通过一系列的行与列的组合来创建页面布局，你的内容可以放入这些创建好的布局中。
按照不同屏幕划分为1~12等份
行(row)可以去除父容器作用15px的边距
xs=extra small:超小；sm-small：小；md-medium：中等；lg-large：大
列（column）大于12，多余的列（column）所在的元素将被作为一个整体另起一行排列
每一列默认有15像素的padding
可以同时为一列指定多个设备的类名，以便划分不同的份数，例如class=”col-md-4 col-sm-6″
列嵌套
<div class="container"> <div class="row"> <div class="col-md-6"> <!--我们嵌套最好加一行row 这样可以取消父元素的padding值 而且高度自动和父级一样高--> <div class="row"> <div class="col-md-6">1</div> <div class="col-md-6">1</div> </div> </div> <div class="col-md-6">1</div> </div> </div> |
列偏移
使用.col-md-offset-*类可以将列向右侧偏移，这些类实际通过使用*选择器为当前元素增加左侧的边距（margin）
<div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3 col-md-offset-6"></div> </div> </div> |
列排序
通过使用.col-md-push-*（向右侧推）和.col-md-pull-*（向左侧拉）就可以很容易的改变列（column）的顺序
<div class="row">
<div class="col-md-3 col-md-push-9">左侧（向右侧推）</div>
<div class="col-md-9 col-md-pull-3">右侧（向左侧拉）</div>
</div> |
bootstrap响应式工具
css小技巧
限制在一个块元素显示的文本的行数
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; |