CSS第三部分 5.22

1.當一個標簽的類名有兩個,不重要,只和樣式表中后面那個相關聯。
.spec2{
color:blue;
}
.spec1{
color:red;
}
<p class="spec1 cpec 2">我是什么顏色?</p>** 是紅色**
2.!important標記
正確語法:font-size:60px!important;
提升的是屬性 不是選擇器,無法提升繼承的權重, 不會影響就近原則。
! important做站的時候,不允許使用。因為會讓css寫的很亂。


選擇上了 比較權重,權重越大聽誰的,一樣重聽后面的;沒選擇上 就近 一樣近比較權重 權重一樣聽后面的。
3.盒子模型
(1)padding:
內邊距。可以填充背景顏色.
如分開寫屬性(小屬性)的話, 不寫padding-left那么就是沒有左內邊距。
如按空格隔開寫屬性(大屬性)的話,順序是 上右下左。
不能把小屬性,寫在大屬性前面。
如果只寫三個 例如 padding: 20px 30px 40px;
上、右、下、和右一樣
如果只寫兩個 例如padding:30px 40px;
等價于:
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
快捷鍵就是pdt、pdr、pdb、pdl然后按tab。
可以用 {margin:0; padding:0} 清除默認的padding body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
(2)border:
邊框有粗細 線型 顏色。

border屬性能夠被拆開,有兩大種拆開的方式:
1)按3要素:border-width、border-style、border-color
2)按方向:border-top、border-right、border-bottom、border-left
border可以沒有,border:none;
某一條邊沒有:border-left: none;
也可以調整左邊邊框的寬度為0:border-left-width: 0;
3.標準文檔流
1)空白折疊現象:
2)高矮不齊,底邊對齊
3)自動換行,一行寫不滿,換行寫。
4.塊級元素和行內元素
1)塊級元素
●霸占一行,不能與其他任何元素并列
●能接受寬、高
●如果不設置寬度,那么寬度將默認變為父親的100%。
2)行內元素
●與其他行內元素并排
●不能設置寬、高。默認的寬度,就是文字的寬度。

3)相互轉換
將塊級元素轉換成行內元素 在樣式表中加 display:inline;
將行內元素轉換成塊級元素 在樣式表中加 display:block;
5.浮動 性質
脫離標準文檔流的三種方法:浮動,相對定位,絕對定位、。
1)浮動的元素脫標
一旦一個元素浮動了,那么,能夠并排了,并且能夠設置寬高了。無論它原來是個div還是個span。
span{
float: left;
width: 200px; height: 200px;
background-color: orange;
}
2)浮動的元素互相貼靠 :左浮動貼左,右浮動貼右。
3)浮動的元素有“字圍”效果 :
浮動的元素會擋住盒子 不會擋住文字。
div浮動 p不浮動 p中文字會圍繞著div 不會被擋住。
浮動這個東西,我們在初期一定要遵循一個原則:
永遠不是一個東西單獨浮動,浮動都是一起浮動,要浮動,大家都浮動
作業:

       <style type="text/css">
       body{
           text-align: center;
       }
       .a{
           width: 970px;
           height: 593px;
           margin: 0 auto;

       }
       .red{
           width: 277px;
           height: 103px;
           background-color: red;
           float: left;
           margin-right:14px;

       }
       .green{
           float: left;
           width: 679px;
           height: 103px;
       }
       .green1{
           float: right;
           width: 137px;
           height: 49px;
           background-color:green; 
           margin-bottom:8px; 
       }
       .green2{
           width: 679px;
           height: 46px;
           float: right;
           background-color:green; 
       }
       .yellow{
           float: left;
           width: 310px;
           height: 435px;
           background-color:yellow;
           margin-top:10px; 
       }
       .else{
           float: left;
           width: 660px;
           height: 390px;
           margin-top:10px; 
       }
       .else1{
           float: left;
           width: 460px;
           height: 410px;
       }
       .else2{
           float: left;
           width: 200px;
           height: 410px;
       }
       .else3{
           float: left;
           width: 660px;
           height: 25px;
       }
       .blue1{
           float: left;
           width: 450px;
           height: 240px;
           background-color: blue;
           margin-left:10px; 
           margin-bottom:10px; 
       }
       .blue2{
           float: left;
           width: 450px;
           height: 110px;
           background-color: blue;
           margin-left:10px; 
           margin-bottom:10px;         
       }
       .blue3{
           float: left;
           width: 450px;
           height: 30px;
           background-color: blue;
           margin-left:10px; 
           margin-bottom:10px;         
       }
       .purple{
           float: right;
           width: 190px;
           height: 400px;
           background-color:purple;
       }
       .green3{
           float: left;
           width: 650px;
           height: 25px;
           background-color: green;
           margin-left:10px;  

       }
       .footer{
           float: left;
           width: 970px;
           height: 35px;
           background-color:#000088;
           margin-top: 10px;   
       }
   </style>
   <title>css</title>
</head>
<body>
<div class="a">
   <div class="header">
       <div class="red"></div>
       <div class="green">
           <div class="green1"></div>
           <div class="green2"></div>
       </div>
   </div>
   <div class="body">
       <div class="yellow"></div>
       <div class="else"> 
           <div class="else1">
               <div class="blue1"></div>
               <div class="blue2"></div>
               <div class="blue3"></div>
           </div>
           <div class="else2">
               <div class="purple"></div>
           </div>
           <div class="else3">
               <div class="green3"></div>
           </div>
       </div>
   </div>
   <div class="footer">     </div>
   </div>
</body>
</html>
Paste_Image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • Html 標簽 斜體 粗體 單獨的樣式 引用文本 長文本引用 換行 空格 分割線 地址信息 單行代碼 多行代碼 無...
    SunnySky_閱讀 563評論 0 5
  • 一、CSS簡介 定義:層疊樣式表(Cascading Style Sheets),也叫級聯樣式表。 作用:用來美化...
    magic_pill閱讀 948評論 0 4
  • 到達金頂導游說正常速度3個小時,如果一個來回最少需要5個小時,心中有些擔心這次能不能到達山的頂峰,把外衣脫掉系在了...
    修行的放牛娃閱讀 441評論 0 1