CSS样式表
- 内部样式表，在head里面，语法为：
<style type = "text/css"> </style> - 内联样式表，在标签中，用style属性调整标签样式
- 外部样式表，在head里面插入
<link rel="stylesheet" type="text/css" href="目标文件"/>
优先级：内联样式表>内部样式表=外部样式表，内部样式表的优先级和外部样式表书写的顺序有关，后书写的优先级别高
浮动相关
float:left | right ｜ none
浮动元素会脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠，可以做到文字环绕的效果，也可以做到横向排列。
在横向排列的时候，为了下一行元素不受到浮动元素造成的影响，可以采取以下几种方案
- 将浮动元素嵌套一层父元素，并且设置父元素的高度和浮动元素的高度一致。由于浮动元素不占据空间，如果父元素不设置高度，那么无法达到目的
- 对父元素添加一个overflow:auto ｜ overflow:hidden的属性
- 对不希望受到浮动的元素而言，可以使用clear属性，clear属性可以取left、right和both三个值，分别代表该元素不受左浮动、右浮动和既不受左浮动又不受右浮动的影响。
- 一个小技巧：使用以下代码，可以避免之后的所有元素受到浮动的影响
<div clear = "both";height:0;overflow:hidden(或者font-size:0)></div>
盒子模型
margin:边距，是边框之外的距离
padding:填充，是边框之内的距离，padding会增加元素的大小
border-width:边框宽度
border-color:边框颜色
border-style:solid(实线) | dashed(虚线) | dotted(点划线) | double(双线)
hint
- body标签默认与浏览器边缘是有空隙的，需要用margin属性来取消空隙
- 浮动元素的位置排列，只参考前面一个元素的位置即可
- 浮动元素不会覆盖图片和文字内容
- 浮动元素不会覆盖表单元素
- 相邻的兄弟元素在垂直方向上的margin值会出现融合的状况，融合后会取两个元素离较大的值作为融合后的值
- 当父级子级元素都设置了margin时，子级的margin值会传到父级。margin传递解决的方法:给父级使用overflow:hidden属性
文字相关
普通字体
font-size:设定字体大小
color:设置文字颜色
text-decoration:文本修饰，设置为none的时候可以取消超链接的下划线,设置为underline的时候可以加下划线
line-height:行高，当行高等于容器高度的时候，文字则垂直居中
font-family:设置字体样式
font-weight:bold 文字加粗
font-sytle:italic 文字倾斜
font-indent:xx px首行缩进xx px
服务器端字体
语法如下：
@font-face{
font-family:WebFont;##这是一个自己随便取的名字
src:url("fonts/Fontin_Sans_B_45b.otf")format("opentype");##url随情况变动
}
div{font-family:WebFont;}
WebFont用来声明使用服务端的字体
format用来声明字体文件的格式，可以省略文件格式的声明而单独使用src属性值
字体文件的格式有OpenType和TrueType，前者的属性值为opentype，后者的属性值为truetype；前者的文件扩展名为.otf，后者的文件扩展名为.ttf
iconfont（图标字体）
可以从例如阿里的矢量图标库等从网上下载iconfont
使用< link rel=“stylesheet” type=“text/css” href=“url”/>将下载下来的文件引入，并且使用 xxx< /i>的方式进行调用
边框相关
border：solid | dashed | dotted
padding:内边距，可以改变边框的尺寸
border-radius:左上角 右上角 右下角 左下角
border-radius:左上角右下角 右上角左下角
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
border-image:url(xxx) A B C D/border-image-width border-image-repeat(repeat,round,stretch)
说明
- 第一个参数作为边框使用图像的路径，A B C D表示当浏览器自动把边框所使用到的图像进行分隔时的上边距，右边距，下边距，左边距，四个边距相同时可以缩写成一个。border-width表示边框的宽度。border-image-repeat表示图像边框是否应该平铺、铺满或者拉伸
图片相关
background-image:url(....)##设置背景图片
background-repeat:no-repeat##背景图片不重复
background-position：x,y ##x代表图片在水平方向上的对齐方式，y代表图片在垂直方向上的对齐方式
vertical-align：baseline|sub|super|top|text-top|middle|bottom|text-bottom|length|%|inherit
列表相关
1.list-style-type:disc(实心圆) | circle(空心圆) | square(实心方块)##定义列表符号样式
2.list-style-image:url(图片路径) ## 使用图片作为列表符号
3.list-style-position:outside(外边)|inside(里边) ##定义列表符号的位置
4.list-style:none ##去掉列表样式
注意
使用背景图+padding的方式插入列表前标号的方式更好
背景相关
1.background-color ##背景颜色
2.background-image ##背景图片
3.background-repeat:repeat | no-repeat | repeat-x | repeat-y ##是否重复背景图
4.background-position:值1 值2; ##值可以取left/right/center或者数值
5.background-clip:border-box | padding-box | content-box
6.background-origin:border-box | padding-box | content-box
7.background-size:length | percentage | cover | contain
8.div{background-image:url(xx),url(xx),url(xx);background-repeat:repeat-x,repeat-y,no-repeat;background-position:3% 98%,center,center,right top; }
说明
- background-clip:第一个属性值表示背景被裁剪到边框盒,第二个属性表示背景被裁剪到内边距框，第三个表示背景被裁剪到内容框
- background-size:length设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，第二个值会被设置为auto；percentage表示以父元素的百分比来设置背景图像的宽度和高度；cover表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中，cover将让图片按照容器的最长边进行等比例缩放；contain表示把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，contain将让图片按照容器最短边等比例缩放。
- 最后一个表明在一个元素中可以添加多张背景图片，第一个url的图片在最上面。在多张背景图片中可以使用的属性有：
(1)background-image
(2)background-repeat
(3)background-position
(4)background-clip
(5)background-origin
(6)background-size
文本溢出相关
overflow:visible | hidden | scroll | auto | inherit
说明
- visible:默认值，内容不会被修剪，会出现在元素框之外
- hidden:内容会被修剪，并且其余内容不可见
- scroll:内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容
- auto:如果内容被修剪，则浏览器会显示滚动条，以便查看其他内容
- inherit:规定应该从父元素继承overflow属性的值
white-space:normal|pre|nowrap|pre-wrap|pre-line|inherit
说明
- normal:默认，空白会被浏览器忽略
- pre:空白会被浏览器保留
- nowrap:文本不会换行，文本会在同一行继续，直到遇到br标签
- pre-wrap:保留空白符序列，但是正常的进行换行
- pre-line:合并空白符序列，但是保留换行符
- inherit:规定应该从父元素继承white-space属性的值
text-overflow:clip|ellipsis
说明
- clip:不显示省略号，而是简单的裁剪
- ellipsis:当对象内文本溢出时，显示省略标记
- 要实现文本溢出时产生省略号的效果还需要定义：
- 容器宽度：width:value
- 强制文本在一行内显示:white-space:nowrap
- 溢出内容为隐藏:overflow:hidden
- 溢出文本显示省略号:text-overflow:ellipsis
元素定位
position:static|absolute|relative|fixed
text-align:center;内部元素水平居中
margin：auto;让该元素本身水平居中
说明：
static:默认值，没有定位，元素出现在正常的流中
absolute：生成绝对定位，相对于static定位以外的第一份父元素进行定位。元素的位置通过“left"，“top"，“right"以及"bottom"属性进行规定，会脱离正常文档流
relative:生成相对定位的元素，相对于其正常位置进行定位，不会脱离正常文档流
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left"，“top“，“right"和"bottom"属性进行规定，会脱离文档流。
z-index:auto|number
说明
auto:默认值，遵从其父对象
number:无单位的整数值，可以为负数，较大的number值的对象会覆盖在较小number值对象之上。如两个绝对定位对象的此属性具有同样的number值，那么将根据它们在HTML文档中声明的顺序层叠。
z-index属性仅仅用于position属性值为relative或者absolute的对象
锚点链接
<标记 id="锚点名字"></标记>##需要被跳转的地方
<a href="#锚点名字"></a>
说明 使用锚点和overflow配合可以达到图片切换的效果
自适应
min-height:最小高度
max-height:最大高度
min-width:最小宽度
max-width:最大宽度
说明
- 块元素默认情况下是自适应的
浏览器兼容
IE6常见CSS解析bug说明
- IE6及更低版本浏览器解析浮动元素的时候，会错误地把浮动元素的边界加倍显示，可以通过加_display:inline的方式解决
- 在IE6及以下版本中，部分块元素拥有默认高度（低于18px），可以给元素添加font-size:0或者overflow:hidden方式解决
- 在div中插入图片的时候，图片会将div下方撑大三个像素，可以将img的display改写为block来进行解决。
- 表单元素的行高对齐方式不一致，可以通过给表单元素添加float:left进行解决
- 按钮元素默认大小不一致，可以用a标记模拟按钮、在input上写按钮的样式（此时要把input边框去掉）进行解决。如果这个按钮是一个图片，也可以直接把图片作为按钮的背景图即可。
- 在IE6即以下版本解析百分比的时候，会按四舍五入的方式计算从而导致50%+50%大于100%的情况，可以通过在第二个元素中加float:right的方式解决
- cursor属性的hand属性值只有IE浏览器识别，其他浏览器不识别，cursor属性的pointer属性在IE6以上版本及其他内核浏览器都识别该声明
过滤器
- 下划线属性过滤器：当在一个属性前面加了一个下划线之后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是IE6及更低版本浏览器会继续解析这个规则
- !import关键字过滤器，它表示附加的声明具有最高优先级的意思。但是由于IE6及更低版本不能识别它，所以可以利用IE6这个Bug作为过滤器来兼容IE6和其他标准浏览器。其语法为属性：属性值!important
- 当在一个属性前面加了*之后，该属性只能被IE7识别，其他浏览器忽略该属性的作用，其语法为 *属性：属性值
盒阴影
box-shadow:h-shadow v-shadow blur spread color inset
说明
h-shadow:表示阴影的水平偏移（必须）
v-shodow:表示阴影的垂直偏移（必须）
blur:表示模糊距离（可选）
spread:表示阴影的尺寸（可选）
color:表示阴影的颜色（可选）
inset:将外部阴影改为内部阴影（可选）
2D效果
transition:transition-property transition-duration tansition-timing-function transition-delay
说明
- transition-property代表需要过渡的属性名称
- transition-duration:time代表过渡效果花费的时间
- transition-timing-function代表过渡效果的时间曲线，可以取值为linear(匀速)，ease(从慢到快），ease-in（以慢速开始），ease-out（以慢速结束），ease-in-out（以慢速开始和结束），cubic-bezier(n,n,n,n)（使用cubic-bezier函数）默认是"ease"
- transition-delay代表过渡效果从什么时候开始，默认是0
transform:rotate(旋转)|skew(扭曲)|scale(缩放)|translate(移动)|matrix(矩阵变形)
说明
- transform的变化都是相对于中心点而言的
transform-origin:x-axis y-axis;
说明
默认点是元素的中心点。
其中X和Y的值可以是百分值，em，px，其中X也可以是字符参数值left，center，right；Y和X一样除了百分值外还可以设置字符值top，center，bottom。
3D效果
transform:transform-style|transform-origin|perspective|perspective-origin|backface-visibility
说明
- transform-origin:x-axis y-axis z-axis
- transform-style:preserve-3d
- perspective表示视角，取值为none或者不设置的时候，就没有真的3D空间，perspective的取值越小，3D效果就越明显。但是当perspective的值为无穷大或者零的时候，效果和取none是一样的。
- perspective-origin代表设置视角的坐标位置
- backface-visibility:表示元素不面向屏幕的时候是否可见，可以取值为visible和hidden。
@keyframes animationname{
keyframes-selector{css-styles;}
}
说明
animationname表示动画名称，可以自己定义
keyframes-selector:用来划分动画的时长，可以使用百分比的形式，也可以使用from和to的形式
@keyframes规则和所有动画属性如下：
animation 所有动画属性的简写属性
animation-name:规定@keyframes动画的名称
animation-duration:完成一个周期的动画所花费的秒或者毫秒
animation-timing-function：规定3D元素的速度曲线，可以取值为linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)
animation-delay:规定动画何时开始
animation-iteration-count：规定动画被播放的次数，可以使用数值或者infinite
animateion-direction:定义是否应该轮流反向播放动画，取值为normal代表不反向播放动画，取值为alternate代表反向播放动画。
弹性盒
弹性盒子是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成，一个弹性容器包含一个或者多个弹性子元素。
弹性盒子模型如下：
说明
主轴(main axis)：是伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局，主轴默认是水平的，但可以通过属性更改。
主轴起点和终点：伸缩项目从主轴起点向主轴终点方向放置在伸缩容器内。
主轴的尺寸：伸缩项目在主轴方向的宽度或者高度就是主轴的尺寸。
侧轴与主轴垂直。
弹性盒相关属性
1.父元素属性
display:flex|inline-flex
flex:表示将对象作为弹性伸缩盒显示
inline-flex:表示将对象作为内联块级弹性伸缩盒显示
flex-direction:row|row-reverse|column|column-reverse
flex-direction属性表示设置弹性盒主轴的起点和终点的位置，子元素仍然按照从主轴起点向终点方向排列。
row:默认位置，主轴横向，起点在左侧，终点在右侧
row-reverse:主轴横向反转，起点在右侧，终点在左侧。
column:主轴纵向，起点在上方，终点在下方。
column-reverse:主轴纵向反转，起点在下方，终点在上方
该属性的默认值为row
flex-wrap:nowrap|wrap|wrap-reverse
nowrap表示当子元素溢出父容器的时候不换行
wrap表示当子元素溢出父容器的时候向下方换行
wrap-reverse表示当子元素溢出的时候向上方换行
该属性的默认值为nowrap
justify-content:flex-start|flex-end|center|space-between|space-around
flex-start表示弹性盒子元素向行起始位置对齐
flex-end表示弹性盒子向行结束位置对齐
center:表示弹性盒子向行中间位置对齐
space-between：表示弹性盒子元素会平均的分布在行里，并且第一个元素会在行的起始位置，最后一个元素会在行的末尾
space-around：表示弹性盒子元素会平均的分布在行里，但是两端会保留子元素和子元素之间间距大小的一半
该属性的默认值为flex-start
align-items:flex-start|flex-end|center|baseline|stretch
该属性表示弹性盒子元素在侧轴方向上的对齐方式
flex-start表示弹性盒子的侧轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end表示弹性盒子的侧轴起始位置的边界紧靠住该行的侧轴结束边界。
center表示弹性盒子元素在该行的侧轴上居中放置
baseline表示将文字对齐
stretch表示如果没有设置子元素宽高，那么将元素默认拉伸为父元素的宽度
该属性默认值为stretch
align-content:flex-start|flex-end|center|space-between|space-around|stretch
适用于有多行元素的时候，确定各行的排列方式
flex-start：各行向弹性盒子容器的起始位置堆叠
flex-end：各行向弹性盒子容器的结束位置堆叠
center：各行向弹性盒子容器的中间位置堆叠
space-between：类似justify-content元素的space-between
space-around：类似justify-content元素的space-around
stretch:各行将会延伸以占用剩余的空间，首行在第一行，后面的margin平分
2.子元素的属性
flex-grow:<number>(default 0)
该属性设置或者检索弹性盒的扩展比率，根据弹性盒子元素所设置的扩展因子作为比率分配剩余空间，number用于设置扩展比率。
flex-shrink:<number>(default 1)
该属性设置或检索弹性盒子的收缩比率（根据弹性盒子所设置的收缩因子作为比率来收缩空间）
flex-basis:<length>|auto ](default auto)
auto:无特定宽度值，取决于其他属性值
< length>:用长度值来定义宽度。不允许负值
< percentage>:用百分比来定义宽度，不允许负值
order:<integer>
设置或检索弹性盒模型对象的子元素出现的顺序，integer值小的在前面，可以为负值
align-self:auto|flex-start|flex-end|center|baseline|stretch
该属性表示设置弹性元素自身在侧轴方向的对齐方式
auto：表示其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start:弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界
flex-end:弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界
center:弹性盒子元素在该行的侧轴上居中放置
baseline:如果弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其他情况下，该值将参与基线对齐。
stretch:如果指定侧轴大小的属性为’auto’，则其值会使项目的边距盒尺寸尽可能的接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
媒体查询
媒体查询可以让我们根据设备显示器的特性为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成
1.@media mediatype and|not|only (media feature){
CSS-Code
}
2.<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">
rem布局
在html中，常用的计量单位如下：
- px，以像素为单位
- em，1em等于该元素的父元素的font-size的大小
- rem，rem和em类似，只不过它的参考物不是其父元素的字体大小，而是html页面的字体大小
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
