css中margin:0 auto無效的解決辦法<div class="div1" style="width:100%; height:60px; float:left; background:#CCC;"><div class="div2" style="width:auto; height:100%; margin:0 auto;
大家知道CSS常用最佳化嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗,在此拿出來與大家分享下,請大家互相指正。一.使用css縮寫使用縮寫可以協助減少你CSS檔案的大小,更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫文法總結》,這裡就不展開描述。二.明確定義單位,除非值為0忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100,但是在CSS中,你必須給一個準確的單位,比如:width:100px
border與outline:border屬性:border-width、border-style、border-color
css3 outline為div元素添加輪廓線 有時為了樣式的更加美觀,可適當的為div添加輪廓線。可通過outline屬性來實現。outline
單行垂直置中單行垂直置中可以直接用line-height=width來做<p style="width:100px;height:100px;line-height:100px;"><span>hello world</span></p>這樣文本hello world便實現了垂直置中,如果想讓整個p在父級元素中都置中,則在外面嵌套一層p,並且通過裡面p的margin來實現<p
你對CSS中behavior屬性的文法是否熟悉,這裡向大家簡單描述一下,在進行CSS網頁布局的時候,我們經遇到重新整理要保留表單裡內容的時候,CSS中的behavior就為我們很好的解決了這個問題。本文和大家重點討論一下CSS中behavior屬性文法的使用,在進行CSS網頁布局的時候,我們經遇到重新整理要保留表單裡內容的時候,習慣的做法使用cookie,但是那樣做實在是很麻煩,CSS中的behavior就為我們很好的解決了這個問題。CSS屬性behavior文法在進行CSS網頁布局的時候,我們
以前我們都是用JS來實現字母的首字母大小寫,但現在沒有必要了,CSS完全可以實現,話說相容性還好從IE6開始就支援了。text-transform:none | capitalize | uppercase | lowercasenone:無轉換capitalize:將每個單詞的第一個字母轉換成大寫<style> #box{ text-transform:capitalize; }</style><p id="box">css
1、只有底線的文字框:<input style="border:0;border-bottom:1 solid black;background:;">2、軟體序號式的輸入框:<script for="T" event="onkeyup">if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();</script>
如何給div加一個邊框樣式?對div盒子加一個邊框樣式很簡單只需要使用border板塊樣式即可。一、虛線與實線邊框 - TOP邊框虛線樣式:dashed邊框實現樣式:solidborder:1px dashed #000代表設定對象邊框寬度為1px黑色虛線邊框border:1px solid #000代表設定對象邊框寬度為1px黑色實現邊框二、對div上邊加邊框 - TOP我們給div上邊加1px黑色邊框div{border-top:1px solid
counter-increment你是否經常希望你可以讓一個有序列表或者一篇文章的所有標題自動編號?不幸的是,目前尚未有CSS3屬性支援。但是在CSS 2.1中,counter-increment 提供了一個解決方案。這就意味著它已經出現好些年了,而且在IE8中就已經支援了。配合:before 虛擬元素和content 屬性,counter-increment可以為所有的HTML標籤添加自動的編號。即便是嵌套的編碼也是支援的。樣本要給標題編碼,先將計算機重設一下: body
通常CSS注釋代碼如果是單行注釋的話開始使用/*,結束使用*/,這裡向大家描述一下CSS代碼中進行注釋的三種方法,相信本文介紹一定會讓你有所收穫。CSS代碼中進行注釋的三種方法1、選取器(childselector)如果你想在IE中隱藏一個CSS定義,可以使用子選取器。CSS注釋代碼:html>bodyp{ /*declarations*/ }2、“萬用字元”(*)這種寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)CSS注釋代碼:*htmlp{ /*declarations*/
一款亮麗的導航,能給網站一個畫龍點睛的作用。導航在指引使用者搜尋內容時,還能改變使用者瀏覽網站的心情,瀏覽網站也像一場旅行,有創意的導覽列讓使用者欣賞起來也會更加愉悅,增加對網站的興趣。本人不擅長美工製作,不過可以從某些漂亮的網站中提取不錯的部分為自己所用,也為他人分享。今天這裡為大家準備了一款天藍色導航一起學習。我們先看最終效果:第一步:放置一個p作為導航主體部分<p
最近在項目中,有很多地方都用到了線性漸層,比如:表單提交按鈕的背景,資料展示的標題背景等等,按照以前的做法是切 1px 圖片然後 repeat-x。下面我將介紹如何用 css 來完成該效果。css3:linear-gradient比如:黑色漸層到白色,代碼如下:.gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear,
簡單的說:1.clear:both是為了讓浮動的元素的前後元素不受浮動的影響.2.float:none是為了讓子項目不要繼承父元素的浮動效果.clear:both;是為了不讓浮動的內容影響別的標籤,所以要清除浮動float:none;我用過幾次都是因為原先已經用過float:left;或者float:right;但是由於是控制項或者公用的樣式,如果改了會影響較大,就用float:none覆蓋原先的樣式。這麼說不知道能不能明白,最好有個執行個體。對於新手來說.用了float 就用
CSS顏色代碼大全FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000#FFB7DD#FF88C2#FF44AA #FF0088 #C10066 #A20055 #8C0044 #FFCCCC#FF8888#FF3333 #FF0000 #CC0000 #AA0000 #880000 #FFC8B4#FFA488#FF7744 #FF5511 #E63F00 #C63300 #A42D00 #FFDDAA#FFBB66#FFAA33#FF8800
CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recompositePaint通常是其中最花費效能的,儘可能避免使用觸發paint的CSS動畫屬性,這也是為什麼我們推薦在CSS動畫中使用 webkit-transform: translateX(3em) 的方案代替使用 left: 3em ,因為left會額外觸發layout與paint,而webkit-transform只觸發整個頁面composite p {
提問:我們如何使兩個區塊層級元素位於同一行?回答:1.設定float屬性\(^o^)/~將區塊層級元素的css格式設定為float:left/right,比如,有兩個panel,panelA和panelB,想要使其位於同一行,只需要設定A的css格式為float:left/right即可。(註:只是設定A的float屬性哦,若設定了B的float屬性,則B後面的元素也會與其位於同一行。),若使用該方法,則兩個區塊層級元素緊挨著。效果樣本:2.設定display為inline-block,即編寫c
page-break-before和page-break-after CSS屬性並不會修改網頁在螢幕上的顯示,這兩個屬性是用來控制檔案的列印方式。每個列印屬性都可以設定4種設定值:auto、always、left和right。其中Auto是預設值,只有在有需要時,才需設定分頁符號 (Page
CSS教程最近在完善自己的網站時,偶然發現點擊導航處不同的欄目的時候,網頁文字會有左右閃動(漂移)的現象,經過仔細檢查思考,發現問題出在瀏覽器右側的捲軸上,即:當網頁內容高度不到一屏的時候;右側沒有出現捲軸,此時計算的螢幕寬度應為整個顯示器的寬度(假設為1440),而當網頁內容高度超過一屏的時候,計算的螢幕寬度應為1440-捲軸寬度,由於這個原因,當你設定了margin: 0
CSS3自訂捲軸樣式 -webkit-scrollbar有時候覺得瀏覽器內建的原始捲軸不是很美觀,那webkit瀏覽器是如何自訂捲軸的呢?Webkit支援擁有overflow屬性的地區,列表框,下拉式功能表,textarea的捲軸自訂樣式。當然,相容所有瀏覽器的捲軸樣式目前是不存在的。捲軸的組成:::-webkit-scrollbar 捲軸整體部分 ::-webkit-scrollbar-thumb