css1.1

css字体属性

font-family 设置字体
font-size 字体大小
font-weight 字体粗细
font-style字体样式
font 复合属性写法

css emment 语法生成

css 元素显示模式

元素显示模式分为两大类 块元素 和行内元素
块元素常见有： h1~h6、p、div、ul、ol、li等其中div时最典型的块元素。独占一行
行内元素有a、strong、b、em、i、del、s、ins、u、span等其中span是最典型的行内元素 一行显示多个

行内块元素有img、input、td

行内元素转换

display：block；行内元素转换为块级元素
display：inline；块级元素转换为行内元素
display：inline-block；将元素转换为行内块元素

css文本属性

color 文本颜色 十六进制 、RGB代码 、预定义颜色
text-align 对齐文本 只能设置水平对齐方式
text-decoration 文本装饰：overline上划线 ，line-through删除线，underline下划线；
text-indent文本缩进 em相对单位当前元素
line-height行间距

text-shadow：文字阴影

css背景

background-color背景颜色
background-image背景图片
background-repeat背景平铺 ：repeat | no-repeat| repeat-x |repeat-y
background-position 背景图片位置 background-position：x，y；使用精灵图用到例如：background-position：left top ；
background-attachment背景固定：fixed 固定 scroll 背景图像随内容滚动
背景复合写法background：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置；
背景颜色半透明 background：rgba；
background:rgba(0,0,0,(0~1透明))

背景颜色渐变

线性渐变

background:-webkit-linear-gradient(起始反向，颜色1，颜色2，···)；

css三大特性 层叠性、继承性、优先级

层叠性：就近原则
继承性： 子元素继承父元素属性 Inherited from
优先级 ：
行高继承
body {
font：12px/1.5
}
当前文字的1.5倍行高

优先级

p {
	color:red  !important;
}

继承权重是0 使用复合选择器时权重时叠加的

网页布局中三大核心

盒子模型，浮动和定位

css盒子模型

border 边框

border-width:边框宽度
border-style：

border-color：边框颜色
边框复合写法border：1px、solid red；没有顺序。
transparent透明
控制表格边框border-collapse：collapse表示相邻变宽合并在一起。
边框会影响盒子实际大小使盒子变大

padding 内边距

**padding用于设置内容（content）与边框（border）之间的距离


padding会影响盒子实际大小会撑大盒子 解决方案盒子大小-内边距、如果盒子不指定宽高是不会影响盒子的

margin 外边距

margin:0 auto;盒子水平居中

使用margin定义块元素的垂直外边距，可能会出现外边距合并嵌套块元素垂直外边距的塌陷
1.可以为父元素定义上边框
border：1px solid tran
2.可以为父元素定义上内边框
3.可以为父元素添加 overflow：hidden；
清除外边距 margin:0;padding:0;

圆角边框

border-radius：length；

盒子阴影

box-shadow

默认outset 不可以写 盒子阴影不占用盒子空间。

浮动（float）

网页布局第一准则：多个块级元素总想拍了标准流，多个块级元素横向排列找浮动。
float
浮动元素的重要元素1.浮动元素会脱标
2.浮动的盒子不再 保留原先位置。
浮动元素不会压住下面标准流的文字，文字会围绕浮动。

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。（浮动的元素互相贴靠在一起（不会有间隙），如果父级盒子装不下这些浮动的盒子，多出的盒子会另起一行对齐）。
浮动特性 3.浮动元素具有行内块元素特性。任何元素都可以浮动。
浮动元素经常和标准流父级搭配使用。
一个元素浮动了理论上的兄弟元素也浮动。
清除浮动
清除浮动的本质是清除浮动的影响；
如果父盒子本身有高度，则不需要清除浮动。
1.额外标签法 在最后一个盒子后面添加一个新盒子clear：both；清除浮动 这个新盒子不能是行内元素。 2.父级添加 overflow属性 overflow：hidden；

3.父级添加after属性

4…父级添加双伪元素

定位

定位=定位模式+边偏移

相对定位（relative）

position：relative；
它是相对于自己原来的位置来移动 原来标准流的位置继续占有 不脱标

绝对定位（absolute）

position：absolute；
如果没有祖元素或祖元素没有定位，则以浏览器为准定位。
子绝父相
绝对定位 脱标

固定定位（fixed）

position：fixed
固定定位用于固定浏览器可视区域的位置
以可视窗口为参照点 不随滚动条滚动

粘性定位(sticky）

定位叠放次序z-index

z-index：z；数值越大，盒子越靠上 不能家单位。
只有定位盒子才行。

定位小结

绝对定位和固定定位会压住标准流。

css显示元素与隐藏

1.隐藏
display：none
display:block 不保留原来位置

2.隐藏
visibility：visible元素可视
visibility：hidden元素隐藏 继续保留原来位置。
3.overflow溢出

css精灵图（sprites）

background-position

css字体图标（iconfont）

本质属于字体

1.字体图标下载
icomoon 字库
阿里 iconfont字库

css三角

css用户界面样式

鼠标样式 cursor

轮廓线outline

outline：none；给表单去掉蓝色边框
input {
outline：none；
}

防止拖拽文本域 resize

textarea {
resize：none；
}

vertical-align 属性应用

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

vertical-align：middle、top、bottom解决图片底部默认空白缝隙问题（也可以用display：block转换为行内块元素解决）。

css溢出文省略号显示

单行溢出

white-space：normal；文字显示不开自动换行
white-space：nowrap；文字显示不开也必须强制一行显示。
overflow：hidden；溢出隐藏
text-overflow：ellipsis；溢出省略号代替

多行溢出

overflow：hidden；
text-overflow：ellipsis；
display：-webkit-box；
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

css 布局技巧

1.margin负值的运用；
当两个盒子边框相邻时使用margin负值使边框重合。
2.文字围绕浮动元素
3.行内块元素运用
4.css三角强化

ps

ctrl+r 标尺

ps 切图工具
切图插件 Cutteman

css 书写顺序

css初始化

打开网页 查看网页源代码找到css文件
ctrl+f 搜索body

以上都是学习黑马pink老师课程的笔记