css之属性部分
這篇寫的是今天的學習到的屬性，一共20個。
屬性再多，但也要會使用，會在使用時可以記起它，才能起到它為我們所需要的作用。
樣式屬性
1、border
CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。
邊框樣式border-style
屬性用來定義邊框的樣式
none: 默認無邊框
dotted: dotted:定義一個點線框
dashed: 定義一個虛線框
solid: 定義實線邊界
double: 定義兩個邊界。 兩個邊界的寬度和border-width的值相同
groove: 定義3D溝槽邊界。效果取決于邊界的顏色值
ridge: 定義3D脊邊界。效果取決于邊界的顏色值
inset:定義一個3D的嵌入邊框。效果取決于邊界的顏色值
outset: 定義一個3D突出邊框。 效果取決于邊界的顏色值
例子：
border-style: solid;?邊框寬度?border-width?
border-width:5px;邊框顏色border-color
可以設置的顏色：
- name - 指定顏色的名稱，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16進制值, 如 "#ff0000"
您還可以設置邊框的顏色為"transparent"。
注意：?border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。
border-color:#98bf21;邊框-單獨設置各邊
例子：
?
border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;?
邊框-簡寫屬性
border:5px solid red;border-radius
?
向元素添加圓角邊框。
半圓例子：
div{width: 50px;height: 100px;border-radius: 50px 0 0 50px;background: red;}<div></div>四個半徑值分別是左上角、右上角、右下角和左下角，順時針
置每個角的垂直半徑和水平半徑,用斜杠隔開，第一個參數表示左上角開始順時針的水平半徑，第二個參數表示左上角開始順時針的垂直半徑
這個圓角使盒模型豐富起來，之前只有矩形這個形狀，現在多了有弧度的形狀。
?
border-image?
邊框樣式使用圖像來填充。
border-image:url(圖片地址);box-shadow
向盒子添加陰影
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;?line-height
控制段落內每行高度
line-height:25px;行高之所以會居中，是因為它有自己計算方式，首先它會獲取font-size的大小，然后使用里line-height減去font-size
（line-height ?- ?font-size）得到值除以一半分配到字體的上和下，來實現居中，不過line-height小于font-size是不會
影響到字體的大小的。
?
text-indent
控制段落的首行縮進
p { text-indent:2em;}text-align
控制段落對齊方式，不但是文本，對象中的其它inline或inline-block元素也能夠被text- align進行對齊方式的設置。
text-align : left | right | center | justify
p { text-align:center;}letter-spacing?
控制段落的文字間的距離
p { letter-spacing:5px;}text-overflow
控制文字內容溢出部分的樣式
text-overflow：clip | ellipsis
clip ? ? ? ? ?當內聯內容溢出塊容器時，將溢出部分裁切掉。
ellipsis ? ??當內聯內容溢出塊容器時，將溢出部分替換為（...）。
但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實現溢出時產生省略號的效果，
還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），
只有這樣才能實現溢出文本顯示省略號的效果。
white-space
規定段落中的文本不進行換行
white-space 屬性設置如何處理元素內的空白。
這個屬性聲明建立布局過程中如何處理元素中的空白符
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
例子：
div,input{overflow: hidden; /*條件1：超出部分隱藏*/white-space: nowrap;/*條件2：強制在同一行內顯示所有文本*/text-overflow: ellipsis;/*超出部分顯示。。。*/ }word-wrap
控制內容超過容器的邊界時是否斷行
normal ? ? ? ? ??允許內容頂開或溢出指定的容器邊界。
break-word ? ?內容將在邊界內換行。如果需要，單詞內部允許斷行。
word-wrap: break-word;background-color
背景顏色
background-color : transparent | color body { background-color:#CCCCCC;}RGBA
color：rgba(R,G,B,A)以上R、G、B三個參數，正整數值的取值范圍為：0 - 255。
百分數值的 取值范圍為：0.0% - 100.0%。超出范圍的數值將被截至其最接近的取值極限。
并非所有瀏覽 器都支持使用百分數值。A為透明度參數，取值在0~1之間，不可為負值。
border-color:rgba(255 , 0 , 0 , .7);linear-gradient
CSS3?Gradient?分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實現漸變的語法不同，
這里我們只針對線性漸變的 W3C 標準語法來分析其用法，其余大家可以查閱相關資料。W3C 語法已經
得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。
第一個參數表示線性漸變的方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從
左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參
數，表示多種顏色的漸變。
background-image:linear-gradient(to left, red 30%,blue);?
??background-image
背景圖片
background-image : none | url ( url ) body { background-image:url(images/bg.gif);}background-repeat?
背景平鋪方式
background-repeat : repeat | no-repeat | repeat-x | repeat-y
body { background-repeat:repeat-x;}background-position
背景定位
background-position : 左對齊方式 ?上對齊方式?
body { background-position:left bottom;}背景樣式縮寫
background: 背景色 背景圖片 背景平鋪方式 背景定位
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}?
知識擴展：
w3c 里有外邊距的合并
http://www.w3school.com.cn/css/css_margin_collapsing.asp
?
標準流就是指在不使用其他的與排列和定位相關的特殊css規則時，各種元素的排列規則。
?
行內元素和塊級元素在DOM樹中都是一個節點。從DOM的角度來看，塊級元素和行內元素
是沒有區別的，都是樹上的一個節點；而從css的角度，二者有很大的區別，塊級元素擁有
自己的區域，行內元素則沒有。
再繼續昨天margin為負值的問題：
效果圖：
代碼：
#div1{width: 50px;height: 100px;border:2px solid #000;}.div2{width: 30px;height: 30px;border: 2px solid #333;margin-left:-10px; }<div id="div1"><div class="div2"></div></div>從代碼可以看去它們是父子，但子級就是出了父級的范圍，在我們印象中應該只有position這個
屬性可以做到這樣，但margin也能做到，這個就和上篇寫公式有關，因為在數學上它是合理的，
所以它不算違規。
?
轉載于:https://www.cnblogs.com/zhangzhicheng/p/5762706.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： 支付接口 随机串 时间戳 防钓鱼效验方式
- 下一篇： MySQL 第四天