1. 程式人生 > >Css基本樣式

Css基本樣式

overflow 哪些 居左 put 所有 type 設置 text list

去掉ul的小圓點list-style: none;
-------------------------------------------
文本居中:text-align:center;
text-align:left; 沒啥用,因為默認居左
text-align:right; 文本居右
-----------------------------------------
css中,任何文本都有行高。
行高就是 line-height:xxpx;一般等於父盒子的高度
------------------------------------------
清除所有默認------ 一般都會寫。
*{
margin:0;
padding:0;

}
-------------------------------------------------
盒子居中margin:0 auto
--------------------------------------------------
首行空兩個漢字的格,單位比較奇怪,叫做em,em就是漢字的一個寬度。
1 text-indent:2em;
indent就是“縮進”的意思。
-----------------------------------------------------------
1.3 font屬性
● 使用font屬性,能夠將字號、行高、字體,能夠一起設置。
1 font: 14px/24px “宋體”;
等價於三行語句:
1 font-size:14px;
2 line-height:24px;
3 font-family:"宋體";
------------------------------------------------------------
CSS3的知識點
一個矩形怎麽設置圓角
a{
border-radius:4px; 數值越大角越圓。
}
------------------------------
outline-style: none; /*輪廓*/ 用於input 的樣式
-----------------------------------------------------------------
文本框
<input type="text" value="默認有的值" />
密碼框
<input type="password" />
單選
<input type="radio" name="xingbie" /> 男
-----------------------------------------------------
復選框
<p>
請選擇你的愛好:
<input type="checkbox" name="aihao"/> 睡覺
<input type="checkbox" name="aihao"/> 吃飯
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 乒乓球
</p>
復選框,最好也是有相同的name(雖然他不需要互斥,但是也要有相同的name)
--------------------------------------------------------------------
下拉列表
select就是“選擇”,option“選項”。
select標簽和ul、ol、dl一樣,都是組標簽。
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
-------------------------------------------------------------------
換行
網頁中99.9999%需要換行的時候,是因為另起了一個段落,所以要用p,不要用<br />
-----------------------------------------------------------------------------
文本級:p、span、a、b、i、u、em ---行內元素
容器級:div、h系列、li、dt、dd ---塊級元素 p是塊級元素,例外。
----------------------------------------------------
盒模型有哪些組成:width 寬度、height高度、padding內邊距、border邊框、margin外邊距。
padding-left、padding-top、
padding-right、padding-bottom。
--------------------------------------------------------------------------------------
消除浮動方法
1.前提是兒子元素設置了浮動,那麽就給父元素設置高度。這樣就會 消除浮動。但是,一般
不這樣做,網頁不設置高度。
2.隔墻法
比如
<div class="father">
<div cvlass="a">我是一</div>
<div class="b">我是二</div>
</div>
裏面的a.b 都設置了浮動。父元素沒有設置高度。
怎麽解決? 就給ab之間加入一個新的div,這個div呢,設置了消除浮動。
如圖:
比如
<div class="father">
<div class="a">我是一</div>
<div class="al"></div>
<div class="b">我是二</div>
</div>

.al{
clear:both;//消除全部浮動
}
--------------------------------------------------------------

消除浮動方法之內墻法

<div class="a">
<p></p>
<p></p>

<div class="al"></div> //內墻法就是把al放在div裏面。


</div>

這個呢,跟上面一樣,父元素沒有高度。p設置了浮動,這樣隨著裏面的變化,撐高父元素。
-----------------------------------------------------------------------------------
清除浮動方法4:overflow:hidden;
兒子元素設置了浮動,父元素設置了寬度,沒有高度。這樣父元素就不能被子元素撐高。那麽在父元素設置
overflow:hidden;就能被浮動的子元素自動撐高。這是所謂的偏方,說明白就是瀏覽器渲染的機制帶來的。
--------------------------------------------------------------------------------------------

Css基本樣式