Web 前端开发基础知识

Question

盒模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

元素实际占用尺寸= width(height) + padding + border + margin

选择器

CSS1 定义的选择器

元素选择器：E
ID选择器：#id
类选择器：E.class
包含选择器：E F (中间有一个空格)
伪元素：E:first-link、E:first-letter
伪类选择器：E:link、E:visited、E:active、E:hover、E:focus

CSS2.1 增加的选择器

通配选择器：* (星号)
伪类选择器：E:lang(fr)
子包含选择器：E > F
相邻兄弟选择器：E + F
伪元素：E:before、E:after
属性选择器：E[foo]、E[foo=”bar”]、E[foo~=”bar”]、E[foo|=”bar”]
结构伪类选择器；E:first-child

优先级

名称	代码示例	权重
元素内联样式属性	style=""	1,0,0,0
ID选择器	#id	0,1,0,0
class选择器 属性选择器 伪类	.class[type=”text”]:hover	0,0,1,0
元素 伪元素	h1:first-child	0,0,0,1
其他选择器	*(通用选择器)、>(子包含选择器)	0,0,0,0
!important	color:#f00 !important;	最高

.list li 的优先级更高，所以浏览器会显示.list li 设置的样式

布局

浮动(float)

none	不浮动（默认值）
left	左浮动
right	右浮动

清浮动- clear:both

.layout{}
.left{float:left}
.right{float:right}
.clear{clear:both}

<div class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear"></div>
</div>

清浮动- overflow:hidden

.layout{overflow:hidden; zoom:1}
.left{float:left}
.right{float:right}

<div class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

清浮动- :after

.clearfix{zoom:1}
.clearfix:after{content:" ";visibility:hidden;display:block;clear:both;height:0;font-size:0;}
.layout{}
.left{float:left}
.right{float:right}

<div class="layout clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

定位(position)

static	没有定位（默认值）
relative	相对定位
absolute	绝对定位
fixed	固定定位

定位(position) – static

定位(position) – relative

定位(position) – absolute

若父元素没有设置定位（除static 外），则继续向上寻找

定位(position) – fixed

层级(z-index)

只有定位元素才能使用z-index

层级(z-index) – 后来居上

层级(z-index) – 定位元素高于非定位元素

层级(z-index) – 同为定位元素则比较z-index

隐藏及显示(display与visibility)

隐藏元素	display:block;	visibility:visible;
显示元素	display:none;	visibility:hidden;

※“display” 在块级元素&行内元素中再详细介绍

display:none 与visibility:hidden 的区别

CSS Reset

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,table,th,td,fieldset,
form,input,button,textarea,hr,blockquote,pre{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:bold;line-height:1em;}
ul,ol,dl{list-style-type:none;}
fieldset,img{border:none;}
table{border-collapse:collapse;table-layout:fixed;empty-cells:show;}
address,caption,cite,code,dfn,th{font-style:normal;font-weight:normal;}
ins{text-decoration:underline;}
del{text-decoration:line-through;}
q:before,q:after{content:"";}

注意事项

• 不要使用 *{margin:0;padding:0;}
• 最2B的Reset： div{float:left;}

CSS 优化

属性简写

属性简写- 外边距

还可以再简写

属性简写- 背景

可以省略的属性值

background:#f00;
background:url(bg.jpg) no-repeat;

属性简写- 边框

可以省略部分值

border:solid #f00;
border:1px solid;

属性简写- 字体

字号与字体名称是必须的，其他值可省略

font:15px "微软雅黑";

注意事项：简写中省略不写的属性，将使用默认值，而不是继承。

其他能简写的属性：outline, list-style

属性继承

• 文本相关的样式会继承
• 列表相关的样式会继承
• 颜色属性会继承

从右到左的解析顺序

选择器优化

选择器的效率

名称	代码示例	权重
元素内联样式属性	style=” “	最快
ID选择器	#id	很快
class选择器 属性选择器 伪类	.class[type=”text”]:hover	快
元素 伪元素	h1:first-child	慢
其他选择器	*(通用选择器)、>(子包含选择器)	很慢

※在一些JavaScript 库中的选择器，也适用于该效率。（例如：jQuery）

属性继承，减少选择器

.box { padding:10px; }
.box p { color:#333; }

简化为：

.box { padding:10px ; color:#333; }

简化选择器

ul.list li a { border:1px solid #ccc; }

简化为：

.list a { border:1px solid #ccc; }

书写顺序

显示属性	自身属性	文本属性
display visibility overflow position float clear	top left width height margin padding border outline background	color font line-height text-align text-decoration text-indent text-transform vertical-align white-space content

代码风格

多留空白

.class{
    padding:10px;
    color:#333
}
.class a:link,
.class a:visited{
    color:#f00
}

简单横向

.class{padding:10px;color:#333}
.class a:link,
.class a:visited{color:#f00}

标签&语义

块元素&行内元素

块元素(block)
div p h1~h6 ul ol li dl dt dd table form …

行内元素(inline)
span a img em strong select input textarea …

行内元素无法设置一些CSS属性，例如：
width, height, margin-top, margin-bottom,padding-top padding-bottom, text-index …

※可以使用display 来改变

display 常用属性

inline	设置为行内元素
block	设置为块元素
inline-block	设置为行内块元素*
none	元素不会被显示

嵌套规则
块元素内能包含所有行内元素
行内元素不能包含块元素

以下块元素中不能包含块元素
h1~h6, p, dt, address

HTML5 简单应用

DocType

<!DOCTYPE HTML>

字符集

<meta charset="utf-8">

外链css 文件

<link rel="stylesheet" href=“filename.css">

外链javascript 文件

<script src=“filename.js"></script>

图片优化

jpg / gif / png 的选择

JPG适合：LOGO、图标、按钮、透明、动画…
PNG适合：人像、风景、实物图、卡通图片、3D效果图…
GIF适合：LOGO、图标、按钮、透明、半透明…

	GIF	PNG-8	PNG-24
动画	yes	no	no
透明	yes	yes	yes
半透明	no	no	yes

透明图片选用PNG-8 替代GIF

PNG-8 与PNG-24 文件的后缀名都是.png，后期需要图片支持半透明，只需修改图片，不用修改CSS。

保存为Web 格式