极客学院HTMLCSS笔记（9）CSS轮廓，对齐尺寸。属性，导航栏，选择器，ID，子元素，，2D，3D转换，CSS过渡，多列，HTML与CSS的实例效果

CSS轮廓
1.轮廓主要是用来突出元素的作用
outline设置轮廓的属性
outline-color设置轮廓的颜色
outline-style设置轮廓的样式
outline-width设置轮廓的宽度


CSS盒子模型应用：




CSS3的对齐操作：
margin position float
CSS尺寸·操作：
1.属性：
height:设置元素的高度
line-height:设置行高
max-height:设置元素最大高度
max-width设置元素的最大宽度
min-width设置元素的最小宽度
min-height:设置元素的最小宽度
width设置元素的宽度
CSS中的分类操作：
1.属性：
clear设置一个元素的侧面是否允许其他的浮动元素
cursor规定当指向某元素之上时显示的指针类型
display设置是否及如何显示元素
float定义元素在哪个方向浮动
position把元素放置到一个静态的，相对的，绝对的，固定的位置
visibility设置元素是否可见或不可见



CSS的导航栏
1.垂直导航栏
2.水平导航栏
3.导航栏效果






CSS3的选择器
元素选择器：1.最常见的选择器是元素选择器，文档的元素就是最基本的选择器
例如：h1{},a{}
选择器分组
1.例子
h1,h2{}
2.通配符*{}
类选择器详解：
1.类选择器允许以一种独立与文档元素的方式来指定样式
例如：.class{}
2.结合元素选择器：
例如a.class{}
3.多类选择器.class.class{}



ID选择器
：类似于类选择器，不过也有一些重要的差别
#id{}
2.ID选择器与类选择器的区别
：ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用is的时候，需要用到id
属性选择器
1.简单属性选择：例如：[title]{}
2.根据具体属性值选择：除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素例如：a[href=“http://www.jikexueyuan.com”]{};
3.属性和属性值必须完全匹配
子元素选择器：
1.与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
例如·：h1>string{}
相邻兄弟选择器：
可选择紧接在另一个元素后的元素，且二者有相同父元素
例如：h1+p{};




2D,3D转换
1.通过CSS3的转换，我们能够实现对元素进行移动，缩放，转动，拉长或拉伸
转换是使元素改变形状，尺寸和位置的一种效果
可以使用2D，3D来转换元素
2.2D转换方法：
translate(),rotate(),scale(),skew(),matrix()
3.3D转换方法
rotate X（），rotateY（）



CSS过度
1.通过使用CSS3可以给元素添加一些效果
2.CSS3过度是元素从一种样式转换成另一种样式
动画效果CSS
动画执行的时间
3.属性
transition设置四个过渡属性
transition-property过渡的名称
transition-duration过渡效果花费的时间
transition-timing-function过渡效果的时间曲线
transition-delay过渡效果的开始时间



多列
1，在CSS3中，可以创建多列来对文本或者区域进行布局
2.属性
column-count
column-gap
column-rule




HTML与CSS的实例效果


、