CSS-Day02总结

1.emmet语法

（1）emmet生成HTML结构语法

（2）emmet 语法快速生成 css 样式：常用属性大多用英文单词首字母连写
tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;

2.CSS复合选择器

（1）特点：对基础选择器进行组合；由由两个或多个基础选择器，通过不同方式组合而成的。
（2）分类：

链接伪类选择器：

注意:因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

3.元素的显示模式

（1）块元素 --block
块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特点：
a.独占一行，
b.对宽高、外边距以及内边距的属性值生效；
c.如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
d.可以存放其他行内元素和块级元素
注意事项：开发时不要在文本类元素中添加其他元素，专注于文本存放（ h1~h6 、 p ）
（2）行内元素–inline
行内标签：包含a、span、em、strong、b、i、u、label、br；
特点：
a.相邻行内元素一行显示，一行显示多个
b.对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间。
c.给行内元素设置宽高无效，默认宽度是内容宽度
d.只能容纳文本或其他行内元素
注意事项：

1. 链接不能再放链接
2. 特殊情况的链接可以存放块级元素，转换一下显示模式比较安全。一般应用在电商网站点击商品列表项跳转到商品明细项
   （3）行内块元素–inline-block
   行内块标签：img ,input ,textarea td
   a.和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
   b.默认宽度就是它本身内容的宽度。
   c.高度，行高、外边距以及内边距都可以控制。
   （4）显示模式转换：
   a.块级标签转换为行内标签：display:inline;
   b.行内标签转换为块级标签：display:block;
   c.转换为行内块标签：display：inline-block;

4.背景图片属性总结

Tip：
1.使用background-color能够设置背景半透明，本质上就是在设置背景颜色。
2.与opacity属性的区别：
{background-color:black;
opcity:0.3;}
Opcity属性会让盒子半透明，里面的内容也会半透明，取值范围0-1。
background: rgba(0,0,0,0.3) 让盒子背景色半透明。