CSS基础二
CSS屬性相關
樣式操作：
（1）width:為元素設置寬度
（2）height:為元素設置高度
ps:塊兒級標簽才能設置長寬行內標簽設置長寬沒有任何影響
p{width: 30px;height: 30px;}?
文字操作
/*字體樣式：關鍵字：font-family作用：更改字體的樣式*/ {font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif }/*字體大小:關鍵字：font-size作用：更改用戶的字體大小*/ p{font-size: 30px;}/*文字顏色:關鍵字：color作用：更改樣式的顏色*/ {/*方式一*//*color: red;*//*方式二*//* color: rgb(255,255,255);*//*方式三*/color: #ff0000;}/*文字裝飾關鍵字：text-decoration作用：對文字進行裝飾*/ {/* 文字下面沒有任何裝飾 適用于超鏈接 超鏈接下沒有任何橫線*/text-decoration: none;/* 下劃線*/text-decoration: underline;/* 上劃線*/text-decoration: overline;/*穿過文字 有點類似于刪除*/text-decoration: line-through;}/*文字對齊關鍵字：text-aline作用：調解文字位置*//*居中*/text-align: center;/*左對齊 默認*/text-align: left;/*右對齊*/text-align: right;/*兩端對齊*/text-align:justify/*字重:關鍵字：font-weight作用：對字體加重或者減輕*/ {/*加重*/font-weight: bolder;/*減輕*/font-weight: lighter;}/*）文字縮進關鍵字：text-indent作用：文本進行縮進*/ {text-indent:32px ;}?
?
背景屬性
（1）關鍵字：background
（2）作用：對背景進行操作
{/*背景顏色*/background-color: red;/*背景圖片*/background-image: url("111.png");/*默認鋪滿整個屏幕*/background-repeat:repeat ;/*禁止背景重復*/background-repeat: no-repeat;/*水平方向重復*/background-repeat: repeat-x;/*垂直方向重復*/background-repeat: repeat-y;/*背景位置*/background-position: center;}?
使被裝飾的屬性固定不動
關鍵字：background-attachment: fixed;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>滾動背景圖示例</title><style>* {margin: 0;}.box {width: 100%;height: 500px;background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center;background-attachment: fixed;}.d1 {height: 500px;background-color: tomato;}.d2 {height: 500px;background-color: steelblue;}.d3 {height: 500px;background-color: mediumorchid;}</style> </head> <body><div class="d1"></div><div class="box"></div><div class="d2"></div><div class="d3"></div> </body> </html>圖片樣式不動 圖片樣式不動 支持簡寫backgroud:red url('') no-repeat center center背景圖片應用場景所有瀏覽器你能夠看到的都是走網路請求傳輸過來的當你的網站需要用到很多小圖標的時候，可以將所有的小圖片放在一張圖片上，然后通過背景圖片的位置來控制顯示哪一個小圖片從而節省加載資源?
邊框
關鍵字：border
作用：給被裝飾的對象加上邊框
（1）邊框屬性
1、border-width:邊框粗細
2、border-color：邊框顏色
3、border-style：邊框樣式
（2）邊框樣式
?
?
/*顏色、粗細、樣式*/ {/*邊框顏色*/border-color: blue;/*邊框粗細*/border-width: 3px;/*邊框樣式*/border-style: dashed; } /*單獨為某一個邊框設置樣式*/ {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none; } /*（3）border-radius：作用：（1）可以使邊框變的圓滑（2）設置寬高為邊框的一半 可以設置成一個圓*/ {width: 100px;height: 100px;border: 3px solid black;background-color: red;/*設置為邊框的一半*/border-radius: 50%;}?
?
display屬性
/*（1）none： ①元素存在 但是在瀏覽器中不存在 ②瀏覽器中的空間也不存在*/ { display: none; }/*（2）bolck：將行內標簽轉換成塊標簽 可以設置行內標簽的一些屬性值*/ {width: 100px;height: 100px;border: 3px solid red;/*將行內標簽 轉換成塊標簽*/display: block;}/*（3）inline：將塊級元素 按行內元素顯示*/ .c1{width: 100px;height: 100px;border: 3px solid red;/*將塊標簽 轉換成行標簽*/display: inline;} .c2{width: 100px;height: 100px;border: 3px solid blue; /*將塊標簽轉換成行標簽*/display: inline;} .c3{ /*同時擁有行內標簽以及塊標簽的特點*/display: inline-block;}display:"none"與visibility:hidden的區別：
（1）visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
（2）display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
?
盒子模型
（1）margin：控制標簽與標簽的距離
（2）border：內邊距與內容外的邊框
（3）padding：內部文本到邊框的距離
（4）content：內部文本的邊框
?
?（1）marg外邊距
.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px; } /*簡寫*/ margin: 5px 10px 15px 20px; 順序：邊框順時針（上右下左）（2）內填充：
.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px; }補充padding的常用簡寫方式：
（1）提供一個，用于四邊；
（2）提供兩個，第一個是上下，第二個是左右
（3）如果是三個參數，第一個上，第二個是左右，第三個是下
（4）四個參數，上右下左
?
float浮動
【1】基本概念
①、在CSS樣式中任何元素都可以浮動
②、浮動之后會生成一個塊級框 不論其本身是何種元素
?
【2】浮動的特點：
①、浮動的邊框可以向左或者向右移動 如果碰到另外一個邊框會立馬停止浮動
②、浮動的文本不在普通的文檔流中?
?
【3】取值方式
①、left：左浮動
②、right：右浮動
③、none：沒有浮動
?
（浮動會出現父標簽塌陷的問題，為了解決這個問題我們會用到clear）
【4】clear
作用：清除浮動帶來的影響
.clearfix:after{content:''display:block;clear:both} /*哪里塌陷 就給誰加一個clearfix類屬性即可 如果給當前標簽加沒有效果 那么你可以考慮給目標標簽外層 再套一個div 然后給這個新的div加*/?
?
?
overflow溢出屬性
（1）屬性：
?、佟isible：默認屬性溢出的屬性不會被修剪
?、?、hidden：內容會被修剪 并且溢出內容不可見
?、?、scroll：溢出的內容會被修剪 但是瀏覽器會以滾輪的形式 查看溢出的部分
?、堋uto：如果內容被修剪 瀏覽器會以滾動條查看修剪的內容
（2）方式設置：
?、?、overflow：水平垂直方向均設置
②、overflow-x：水平方向設置
?、邸verflow-y：垂直方向設置
圓形頭像設置
* {margin: 0;padding: 0;background-color: #eeeeee;}.header-img {width: 150px;height: 150px;border: 3px solid white;border-radius: 50%;overflow: hidden;}.header-img>img {/*width: 100%;*/ /*左右拉伸*/ height: 100%; /*上下拉伸*/}?
定位
（1）relative（相對定位）：相當于自己當前的標簽
（2）absolute（絕對定位）：相對于已經定位的父標簽
（3）fixe（固定定位）：相對于瀏覽器窗口 固定在某個位置
脫離文檔流和不脫離文檔流
（1）：脫離文檔流
①、浮動元素脫離文檔流
②、絕對定位脫離文檔流
?、?、固定定位脫離文檔流
（2）：不脫離文檔流
相對定位不脫離文檔流
模態框
關鍵字：z-index
作用：設置對象的層疊順序
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自定義模態框</title><style>.cover {background-color: rgba(0,0,0,0.65);position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;}.modal {background-color: white;position: fixed;width: 600px;height: 400px;left: 50%;top: 50%;margin: -200px 0 0 -300px;z-index: 1000;}</style> </head> <body><div class="cover"></div> <div class="modal"></div> </body> </html>自定義模態框示例模態框八：opacity
（1）用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。
（2）其不但能透明文本效果 也可以透明圖片效果
?
轉載于:https://www.cnblogs.com/AbrahamChen/p/11480881.html
總結
- 上一篇： 计算机物联网应用技术工资,物联网专业毕业
- 下一篇： CSS 基本样式