CSS常用代码（下）

10.div 盒子模型

盒子组成主要内容：

 内容：content
 边框：border
 外边距：margin
 内边距：padding

10.1 边框：

语法：
border：宽度 样式 颜色
线条：
solid 实现
dashed 虚线
dotted 点线
double 双实线
可单独设置一边样式：
border-方向-style:
如：border-left-style:
 
border-style:dotted dashed
dotted(上下都为点线) dashed(左右都为虚线)
方向为顺时针 上->右->下->左
当3个值时：左边=右边

边框宽度 border-width
边框颜色 border-color
  颜色可设置为形式：1）英文
                 2）rgb
                 3)十六进制
border-color单独使用不起作用，必须先使用border-style设置边框样式

10.2 外边距

网页有多个盒子组成，若想拉开距离，就要设置外边距
margin可以单独改变元素的上右下左边距，也可以一次性改变所有边距
如：
margin-top:
margin-right
margin-bottom
margin-left
margin:

10.2.1自动居中

margin：0 auto

box-sizing:border-box
可以将设置了内填充后父级自动变大的效果去除（取消放大）

10.2.2outline

outline不占像素，作用相当于border，但border占像素（用来测试边框）

清除网页自带样式

margin：0
padding：0

10.3 内边距

调整边框与内容的距离
padding可以单独改变元素的上右下左边距，也可以一次性改变所有边距
如：
padding-top:
padding-right
padding-bottom
padding-left
padding:

10.4圆角边框

border-radius可以单独改变元素的圆角边距，也可以一次性改变所有圆角边距，顺序上右下左
当1个值时：对应全部
当2个值时：左上和右下第一个值，右上和左下为第二个值
当3个值时：第一个值是左上角，第二个值是右上和坐下，第三个值是右下
当4个值时，第一个是左上，第二个是右上，第三个是左下，第四个是右下
语法：
border-radius:length{}
 
border-radius实现圆形效果时：
1.设置圆角的半径为50%
2.设置圆形半径为元素宽度的一半
border-radius:100px;
border-radius:50%;

10.5盒子阴影

语法
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:必须的，水平位置，运行负值（x）
v-shadow:必须的，垂直位置，运行负值（y）
blur:可选 模糊距离
spread:可选 阴影大小
color:可选 阴影颜色
inset:可选 从外层阴影改变内测阴影

11.浮动

在网页中都是标准文档流自上而下开发模式，浮动脱离标准文档流

11.1display

display:
block:将元素显示块级，带有换行符
none:隐藏
inline：将元素显示为行级，无换行符
inline-block：行内块元素
 
display:block 转换为块级元素
display:none 隐藏
display:inline 转换为行内元素
display：inline-block 排列在同一行，支持宽度和高度

11.2 浮动

选择器：{
  float:属性值;
}
属性值：
left 左 
right 右
none 默认值，元素不浮动

11.3 清除浮动

选择器：{
  clear:属性值;
}
属性值：
left:在左侧不允许浮动元素
right:在右侧不允许浮动
both:在左右两侧均不允许浮动
none:默认值，运行浮动出现在左右两侧

11.4 overflow

选择器：{
  overflow:属性值;
}
属性值：
visible:默认值，超出盒子自身的内容不会被修剪，会出现在元素框外
hidden:超出盒子自身的内容会被修剪，并且内容不可见
scroll:超出盒子自身的内容会被修剪，但是浏览器会显示滚动条以便查看其它内容
auto:如果超出盒子自身的内容会被修剪，则浏览器会显示滚动条以便查看其它内容

11.5 inlink-block和浮动的区别

inline-block的优缺点如下：
1.可以让元素在一行，支持宽高度，代码实现起来既方便又便于理解，并且属性的元素在标准文档流中，无须清除浮动
2.位置方向不可控制，会使排列在一行的元素中间有空格
 
浮动的优缺点如下：
1.可以让元素在一行，支持高度和宽度，可以决定排列方向
2.设置浮动后元素脱离标准文档流，会对周围元素产生影响，必须清除浮动

12. 定位

语法：
选择器{
    position:属性值;
}
属性值：
 static 默认值
 relative 相对定位
 absolute 绝对定位
 fixed 固定定位

12.1 相对位置

特性：
1.相对自己的初始位置定位，元素仍处于文档流中
2.元素位置发生偏移后，它原来的位置会被保留下来
3.层级提高，可以把标准文档流中的元素及浮动元素盖在下面
通用场景：
通常配合绝对定位使用，为添加了绝对定位的子元素定义一个拥有相对定位的父级元素
 
通常配合绝对定位使用，为  添加了绝对定位的子元素  定义一个拥有相对定位的  父级元素

12.2 绝对定位

特性：
1.基于已定位（非static类型）的父级元素进行定位
 1）如果没有已定位的父级元素，则相对body根元素定位
2.元素位置发生偏移后（原来的位置不会被保留）
3.层级提高，可覆盖标准文档流中的元素及浮动元素
4.脱离文档流

12.3 固定定位

特性：
1.基于浏览浏览器窗口为基准进行定位
2.元素不会随滚动条移动