HTML学习第二部分

伪类

hover鼠标悬停

cursor鼠标样式

伪类结构选择

选择ul li：first（last--forth）-child（数字）

在文前后加“”ui li：before{content：“”}

字色ui li：placeholder{color：“”}

文本相关样式

 

a链接

a{color：

text-decoration：}

list列表

去列表默认样式ui li{list-style：none}

元素显示模式

 

背景顔色

background-color1：

background-image

 

边框

border—（width宽度 style样式 color颜色）

border-（top-left方位）-radius圆弧边框

合并相邻边框

table {

border-collapse：collapse；}

阴影

box-shadow：x偏移 y偏移 x宽 y宽 颜色

隐藏元素

div{width：300px；height：300px}

.box1{

display：none；脱离文档流，原来的位置不在展示

visibiliity：hidden;原地隐藏保留原本位置

background-color：}

绝对定位

 

 

 

伪类选择器

：hover===鼠标经过时

 

结构伪类

E：nth-child（） ；先看nth-child

E：nth-of-type（） 先看E，对所有的E进行编码，然后再看nth-of-type

伪元素

：：before content：“~”

：：after content：“~”

：：selector content：“~”

盒子模型

 

表格间距margin-bottom

外边距塌陷

父元素的第一个子元素的margin-top值会被父元素抢走

方法：给父元素加边框

overflow：hidden

文本溢出

overflow：visible

样式继承

div样式不对超链接生效

不是所有样式都继承，只有改变之后对布局无影响的样式才会继承

a链接最好在自身更改样式

解决padding影响盒子大小问题

多加box-sizing：border-box

flex布局

margin：0 auto水平居中

 

float浮动

会脱离文档流

渐变

background-image：linear-gradient（to right，颜色，颜色，颜色）

小图标

 

媒体查询

@media screen and（mid-width：900px）

2D转换

transform：translate（40px，40px）

transform：rotateZ轴（）

3D旋转

transform：rotate（45deg）