html标签命名 及css

CSS（Cascading Style Sheets） 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
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msq
小技巧：tips
栏目标题：title

多类名便于组合操作

id 类似身份证号，唯一且不得而重复

通配符选择器“*”：代表所有的选择器

伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。比如可以选择第一个、第N个元素
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接


结构（位置）伪类选择器（CSS3）
:first-child:
:last-child:
★★★ :nth-child(n): 匹配属于其父元素的第N个子元素，不论元素的类型 even偶数 odd奇数 n从零开始
:nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式

目标伪类选择器
:target 可用于选取当前活动的目标元素
ps:目录跳转，使用超链接定位目标id

line-height:行间距||行高
一般情况下，行距比字号大7~8像素即可。
text-align:水平对齐方式 left、right、center

★ text-indent:首行缩进
★ letter-spacing:字/字符间距
★ word-spacing:单词间距
★ word-break：自动换行

颜色半透明（css3）
rgba alpha 透明之意 取0~1之间
文字阴影（css3）
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色；

★★★★块级元素(block-level)
能独占一整行或多行，可对其设置宽度、高度、对齐等属性
常见有h1~h6 p div ul ol li 等
特点：
1.总是从新行开始
2.高度、行高、外边距以及内边距都可以控制
3.宽度默认容器100%
4.可以容纳内联元素和其他块元素

★★★★行内元素(inline-level)
靠内容支撑
常见有a strong b em i del s ins u span 等
特点：
1.和相邻行内元素在同一行上
2.宽高无效，只有水平方向的padding与margin可以设置。
3.宽度默认本身内容宽度
4.只能容纳文本或其他行内元素（“a” 特殊）

★★★★行内块元素(inline-block)

常见有 img input td 等.
特点：
1.和相邻行内元素在同一行上，但之间有空白间隙
2.默认宽为本身内容宽
3.高度，行高 内外边距可控

★★★ 属性选择器 []
^= 表示以**为开头
$= 表示以**为结尾
*= 表示在任意位置

★ 伪元素选择器（CSS3）
E::first-letter 文本的第一个单词或字
E::first-line 文本第一行
E::selection 可改变选中文本的样式

★★ E::before
★★ E::after
★ content
eg: div::before{content:"开始"；}
div::after{content:"结束"；}
类选择器|伪类选择器|伪元素选择器

CSS书写规范
div与｛｝间 空格 div ｛｝
冒号后空格 font-size:空格12px;
当一个rule包含多个selector时，每个选择器声明必须独占一行
选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
属性另起一行，分号结尾

background-position /*利用方位名词更改背景图片位置*/ left top right bottom 默认左上角 居中 center center 方位名词只写一个 另一个默认center
/*利用坐标 X Y*/
/*可混合使用*/

background-attachment：scroll(默认） fixed固定 背景附着
★ 简写
background：transparent url（image.jpg) repeat scroll 50% 0；
背景颜色 背景图片地址 背景平铺 滚动 位置
background-size:* * ; （px % ）尽量只修改一个值 防止缩放失真。
cover； 自动调整缩放比例，保证图片始终填充满背景区域，溢出部分隐藏
contain；自动调整缩放比例，保证图片时钟完整显示在背景区域

★ line-height 设定行高等于盒子的高度，就可以使文字垂直居中
★ text-decoration：none underline overline line-through

css层叠
1.样式冲突，遵循就近（结构）原则

盒子边框 none;solid;dashed;dotted;double

表格中的细线边框
table{border-collapse:collapse;};
border-collapse:collapse; 表示边框合并在一起 collapse 合并之意

圆角边框 border-radius:↖↗↘↙

外边距margin实现居中对齐 margin：0 auto；
条件：1必须是块级元素；
2盒子必须指定了宽度（width）

✿✿✿ 区分
1.文字水平居中 与 盒子水平居中
text-align margin：0 auto；
2.插入图片与背景图片
插入图片 更改大小：width & height
更改位置：margin & padding 可当做一个盒子

背景图片：更改大小：background-size：* *;
更改位置：background-position:* *;
3.一般情况下，背景图片适合做小图标，插入图片适合产品展示等

🚀 行内元素是只有左右外边距没有上下外边距的；内边距，在ie6等低版本浏览器也会有问题。 尽量不给行内元素指定上下内外边距

🚀 外边距合并问题
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。 会出现在垂直的块级盒子 以最大边距为准 way：避免使用

外边距塌陷与合并： （子盒子设置外边距，造成父盒子拉开边距且父子盒子边合并）
way：1.为父元素定义1像素的上边框或上内边距
2.可以为父元素添加overflow：hidden

宽度剩余法

Css3盒子模型
✿✿✿通过box-sizing来指定盒模型，即可指定为content-box、border-box,
1.box-sizing:content-box 盒子大小为 width+padding+border
2.box-sizing:border-box 盒子大小为width。（padding&border包含在内）

盒子阴影
语法格式
box-shadow：水平位置 垂直位置 模糊距离 阴影尺寸(大小) 阴影颜色 内/外阴影（inset/outset）


display:inline-block;
转换为行内块元素 就可以放一行上 有宽高 但 元素间有空隙 不便处理
float：left； 无间隙
子盒子浮动不会压住父盒子的padding与margin
块元素添加浮动后，具有行内块的特性

★★★★清除浮动本质
解决父级元素因为子级浮动引起的内部高度为0的问题

清除浮动的方法
本质叫闭合浮动更好些，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动
选择器｛clear：属性值；｝ 属性值：left right both
1.额外标签法 style→.clear:both; 浮动元素末尾添加空标签 <div clear></div>
✿ 通俗易懂，书写方便 🚀 无意义的标签，结构化较差
2.给父级添加 overflow； 触发BFC BFC可清除浮动 ✿ hidden|auto|scroll 皆可
✿ 代码简洁 🚀 内容增多时易造成因不会自动换行导致的内容隐藏，无法显示需要溢出的元素。
3.after伪元素清除浮动 🚀 content：“.” 里面尽量跟一个小店，或者其他，尽量不为空，否则firefox 7.0前的版本会有生成空格。

4.使用before和after双伪元素清除浮动


导航栏部分 采用li


定位（position）
定位模式 & 边偏移
position： static 自动/静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位
相对于原文档6️⃣的位置 依靠上一个已经定位的父元素进行定位（完全脱标，不占位置）
子绝父相：子级是绝对定位的话，父级要用相对定位

☆☆ 绝对定位的盒子水平/垂直居中
普通盒子margin：* auto；对绝对定位盒子无效；
可以采用 left 50% 外边距负一半值

🚀🚀 如果盒子本身就需要添加浮动&绝对、固定定位（脱标）。则不需要转换

元素显示和隐藏

display：none block 隐藏但不保留位置
visibility： visible 隐藏且保留位置

溢出 overflow： visible 超出显示 auto 自动 scroll 显示滚动条 overflow：hidden 超出隐藏

鼠标样式 cursor
cursor: default 小白（默认） | pointer 小手|move 移动|text 文本
轮廓 outline outline：0；
resize:none; 防止文本域拖拽
vertical-align ：middle 垂直对齐（对块级元素无效） 应用于 图片 表单
去除图片底侧空白缝隙
图片或表单等行内块元素，其底线会与父级盒子的基线对齐。因此会在图片底侧留下空白间隙，way：1.转换为块级元素；2.vertical-align:middle|top等

溢出文字隐藏
word-break：自动换行 主要处理英语 normal|break-all | keep-all 半角空格或连字符处换行
white-space normal | nowrap：强制在同一行显示所有文本，直至出现br标签
text-overflow： clip | ellipsis

CSS3精灵技术（sprite）
字体图标 技术（移动端必备）
使用流程 1.ui设计字体图标效果图svg 2.前端人员上传生成兼容性字体文件包 3.前端人员下载兼容字体文件包到本地 4.将字体文件包引入HTML页面中
★⭐⭐ 阿里icon font字库 www.iconfont.cn

伪元素属于行内元素


过渡（css3）
transition：需过渡的属性 花费的时间 运动曲线 何时开始；