2018.07.13学习总结

1.如果将box-sizing设置为borer-box会发生什么？

答：将box-sizing设置为borer-box，设置边框和填充，盒子的宽度不变。

border-box.PNG

2.float

float的原理就是相对于整个页面浮动起来

FLOAT.PNG float 父元素.PNG 多页面float.PNG

3.练习4个框

4个框.PNG

4.导航条

导航条 nav.PNG

5.命名规范

1.布局相关

语义	命名	简写
盒容器	wrap	wrap
盒子	box	box
容器	container	container
主栏	main	main
侧栏	sidebar / aside	sidebar / aside
文档	doc	doc
头部	head	hd
主体	body	bd
底部	foot	ft

2.模块相关

语义	命名	简写
导航	navigation	nav
面包屑	crumb	crumb
菜单	menu	menu
选项卡	tab	tab
标题	title	title
内容	content	content
列表	list	list
表格	table	table
排行榜	rank	rank
登陆	login	login
表单	form	form
品牌标识	logo	logo
广告	advertise	ad
搜索	search	search
切换	slide	slide
提示	tips	tips
版权	copyright	copyright
按钮	button	btn
输入	input	ipt
结果	result	result
下载	download	dowload
新闻	news	news
注册	register	reg
热点	hot	hot
展开	collapse	collapse
警告	alert	alert
提示	tooltip	tooltip
下拉	dropdown	dropdown

3.状态相关

语义	命名	简写
语义	命名	简写
选中	selected	selected
当前	current	current
激活	active	active
显示	show	show
隐藏	hidden	hide
打开	open	open
关闭	close	close
出错	error	err
禁用	disabled	disabled
扩展	extend	extend

4.命名规则

4.1驼峰命名

<p class="navWrap"></p>

4.2 划线命名

<p class="nav-wrap"></p>

或

<p class="nav_wrap"></p>