CSS各种属性

盒子模型属性
border none:无边框
top-style  上边框 solid:实线边框
right-style 右 dashed:虚线边框
bottom-style下 dotted:点状边框
left-style  左 double:双线边框
style       全 hidden:与none相同,应用于表解决边框冲突

边框颜色
border-top-color（同上）

边框弧度
border-radius:100px

边框粗细
border-top-width（同上）  关键字thin、medium、thick

同时设置边框的颜色、粗细和样式
border-bottom:9px #F00 dashed;

border:......

外边距（margin-top）（同上）

内边距（padding-top）（同上）

盒子实际高度=上下外边距+上下边框+上下内边距+内容高度

盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度

box-sizing属性
content-box
盒子的实际宽度和高度仅应用于元素内容,不包括内边距和边框

border-box
盒子的实际高度和宽度包括元素内容、边框和内边距

块级元素
<h1>~<h6>、<p>、<div>、列表    有宽高  独占一行  作为容器

内联元素（也叫行级元素）
<span>、<a>、<img/>、<strong>...  宽高靠内容绝对  padding可以调  块级包行级

display
控制元素的显示和隐藏
块级元素与行内元素的转变
none----设置元素不会被显示
inline--元素会被显示为内联元素
block---元素会被显示为块级元素
inline--block-行内块元素

浮动——float属性
left-元素向左浮动
right-元素向右浮动
none-默认值，元素不浮动

clear属性
清除浮动
left-在左侧不允许浮动元素
right-在右侧不允许浮动元素
both-在左、右两侧不允许浮动元素
none-默认值、允许浮动元素出现在两侧

overflow-属性
visible-默认值。内容不会被修剪,会呈现在盒子之外
hidden-内容会被修剪,并且其余内容是不可见的
scroll-内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto-如果内容会被修剪，则浏览器会显示滚动条以便查看其余的内容

两种扩展盒子高度的区别
使用overflow属性扩展盒子高度减少代码量，也减少了空的HTML标签，使代码更加简洁，清晰，
从而提高了代码的可读性和网页性能

如果页面中有定位元素，并且元素超出了父级的范围，
几句必须使用clear属性来清除浮动来扩展盒子高度

position属性
static-默认值，没有定位
relative-相对定位
absolute-绝对定位
fixed-固定定位

相对定位
relative属性值
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom

设置相对定位的盒子会相对它原来的位置，通过指定偏移，
到达新的位置
设置了相对定位的网页元素，无论是在标准流中还是在浮动流中，
都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移

绝对定位
absolute属性值
偏移设置：left、right、top、bottom
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。
如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，
这意味着它们对其他元素的定位不会造成影响

z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positin属性时,z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方

opacity透明度  1不透明