CSS3学习笔记-元素定位
内边距 边框 外边距
border
border三个属性
border-wdith 默认值medium
border-style 默认值none
border-color 默认值 black
border-radius小于border-width,元素内角为直角，大于时，元素内角的半径为两个值的差
制作圆形
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
}
制作半圆
.top{
width: 100px;
height: 50px;
border-radius: 50px 50px 0px 0px;
}
.right{
width: 50px;
height: 100px;
border-radius: opx 50px 50px 0px;
}
制作扇形
.sector{
width: 100px;
height: 100px;
border-radius: 100px 0px 0px 0px;
}
制作椭圆
.hov{
width: 100px;
height: 50px;
border-radius: 100px/50px;
}
box-shadow
box-shadow 只设置spread-radius值和设置border-width效果一样，且不位于盒模型中
resize
允许用户改变元素的大小，textarea默认的resize属性是both
horizontal（水平） | vertical（竖直）| both（都能改变）
outline
外轮廓，获取焦点时或被激活时显示，属性类似于border，唯一区别在于offset属性用来设置元素向外或向内的偏移量，不会影响文档流
overflow
auto（内容超出元素显示滚动条）| scroll（一直显示滚动条）
notice
（1）margin padding 简写顺序：顺时针方向。未声明的一边会应用对边的值
（2）写代码时最好先声明*{margin:0px;padding:0px}
（3）在设置两个元素间的垂直外边距时，同一个外边距只会采用margin较大的那个值，不会叠加。而水平外边距会叠加。
（4）文本元素的边距通常上下边距使用em,左右边距使用px
CSS盒模型
（1）没有设置宽度的元素始终会拓展到和其父元素宽度相同为止
（2）有设置宽度的元素设置内边距，边框，外边距都会增加元素的宽度
注：border-box 默认是content-box ,设置为box-sizing可以实现content-box的效果
浮动
浮动元素会脱离文档流,实现的效果就是尽可能的向左上角或者右上角迁移
有父元素的控制方式：
（1）设置overflow:hidden,可靠的使父元素包含浮动的子元素
（2）设置父元素也浮动，同时设置父元素的兄弟元素clear:left，这样父元素的兄弟元素不会与父元素并排在同一行
（3）在父元素的最后添加一个非浮动的子元素，clear:left。或者应用.clearfix规则
.clearfix:after{
content:'.',
display:block,
visibility:hidden,
clear:both,
height:0
}
注：句点是最小的内容。可以使用clear:both来设置，同时包含了left和right的情况
notice
（1）在没有父元素的情况下，使用clearfix规则，最合适。
（2）浮动非图片元素时必须设置宽度，图片有自身的默认宽度因而不用设置
定位position
（1）默认值static
（2）相对定位relative:相对的是原来它在文档流中的位置
（3）绝对定位absolute:相对body元素进行定位。在未设置父元素的position属性时，设置父元素的postion之后，子元素会相对于父元素进行定位
（4）固定定位fixed:相对上下问的视口定位
显示属性display
（1）块级元素变内联元素：display:inline 反之：display:block
（2）inline元素的宽度随内容变化，无法设置width和height,也无法设置除了左右之外的边距
（3）inline-block 相当于将block元素inline展示，可以设置宽高及上下边距
垂直方向的居中可以如下设置：
display:table-cell; /*借用表格的行为*/ vertical-align:middle; /*垂直居中*/ text-align:center; /*水平居中*/
notice
inline-block可以包围浮动元素。在其父元素上应用text-align:center可以使其居中
背景
background-image:url(path/filename) 修改平铺方式background-repeat 修改平铺起点background-position
background-repeat: repeat-x repeat-y no-repeat round 通过调整图片大小来适应背景区域 space通过在图片间添加空白来适应背景区域
通过设置
background-positon:50% 50%; background-repeat:no-repeat;
实现背景图片的居中效果，表示图片50% 50%的位置和元素50% 50%的位置对齐
background-attachment 表示背景图片是否随着元素的滚动而移动
background简写
background: url() position color repeat size attachment
添加多张背景图片
background: url(images/turq_spiral.png) 30px -10px no-repeat, url(images/pink_spiral.png) 145px 0px no-repeat, url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
先列处的图片显示在上方
background-origin : border-box | padding-box | content-box背景起始位置
background-clip:border-box | padding-box | content-box 默认border-box背景裁切属性
background-size:cover 要和background-position:center配合使用 cover撑满整个元素 contain只会在水平方向拉满
notice
border-color的颜色在未设置的情况下会等于color
在设置background-position最好使用百分比
