腊月的季节

web前端查漏补缺(一)

发表于 | 分类于 | | 阅读次数

栅格系统自适应

xs <768px 额外的小设备="" sm="" 768~991px="" 小型设备="" md="" 992~1170px="" 中型设备="" lg="">1170px 大型设备
手机端屏幕小于768px

CSS sprites

允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
利用CSS的”background-image”,”background-repeat”,”background-position”的组合进行背景定位
CSS Sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

CSS的flexbox布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
HTML
<h1>不等宽不等高（定宽） </h1>
<div class="box box1">
    <div class="flex-box" style="width:100px;height:100px;">1</div>
    <div class="flex-box" style="width:250px;height:250px;">3</div>
    <div class="flex-box" style="width:200px;height:200px;">2</div>
    <div class="flex-box" style="width:350px;height:350px;">5</div>
    <div class="flex-box" style="width:400px;height:400px;">4</div>
    <div class="flex-box" style="width:500px;height:500px;">7</div>
    <div class="flex-box" style="width:450px;height:450px;">6</div>
</div>
<h1>不 等宽 等高（ 定宽+变宽）</h1>
<div class="box box2">
    <div class="left flex-box">left</div>
    <div class="center flex-box">center</div>
    <div class="right flex-box">right</div>
</div>
<h1>等宽 等高（变宽） </h1>
<div class="box box3">
    <div class="flex-box">1</div>
    <div class="flex-box">2</div>
    <div class="flex-box">3</div>
</div>
<h1>等宽不等高 （定宽） </h1>
<div class="box box4">
    <div class="flex-box" style="height:100px;">1</div>
    <div class="flex-box" style="height:250px;">2</div>
    <div class="flex-box" style="height:400px;">3</div>
    <div class="flex-box" style="height:350px;">4</div>
    <div class="flex-box" style="height:300px;">5</div>
    <div class="flex-box" style="height:500px;">6</div>
    <div class="flex-box" style="height:450px;">7</div>
</div>

CSS
.box {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
}
.flex-box{
    height:200px;
    width:500px;
    background-color:#ddd;
    border:1px solid #fff;
}
.box1 .flex-box{
    background-color:#E0BCDB;
}
.box2 .flex-box{
    background-color:#E0B6B6;
    width:800px; 
}
.left{
    flex-shrink:0;//空间不足时不允许左侧缩小
}
.box3 .flex-box{
    background-color:#ABD9E0;
     width:900px;
}
.box4{
    flex-wrap: wrap;//空间不足换行
}
.box4 .flex-box{
    background-color:#dadada;
}

图片加载中

DHTML的动态样式

使网页作者改变内容的外部特征而不强制用户再次下载全部内容
DHTML 将HTML、JavaScript、DOM以及CSS组合在一起，用户创造动态性更强的网页。

margin-top,padding-top的值是百分比如何计算

相对最近父级块级元素的width，相对最近父级块级元素的width
可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）
如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。
为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？
CSS权威指南中的解释：
我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如果循环。

HTML5标准的标签

1
2
3
section
audio
video

兼容性

1
display:inline

IE7不兼容

CSS3中要使元素由一种样式转换成另一种样式

使用效果属性transition

选择器优先级

ID选择器>Class选择器=伪类>标签选择器

bootstrap table应用

.table 为任意table添加基本样式
.table-striped 在tbody内添加斑马线形式的条纹(IE8不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在tbody内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
.from-control
.input-group-[lg|sm|xs]
.input-group-addon

CSS3新增属性

1
2
3
4
box-shadow
text-shadow
border-radius
rgba

iframe使用场景

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。
4： 在上传图片时，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

置换元素

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：浏览器会根据img标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；input标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的img、input、textarea、select、object 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。
置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
b) 不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。
例如： labellabel中的内容/label 标签label是一个非置换元素，文字label中的内容”将全被显示。

基本

em强调
表单提交时出发的事件:onsubmit事件而submit是属性值。
HTML5不再支持$lt;font$gt;标签.
mark高亮显示文本
标题标签从h1-h6
页面添加样式的方法:内联式、嵌入式、外部引用式。
导入样式是针对css文件与css文件之间,@import url(“css/style.css”)
html5新增的表单样式:
datalist output keygen
border:none 表示边框样式无
border:0 表示边框宽度为0

热评文章