标签：隐藏元素 尺寸 场景 poi 之间 hone through transform 模型
css简介
css（Cascading Style Sheets）层叠样式表
作用 修饰网页信息的显示样式
层叠性 给同一个元素添加相同的css属性，属性值会存在覆盖问题
从上往下 下面代码覆盖上面代码
css语法
选择符+声明
选择符{属性：属性值}
eg：div{width：500px；}
注意
属性 属性值用：号
声明用；号结尾
属性有多个属性值时，属性值彼此不分先后
css的三种方法
1、内部样式表 在<head>里写<style> 再在里面写 选择器+声明
2、外部样式表 创建外部css文件，通过link标签引入
<link rel =“stylesheet” type=“text/css” href=“地址”>
3、内联样式表 直接在标签里写css
<div style=""></div>
css的作用域
1、内联css是当前标签（小部分情况）
2、内部css是当前文件
3、外部css是关联的所有文件（大部分情况）
css的优先级
1、内联css优先级最高
2、优先级与代码顺序有关，后写的代码优先级高
css选择器
定义 表示要定义的对象，可以是元素本身，也可以是一类元素或者制 定名称的元素
类型
1、元素选择器
2、id选择器
语法 在标签里加属性id=“名字”
#名字{属性：属性值；}
只能起一个名字，只能用英文，不能用关键字（所有标签和属性都是关键字）
作用 创建网页的外围结构
3、class选择器 （类名）
语法 在标签里加属性class=“名字”
.名字{属性：属性值；}
可以起多个名字
4、群组选择器
语法 标签1，标签2，标签3{属性：属性值；}
5、包含选择器
语法 标签1 标签2{属性：属性值；}
标签1包含标签2
6、伪类选择器
例如 元素名：hover{属性：属性值；} （鼠标划过改变效果）
用hover改变另一个元素，必须是父子关系
7、通配选择器
语法 *{属性：属性值；} 选中页面上所有元素
作用 清除页面上所有元素的默认边距
选择器的权重
css的权重表达方式 0000（二进制）
元素选择器 0001
class选择器 0010
id选择器 0100
子选择符 0000
属性选择符 0010
伪类选择符 0010
伪元素选择符 0001
包含选择符 为包含选择符的权重之和
行内样式 1000
继承样式 0000
代码注释
ctrl + /
html <!--内容-->
css /*--内容--*/
浮动的简单应用 float
div 块级元素
独占一行显示，可以直接写大小
span 行内元素
多个在一行显示，不可以直接写大小
语法 float：left；左浮动
float：right；右浮动
fireworks的用法
1.把图片拖拽到FW图标上
2.视图-标尺
3.ctrl+滚轮 放大缩小 ctrl+z返回
4.按住标尺拉出一条线，到指定位置放手
5.保证在指针工具处，按住shift键测量最近的两条线之间的距离。
6.锁住图层 （图层->位图上锁）
7.滴管工具-取色板复制颜色 自己添加#+复制色值
8.微调，双击线，改数字
9.按住空格 拖动图片
1000phone网页设计（色块）
1、分区域 外围+版心 div（id）>div（class），起名字class（css清除默认样式 margin 0 padding 0），版心 通用css 宽 居中
注释>logo （css宽高 背景颜色 居中margin auto）
注释>banner 轮播图
注释>ad广告
注释>news新闻
注释>links链接
注释>bottom底部
注意
提出重复代码 群组选择器 多起一个class名
版心里继续分块 div（class）
css核心属性
属性值包括 法定属性值 和 数值+单位
一、文本的相关属性
1、字体大小 （默认16px）
font-size：数值+单位；
注意 单位有 px（像素） em（参考当前字体大小） pt（point-磅）
默认情况下 1em=1ppi=16px 9pt=12px
2、文本颜色
color：#颜色值；
十六进制 黑0-F白
R G B
00 00 00 黑
3、字体
font-family：“字体1”，“字体2”
注意 中文字体加“” 英文字体中有空格时加“”
4、字体加粗
font-weight：100-500（正常）600-900（加粗）；
5、检索或设置文本大小写
text-transform：none 没有
capitalize 首字母大写
uppercase 将单词全部变成大写
lowercase 将单词全部变成小写
6、字体风格-倾斜
font-style：normal 常规
italic 倾斜小
oblique 倾斜大
注意 倾斜区别一般不明显
7、水平对齐方式
text-align：left 左
center 居中
right 右
justify 两端对齐（中文不支持）
注意
图片 支持 text-align：center
8、垂直对齐方式
vertical-align:top 顶部
middle 中部
bottom 底部（默认）
9、行高
line-height：数值+单位；
注意
当行高 大于 容器高度时，内容摆放位置 中间偏下
当行高 等于 容器高度时，内容摆放位置 垂直居中
当行高 小于 容器高度时，内容摆放位置 中间偏上
行高是由 文字大小 + 上行间距 + 下行间距
10、首行缩进
text-indent：数值+单位；（最好写em）
注意
可以写负值
只对第一行起作用
11、文本修饰
text-decoration：none 无
underline 下划线
overline 上划线
line-through 删除线
12、字间距（英文或中文）
letter-spacing：数值+单位；
13、词间距（英文）
word-spacing：数值+单位；
二、列表的相关属性 ul>li
1、基本符号样式
list-style-type：none 无
disc 实心圆
circle 空心圆
square 实心方块
2、图片符号样式
list-style-image：url（路径）；
3、定义符号位置
list-style-position：outside 外面
inside 里面
注意
简写 list-style
1000phone-1网页设计
css清除默认样式
*{margin：0；padding：0；}
ul，li{list-style：none；}
a{text-decoration：none；}
1、图片
上填充 padding-top：数值
左填充 padding-left：数值
2、导航
无序列表 ul>li>a
display：block；变成块元素
3、广告
图片+h3+h4+span或p
非规则的边框用切图
盒模型
组成 content（内容）+padding（填充）+border（边框厚度）+margin（盒子间距）
1、padding
作用
改变子元素（文字）在父元素的位置
注意
如果想保证原来尺寸不变，在宽高上减去相应的值
padding区域可以加背景图片
语法
一个值 上下左右 padding：20px；
两个值 上下+左右 padding：20 40
三个值 上+左右+下 padding：20 40 60
四个值 上+右+下+左（顺时针）padding:20 40 60 80
单独方向
padding-top 上
padding-bottom 下
padding-left 左
padding-right 右
2、border
语法
border：2px（宽度） soild（样式） blue（颜色）；
全称 border-width border-style border-color
边框类型
solid（实线）
dashed（虚线）
dotted（点状线）
double（双线）
none（无）
单独方向
border-top（上）
border-bottom（下）
border-left（左）
border-right（右）
3、margin（盒子间距）
作用
改变盒子与盒子之间的距离
语法
一个值 上下左右 margin：20px；
两个值 上下+左右 margin：20 40
三个值 上+左右+下 margin：20 40 60
四个值 上+右+下+左（顺时针）margin:20 40 60 80
单独方向
margin-top（上）
margin-bottom（下）
margin-left（左）
margin-right（右）
解决margin塌陷办法
1、给父元素添加overflow：hidden；
2、给父元素加padding
三、背景的相关属性
1、背景颜色
语法 background-color：颜色；
2、背景图片
语法 background-image：url（“路径”）；
背景图片的实现原则
容器尺寸等于图片尺寸，背景图片正好显示在容器中
容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素（一个靓仔变四个靓仔）
容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图
3、背景图片的平铺属性
语法 background-repeat：no-repeat；（不平铺）
repeat（平铺）
repeat-x（横向平铺）
repeat-y（纵向平铺）
4、背景图定位
语法 background-position：水平方向（正值为右）+垂直方向（正值为下）
水平方向取值 left/center/right/数值 左中右
垂直方向取值 top/center/bottom/数值 上中下
5、背景图固定
语法 background-attachment：scroll；（滚动）默认
fixed（固定）
注意
容器要产生滚动条
6、背景图的缩写
语法 background：属性值1 属性值2 属性值3 ...；
img和background的区别
1、<img>双 html的标签
需要src引入图片
2、background-images：url（“路径”） css的属性
通过url（）引入背景图
容器需要有大小才能添加
怪异盒模型（IE盒）
语法 box-sizing：border-box；
注意 要算进 border 和 padding
标准盒模型
语法 box-sizing：content-box；
float浮动
图片和文字进不去浮动区域
元素类型
1、块状元素（div、p、h1-h6、hr、列表ul ol dl、表单form）
特点
1.可以设置宽高（width、height）
2.独占一行摆放显示
3.一般作为容器，要正确嵌套标签 如：div>p、p>span
2、内联元素-行内元素（a、br、span、em、i、strong、b）
特点
1.不可以写宽高（width、height）
2.多个在一行摆放显示
3.padding：上下 margin：上下 不能正常显示
注意
img、input、textarea 可以设置宽高
元素类型的转换
盒子模型可通过 display 属性来改变默认的显示类型
语法 dispaly：block；（块状）常用，有显示功能
inline （内联）
inline-block（内联+块状）可设置宽高、一行多个
none （隐藏元素）
float（浮动）相对于inline-block
注意
大部分内联元素 display 属性默认为 inline，其中img，input，textarea 默认为 inline-block
伪类选择器
元素：hover{}（鼠标滑过）
元素：nth-child（数字）{}（第几个元素）
background：url（）
可以插入多个背景图片
元素的定位
语法 position：static；（默认值，默认没有定位）
absolute（依据父元素的绝对定位，若父元素没有定位，则依据根元素html定位） 会脱离布局流 原来位置不占位
relative（相对定位，相对本身的位置定位 口诀：子绝对，父相对） 不会脱离布局流，原来的位置占位
fixed（固定定位，固定在窗口的指定位置，无论窗口怎么滚动）
注意
后三个可配合 top bottom left right
让子元素在父元素上下左右居中
语法
position：absolute；
left：50%；
right：50%；
margin-left：负子元素尺寸一半；
margin-right：负子元素尺寸一半；
层叠属性
语法 z-index：数字（可负数）；（默认0）
作用 让重叠的元素 比较大小 数值越大 就在最上层显示
子选择器
语法 父元素>子元素{} 如 ul>li
作用 只能选择第一代子元素
锚点（锚链接）
作用 网页中的超链接，实现同一页面内的不同位置进行跳转 （不同页面也行）
语法 给目标元素起名字 如 <div id=“名字”>
给锚链接起名字 如 <a href=“#名字”>
滚动条设置
语法 overflow、overflow-x、overflow-y
属性值 visible（默认值）
scroll（加滚动条）
hidden（超出就隐藏）
auto（内容超出容器自动加滚动条）
CSS Sprites的原理（图片整合技术）
精灵图（雪碧图）
一、作用
将多张图片合为一张整图，然后用 background-position 来实现背景图片的定位
二、图片整合的优势
1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度
2）通过整合图片来减小图片的体积
CSS Sprites的实现方法
滑动门技术
1、定义
它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果
2、特点
通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性
1、宽度自适应
若块级元素宽度不设置，或者设置成100%，都是占据其父级元素的一整行
应用场景:
（1）页面最外层的盒子一般都要占据屏幕的大小，所以宽度100%。
（2）子元素使用百分比表示盒模型任意部分大小的话，代表的是子元素盒模型任意部分尺寸=父元素宽度*百分比
2、高度自适应窗口高度
body,html{height:100%;}
最外层的大盒子{height:100%;}
注意
高度自适应
父元素高度由子元素撑开
(1)若是子元素都浮动了，父元素不会被撑开（高度塌陷）
解决办法(清除浮动):
1、给父元素加最后一个子元素(块级元素)
{
height:0;
overflow:hidden;
clear:both;
}
缺点：造成不必要的浪费
2、给父元素添加
{overflow:hidden;}
缺点:可能造成需要的部分被隐藏掉
3、伪元素清除法（万能清除法）
.clearfix:after
{
content:"";
display:block;
height:0;
overflow:hidden;
visibility:hidden;
clear:both;
zoom:1;
} ==>base.css
备注：到时做案例的时候，给父元素添加类名 clearfix 即可
(2)预防子元素会没有内容，撑不开父元素的情况
解决办法：
给父元素添加最小高度 min-height
当内容高度小于最小高度时，按最小高度显示
当内容高度大于最小高度时，按内容高度显示
注意
兼容写法
{
min-height:数值;
_height:数值; _下划线是过滤器，只IE6认识
}
隐藏元素的方法
1、display：none；
元素隐藏，不占位
2、visibility：hidden；
元素隐藏，占位
3、overflow：hidden；
超出部分隐藏
鼠标指针语法
cursor：auto 默认
crosshair 加号
text 文本
wait 等待
help 帮助
progress 过程
inherit 继承
move 移动
ne-resize 向上或向右移动
pointer 手形
表格（table）
1、单元格间距
语法 border-spacing：数值；
2、边框合并
语法 border-collapse：separate（默认）
collapse（合并）
3、无内容时单元格设置
语法 empty-cells：show（显示）
hide（隐藏）
4、设置表格标题的位置
语法 caption-side：top（上）默认
bottom（下）
left、right（左、右）只有火狐支持
让多个li在ul里居中
语法
ul{
display：table；
margin：0 auto；
/* text-align： center； */
}
关于ul 及 li 横向滚动
css部分
ul用到 文本不换行 white-space: nowrap;
ul用到了元素超出宽度滚动 overflow: auto;
当然还有 li 标签的 display:inline-block;
标签：隐藏元素 尺寸 场景 poi 之间 hone through transform 模型
原文地址：https://www.cnblogs.com/imbacool/p/12386178.html
