display:通過顯示方式來分類:
inline:同行顯示,不支援寬高,寬高由內容決定
block:異行顯示,支援所有css樣式,設定寬高
inline-block:同行顯示支援所有css樣式
盒模型:
margin+border+padding+content,四個部分區域
margin-top:|margin-left:完成自身布局
margin-right|margin-bottom:影響兄弟布局
當兄弟的上下布局重疊,取大值,父級與子級top重疊,取大值;解決辦法
給父級加padding-top或者父級加border-top
顯示寬高:border+padding+content
自身布局:margin-top|margin-left
兄弟布局:margin-bottom|margin-right
父級水平居中:margin0 auto
與inline相關的盒子 vertical-align
螢幕水平居中:margin-left:calc((100% - 500px) / 2);
螢幕水平居右:margin-left:auto;
auto自適應父級可利用的剩餘寬度
自適應水平居中:margin-left:auto;margin-right:auto;或者margin:0 auto;
字型設定
font-size:字型大小(引數也可以為inherit)繼承父類
font-weight:bold;字重 (100-900)|normal|lighter|bold
font-family:"stsong","微軟雅黑";第乙個為預設屬性,其他為當第乙個屬性不支援時的替代選項
line-height:npx;行高
text-align:center;水平居中方式
color:red,字型顏色
font:900 30px/120px "stsong";字重 大小/行高 字族
em(自身->父->html) | rem(html)(rem中的r為root表示紙盒html字型大小關聯)
tent-indent:2em;(表示縮排)
最小字型為12px
字劃線:
underline(下劃線):|line-through(中劃線)|overline(上劃線)
text-decoration:overline;(上劃線位置)
reset操作
太多系統預定義標籤,有預設樣式,但不滿足實際開發需求,反倒影響布局,通常在開發前,將要用到的預定義標籤的預設樣式清除,該操作就稱之為reset操作
如:body,h1,h6,pula
高階選擇器:
群組選擇器:div,p,a{}(設定共同樣式)
同時控制多個,選擇器之間使用逗號分開,每乙個選擇器位均可以替換為任意基礎選擇器或高階選擇器
後代:body div{}(中間使用空格分隔)(兒子可以使用》連線)通過關係層次控制乙個目標選擇器
兄弟:.div1 ~ .div2{}(使用~連線)+表示相鄰通過關係層次控制乙個目標選擇器
位置:li:nth-child(n){}
多類:.div.div1{}
高階選擇器優先順序:
優先順序和個數(權重)相關
基礎選擇器優先順序佔主導:id大於class大於標籤
選擇器優先順序相同時,和順序有關,高階選擇器型別不會影響優先順序
偽類選擇器相當於class
邊界圓角
左上為第乙個角,順時針賦值,不足找對角
border-radius:30px,40px;當畫素為長度一半時是乙個圓
a的四大偽類:
:link 鏈結初始狀態
:hover 滑鼠懸浮狀態
:visited 鏈結訪問後的狀態
:active 滑鼠按下時的狀態
cursor:為滑鼠樣式引數有pointer,等
body
ul border:引數為1px solid black;((寬度)畫素 實線 顏色)
背景之精靈圖:
div引數分別為 位址 不平鋪 x軸偏移,y軸偏移
精靈圖操作本質:控制背景的位置
background-position-x:x;
控制向右平移x畫素
background-position-y:y;
控制向下平移y畫素
div:hover
當滑鼠移動到指定位置時,向上移動20畫素
background-image:url("sb.png");設定背景
background-repeat:no-repeat;(禁止平鋪) repeat-x|repeat-y|repeat分別為水平平鋪,垂直平鋪,全部平鋪
background-position:位置npx mpx;
水平引數有left|center|right 垂直引數有:top|center|bottom
.div:hover
cursor: pointer;滑鼠指標顯示狀態
前端第三天
排版標籤 注釋作用不顯示在瀏覽器頁面 段落標籤 換行標籤 為段落換行 水平分割線 分割段落 居中 將文字 等 位置居中 w3c中不建議使用 預設格式 令檔案按照與那時碼的方式來顯示 區域 區隔 設定位置 定義斜體 格式標籤 擷取首字母縮寫 縮寫定義文件作者資訊 字型粗體顯示 定義文字的方向 脫離周圍...
前端學習第三天
float left 設定左浮動 z index 100 重疊時顯示的順序，值越大越在上面 position fixed 固定 text align center 字型對齊方式 z index 屬性設定元素的堆疊順序 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。所以，z index 9...
前端學習 第三天
css 指層疊樣式表 cascading style sheets 為了顯表現html 元素,使html內容與表現分離。當瀏覽器顯示文件時，它必須將文件的內容與其樣式資訊結合。它分兩個階段處理文件 1 瀏覽器將 html 和 css 轉化成 dom 文件物件模型 dom在計算機記憶體中表示文件。它把...