前端学习css命名及位置

1.整理的css命名规则

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中：left right center

登陆条:loginbar

标志:logo

广告:banner

页面主题:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

滚动:scroll

内容:content

标签:tags

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴：partner

2.常见的id命名

<1>页面结构

容器：container

页头:header

页面主题:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

<2>导航

导航:nav

主导航:mainbar

子导航:subnav

项导航:topnav

边导航：sidebar

左边导航:leftsidebar

右边导航:rightsidebar

菜单:menu

子菜单：submenu

标题:title

摘要：summary

<3>功能

标志:logo

广告:banner

登录:login

登陆条:loginbar

注册：regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的:current

小技巧:tips

图标:icon

注释：note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

学习:
css的代码域声明：在HTML文档中声明css代码域书写css代码
css的选择器和样式:使用选择器选择要添加样式的HTML标签，然后使用样式进行添加即可。
css的定位和盒子模型：
定位：移动HTML元素
绝对定位：
作用：移动HTML元素
使用：在样式单中使用样式属性position:absolute,然后使用left和top样式属性进行移动
参照物：就近的使用了定位的父级元素，如果所有的父级元素都没有使用定位，则相对body
相对定位：
作用：移动HTML元素
使用：在样式单中使用样式属性position:relative,然后使用left和top样式属性进行移动
参照物：参照的是自己原来的位置。
盒子模型：HTML元素与元素之间的间隔设置
内容:元素的宽和高的设置
内边距:内容距离边框的距离 padding
边框：border
外边距：元素本身或者边框距离外边框的距离，外边框是不显示的。 margin

作者：道法—自然
来源：CSDN
原文：https://blog.csdn.net/wyqwilliam/article/details/83758564
版权声明：本文为博主原创文章，转载请附上博文链接！