HTML+CSS（31~60）

一）、选择器

1.元素选择符/类型选择符（element选择器）

用于：改变某个元素的默认样式（比如改变一个div、p、h1）、统一文档某个显示效果（比如改变文档所有的段落样式）

2.class选择器/类选择器

用于一类样式

<div class=" "></div>

3.id选择器

具有唯一性

#box{

}

<div id="box"></div>

4.统配符/统配选择器

*{margin:0;padding:0;}

5.群组选择器

div,h1,.box{         }

6.后代选择器/包含选择器

<div>
<p></p>
<div>


div p{     }

7.伪类选择器

a:link{访问前 }
a:visited{访问后 }
a:hover{悬停 }
a:active{激活时 }

!im portant>内联样式>包含选择符>id选择器>class选择器(类选择器)>类型选择器(元素选择器)

二）、文本属性

1.font-size：默认16px、设计图通常12px

2.font-family:字体1，字体2；

3.color:rgb(0,0,0)

4.font-weight   加粗（100~900,100细体、400正常、700加粗、900更粗体，lighter、nomal/bolder）

5.font-style      倾斜（italic斜体字、oblique倾斜的文字、normal常规）

6.text align

7.间距与首行缩进：

间距：letter-spacing:10px                               word-spacing:取负值会缩在一起

首行缩进：

&emsp&emsp                                 text-indent:2em（首行优质缩进）

8.文本修饰属性

text-decoration:underline;   text-decoration:line-through;    text-decoration:overline

text-decoration:underline line-through overline

9.检索大小写

text-transform:uppercase;

10.font

font 可以合并，但有顺序：加粗 斜体 大小 字体

三）、列表属性

1.list-style-type：disc实心圆、circle空心圆、square实心方块

2.list-style-image:url(图片地址)

3.list-style-position：inside、outside

复合属性：list-style: none  url(图片地址)  inside

四）、背景属性

background-color:rgba(0,0,0,0.5)

background-repeat 

1. repeat:（默认平铺）
2. repeat-x：（X轴平铺）
3. repeat-y:（y轴平铺）
4. no-repeat：（不平铺）

background-position:

1. right bottom（水平位置  垂直位置）可以给负值

background-size:

1. 400px 400px
2. 100% 100%
3. cover：
4. contain：会有留白

background-attachment：

1. scoll
2. fixed(相对于窗口)

五）、背景的复合属性

background: url(图片地址) no-repeat center fixed 颜色

注意：background-size属性只能单独使用

六）、浮动属性

float：left（right）

清除浮动：

1. clear：left（right、both）
2. 在当前浮动元素后面补一个盒子不设置宽高
3. overflow：hidden   （让浮动元素计算高度）

七）、盒子模型

1. 内边距：padding-方向（可以设置单一方向的 、不支持负值、背景色会蔓延到内边距）
2. 边框：border：大小，粗细，颜色

• （border-方向：
• border-width
• border-style：solid、double、dashed、dotted
• border-color、）

3.magin外边距

• margin-方向
• 背景色没有蔓延
• *{margin:0}
• 负值反方向移动
• 屏幕居中：margin：0 auto（上下auto没用）