html

css 选择器

基础选择器

标签选择器
类选择器（class）

可以有多类名，在 class 中用空格隔开

id 选择器

以 #+id 名来选择

id 具有唯一性
通配符

*，一般用于消除某某通用属性

文字样式

/* font-family: 字体 */
/* font-size: 字号 */
/* font-style */
/* font-weight 字体重量 */

/* 复合写法 */
font: style weight size family;

文本属性

/* 文本颜色 */
color: 属性值;
/* 属性值可选: 预定的颜色，16 进制，如 #FF0000, #FF6600
，RGB 代码: rgb(255,0,0) 或者 rgb(100%,0%,0%) */

/* 对齐文本 */
text-align: [center, right, left(默认)];

/* 装饰文本 */
text-decoration: [
    none(默认，什么都没有),
    underline(下划线),
    overline(上划线),
    line-through(删除线)
];

/* 文本缩进 */
text-indent: [像素 px 或者相对文字大小 em];

/* 设置行间距 */
line-height: ;

css 引入方式

放入 style 标签中（嵌入式引入）
行内样式表在标签内写 style
外部样式表

复合选择器

后代选择器

父标签 子标签 &#123;&#125;

子选择器

1	父标签>子标签 {} /* 只会选择到子标签 */

并集选择器

1	/* 也即多选，用逗号分开 */

伪类选择器

a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择指针位于上的链接 */
a:active /* 选择活动链接(按下未弹起) */

注意顺序：按以上的就好

1
2
3

input:focus &#123;
    /* 选取获得了焦点的表单元素 */
&#125;

行内元素

行内块元素

, , 同时具有块元素和行内元素的特点。

元素显示模式的转换

把转换为块元素：display: block

转换为行内元素：display: inline

转为行内块：display: inline-block

单行文字垂直居中

让行高等于盒子的高。

背景元素

background:
    /* -color: 背景颜色 */
    /* -image: 背景图片 */
    /* -repeat: 是否平铺 */
    /* -position: 背景位置 */
    /* -attachment: 背景附着 */
    /* 背景颜色半透明 */
    background: rgba(,,,透明度);

css 盒子

边框

border-width: ;
border-style: ;
border-color: ;

/* 内边距 */
padding-left: ; /* 左边的 */
padding-top: ;
padding-bottom: ; /* 下边 */
padding-right: ;

/* 外边距 */
margin: ;
margin-left: ;
margin-right: ;
margin-top: ;
margin-bottom: ;

border-radius: ; /* 圆角边框 */
/* 只写一个就是所有角，写四个就是四个角不同 */
/* 也可以分开写 */

/* 盒子阴影 */
box-shadow: [参数 - 1: h-shadow 水平阴影 参数 - 2: v-shadow 垂直阴影  参数 - 3：blur 模糊距离 参数 - 4: spread: 阴影尺寸  参数 - 5: inset 将外部阴影改为内部阴影];

解决塌陷问题

为父元素设置上边框
定义上内边距
为父元素添加 overflow: hidden

如果盒子有浮动，固定，绝对定位就不会有塌陷问题。

清除内外边距：

&#123;
    padding: 0;
    margin: 0;
&#125;

去掉小圆点：list-style: none

浮动

1 2	float: left; /* 靠左 / float: right; / 靠右 */

浮动脱标

脱离标准流，有机会实现叠加
如果多个盒子都设置了浮动则他们会按照属性值一行内显示并且顶端对齐排列

只要是浮动元素就具有行内块元素的特性

定位
定位 = 定位模式 + 边偏移

定位模式：

static：静态
relative：相对依据自己本来的位置来进行偏移
absolute：绝对：对于自己的有定位的父级元素，如果没有父级元素，那么则默认为浏览器
fixed：固定定位以浏览器的可视窗口为基准

边偏移

属性：top，bottom，left，right

定位的特殊性

行内元素添加绝对或者固定定位，可以直接设置宽高。

块级元素添加绝对或者固定定位，如果不给宽高，就是内容的宽高。

粘性定位：sticky

以浏览器的可视窗口为参照点移动元素。

会占有原先的位置。

必须添加 top，left，right，bottom 其中之一才有效。

定位的叠放次序 z-index

数字越大盒子越靠上。

绝对定位水平居中

绝对定位不能通过 margin: auto 水平居中。

绝对或者固定定位可以直接给高宽。

如果不给宽高就是默认内容的大小。

绝对定位和浮动的部分区别

浮动元素不会压住盒子的文字，但是绝对定位和固定定位会压住文字。

元素的显示和隐藏

display: none; /* 隐藏对象 */
display: block; /* 转换为块级元素，或者显示元素 */
/* 元素隐藏后不再占位置 */

visibility: visible;
visibility: hidden; /* 但是占位置 */
visibility: inherit; /* 指继承父的属性 */

overflow: ; /* 对溢出部分的处理：visible：显示  hidden：隐藏 scroll：显示滚动条 */

精灵图
为了有效减小服务器发送请求和收请求的次数，提高速率。

css 用户界面样式

/* 鼠标样式 */
cursor: default; /* 默认 */
cursor: pointer; /* 小手 */
cursor: move; /* 移动 */
cursor: text; /* 文本 */
cursor: not-allowed; /* 禁止 */

/* 表单轮廓线 */
outline: 0;
outline: none;

/* 防止拖拽文本域(textarea) */
resize: none;

vertical-align
经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

值：

baseline：默认，元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行中最低元素的顶端对齐

动画属性css 建议书写属性

布局定位属性 (display/position/float/clear/visibility/overflow)
自身属性 (width/height/margin/padding/border/background)
文本属性 (color/font/text-direction/text-align/vertical-align/white-space/break-word)
其它属性 (content/cursor/border-radius/box-shadow/text-shadow/background: linear-gradient)

标签

div和span

超链接

锚点链接

特殊字符

表格标签

分割标签

列表标签

输入标签