将我在学习中学习到的点做一个总结，可能对刚学习的小伙伴有帮助。
一、页面全屏（没有滚动条）
1.vh
width: 100%;
height: 100vh;2.overflow
width: 100%;
background: #009688;
overflow: hidden;二、居中
1.单行文本居中
比如想让标签内部文字水平垂直都居中
margin:0 auto;(水平)height:20px;(垂直)
line-height:20px;2.table垂直居中
父级
display: table;子级
display: table-cell;
vertical-align: middle;3.position='absolute'居中（法1）
<style>
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body><style>
#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>5.浮动定位
<div id="floater">
<div id="content">Content here</div>
</div>
#floater {
float: left;
height: 50%;
margin-bottom: -120px;
}
#content {
clear: both;
height: 240px;
position: relative;
}6.transform
position: absolute;top: 50%;transform: translate(x,y);
三、字体设置font
有6个参数依次设置
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
例：
p.ex2
{
font:italic bold 12px/20px arial,sans-serif;
}四、页面结构
1.在写页面的结构时，最外层的width和height都应该为100%，其中height应该由内部的height撑开
在一行中的好几个模块
*切记不要写死
2.盒子模型
这样写的话 各种分辨率下的图片都是居中的将margin写成具体数字（必须有宽高）
还有一种方法
position:absolute;top:50%;left: 50%;margin-top: -25%;margin-left: -25%;
也可以实现居中
3.
针对上述结构，在用<ul><li></li></ul>时，将<li>设为块级元素，当每排宽度不够时，自然就会往下排；而不用将<li>当作
行级元素再设置。
而不是
这样太麻烦！！！
五、阴影box-shadow
xpx 0px 偏移量px 颜色, ---右边
-xpx 0px 偏移量px 颜色, ---左边
0px ypx 偏移量px 颜色, ---下边
0px -ypx 偏移量px 颜色, ---上边
0px 0px 偏移量px 颜色, ---四边都有
六、一些默认的规则
1.一般提示信息写在下方（例如：登录框的提示信息）
在页面结构中可以先写好
2.能够用css写的就不要用js写，确实写不出的再用js
3.图中有列表样式的东西，一般都是用<ul><li></li></ul>,而不是用<table>
七、z-index层级关系
当页面中有许多不是按照顺序的元素时，可以用到z-index的层级关系
但是z-index只能在position:absolute;情况中使用
八、lang代表什么
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>en-uk:英文
zh-tw：台湾
zh-hk：香港
fr-fr:法文
zh-CN 内地对于网页翻译或屏幕阅读浏览器有指导意义.
九、分辨率
十、float、display、text-align、margin
text-align和float
<style>
.div1{width: 300px;height: 300px;background: #009688;text-align: center;margin: 0 auto;}
.div1 span{background:#843534;float:right;}
</style>
<body>
<div class="div1">
<span>你好</span>
</div>
</body>
父层将内部元素置为居中，子级元素使其右浮动，此时只能实现向右，不能居中（一般不这样写，假如遇到）
margin和text-align
margin:0 auto;设置本身水平居中
text-align:设置内部元素居中
display和float
两者同时不能使用
想实现文字在右边 并且垂直居中，这样写是不可以的
<style>
.div1{width: 300px;height: 300px;background: #009688;margin: 0 auto;display: table;}
.div1 span{background:#843534;float:right;display: table-cell;vertical-align: middle;}
</style>
<body>
<div class="div1">
<span>你好</span>
</div>
</body>
将以上修改成以下
<style>
.div1{width: 300px;height: 300px;background: #009688;margin: 0 auto;display: table;text-align: right;}
.div1 span{background:#843534;display: table-cell;vertical-align: middle;}
</style>
<body>
<div class="div1">
<span>你好</span>
</div>
</body>
十一、块级元素和行内元素
重新认识块级和行内元素
注意以下标红的行，在写的时候尽可能不要重复写代码，比如知道是块级元素，想让其独占一行，就不需要写宽度
一、块级元素：block element
每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；
块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级，也可以包含行级元素。
DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
二、行内元素：inline element
也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。
三、block（块）元素的特点
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
四、inline元素的特点
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
五、常见的块状元素
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
六、常见的内联元素
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
七、行内元素与块级元素有什么不同？
区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四：
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素十三、背景大小
不设置的话，图片要是放大的话 会有空白
需要加上背景大小 有两种方法
background：url(images/bg.jpg) no-repeat center center / 100% 100%；(不推荐使用，IE低版本可能会有兼容性问题，
不要忘记写空格)
background-size:100% 100%;(最好这样写)
十四、clear清除浮动
元素浮动会使得父级元素高度为0.
为了使父级撑开（有高度），就需要清除浮动，
有两种方式：
一、在父级上加overflow:hidden;(不推荐)
二、在上/下加
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。意思是浮动元素本身不清除，清除的是上/下元素。
想象一下，浮动元素是浮起来脱离文档的，父级为了给他撑出位置让他看起来像是有高度，所以清除的是没有浮动起来的元素。
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clearfix"></div>
</div>
// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
.clearfix{
*zoom: 1;
}
// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
} 我用
.clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; }
.clearfix { zoom: 1; }十五、文档流
当设置float和绝对定位时，元素会脱离文档流，此时设置父级高度100%时，是撑不起高度的。
需要注意的是，相对定位不会脱离文档流
十六、滚动条
设置最小宽度，小于宽度出现滚动条
min-width:500px;
overflow:auto;不要忘加overflow
十七、截取行数
多行截取
<div class="fixedWidth">
你好你好你好大家好大家好大家好你好你好你好大家好大家好大家好你好你好你好大家好大家好大家好你好你好你好大家好大家好大家好你好你好你好大家好大家好大家好
你好你好你好大家好大家好大家好你好你好你好大家好大家好大家好你好你好你好大家好大家好大家好你好你好你好大家好大家好大家好
</div>.fixedWidth{
width: 500px;
margin: 0 auto;
padding-top: 50px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}效果
但是现webkit内核的浏览器支持display: -webkit-box;属性，但有些浏览器不兼容
单行截取
1、用以上方法，只是将-webkit-line-clamp: 1;写成1 兼容性不好
2、js字符截取
if(nowlength>字符数){
cname[i].innerHTML=nowhtml.substr(0,字符数)+'...'; //截取元素的文本的长度并加上省略号
}3、
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;十八、选取除自身以外
js思路：
循环展示除自身以外 可以用！直接可以解决 不需要分开再判断
for (var i = 0; i <List.length; i++) {
if(List[i].news_id!=news_id){
Index += "<li>"+List[i].news_title+"</li>";
}
}不需要这样
if(List[i].news_id=news_id){
Index += "<li>"+List[i].news_title+"</li>";
}else{
...
}选择器选除自身：
$(function(){
$(".a").click(function(){
//这个dd就是除点击对象外，所有的a类的div了。
var dd = $(".a").not($(this));
});
});还有一种（这个方法的意思是选择同级其他元素）
$(obj).addClass("active").siblings().removeClass("active");
十九、选择器
(1)、选择器input:hidden和input[type=hidden]的区别
:hidden匹配所有不可见元素，或者type为hidden的元素，所有样式display等于none的元素和子元素以及type="hidden"的表单元素都在查找的结果中，而[type=hidden]则只查找type属性为hidden的元素。二十、
*****************************未更完 · 随时补充********************************
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
