屬性值:lighter normal bold bolder四種屬性值依次加粗,或者數字表示(注意400和700兩個值),沒有單位。
設定是否斜體
屬性值:normal,italic(斜體英文),oblique(傾斜文字,只是將文字傾斜,與字型無關 )
字型,字型大小,行高,加粗,斜體都是font綜合屬性的單一屬性
這些單一屬性可以進行合寫,屬性可以有兩到多個,值之間用空格進行分隔。
寫法一:
先寫字號,再寫字型,否則不能正確顯示
>
divstyle
>
寫法二:
書寫順序必須是字型大小,行高,字型,字型大小和行高之間必須用/進行分隔。
屬性值:left center right
none沒有修飾
overline上劃線
line-throug刪除線,中劃線,標籤的預設值
underline 下劃線 標籤的預設值
作用:設定段落首行是否進行縮排
屬性值:px數值 縮排距離是長度單位,不常用
em 首行縮排幾個中文字元的位置(比較常用,可以根據字型大小來縮排,實用)
text-indent: 2em;
根據width百分比來定義(不常用)
text-indent: 50%;
包含了五個用來描述盒子位置、尺寸的屬性,分別是寬度width,高度height,內邊距padding,邊框border,外邊距margin
屬性值:
基本同width
作用:設定元素的邊框內部到寬高區域之間的距離
特點:可以載入背景
屬性值:常用px
padding是乙個復合屬性,可以分為四個方向的單一屬性,而且可以單獨設定。
p
四值法:
padding:10px 20px 30px 40px;
這四個值設定的分別是:上,右,下,左
三值法:
三個值分別分配給:上,左右,下
二值法
上下,左右
盒子實體化的最外層 .
由三個值組成:線的寬度,線的形狀,線的顏色。中間用空格進行分隔
border
:10px solide red
按照屬性值的型別進行劃分
設定的是盒子和盒子間的距離,不能渲染背景
屬性值:px
目的是為了清除瀏覽器載入的預設樣式對整體布局效果造成的影響。比如說大部分容器及標籤都有預設邊距,要麼用並集選擇器,要麼用萬用字元進行清除。
body,div,h1,p
簡單的小案例可以用萬用字元*達到乙個全選的目的,但是在大專案中不推薦,因為效率問題。
清除a標籤的預設央視,在設定頁面中常用a的公共樣式,設定color和text-decoration。
a
此時有乙個css的overflow屬性,
該屬性決定了內部元素載入高度超過父級,是否會出現溢位效果
屬性值:
visible溢位的部分視覺化
hidden溢位的部分直接隱藏(overflow:hidden;)
scroll溢位部分出現滾動條
首先複習文字居中text-align
多行文字垂直居中:讓元素高度自適應或者正好等於多行文字的高度,設定元素內邊距上下值相同
元素水平居中:將margin水平方向的值都設定為auto。
原因 auto只在水平方向有作用水平方向的margin,如果設定為auto邊距和自動無限增大,直到撐滿整個負元素,除了子元素寬度之外的剩餘區域,如果兩個水平方向都是oppo兩邊,只要無限大就能達到乙個平衡,兩邊距離相同導致盒子居中。
.box
乙個父元素內部可以放乙個或多個子元素,而多個子元素要排成一行顯示,必須保證父元素寬度足夠,需要遵循設定尺寸的規律:所有子元素的寬度加在一起不能大於父元素的寬度width。
父元素的width>=所有子元素的width=padding+border+ width+margin,如果不滿足要求的話多餘子元素會掉出一排。或者是溢位父元素。
注意計算和量取尺寸時一定要精準計算一點畫素都不能偏差。
注意特殊情況:盒模型自動內減
在垂直方向兩個元素的外邊距相遇,瀏覽器中載入的真正外邊距不是兩個間距的加和,而是兩個邊距中值較大的,邊距小的容易塌陷到邊距值大的內部
解決margin塌陷問題的方法:
同級元素: 如果兩個元素垂直方向有間距,只需要設定給乙個元素,不要進行拆分。
父子元素:讓兩個邊距不要相遇,中間可以用復元素border,或者paddy將邊距分隔開。更常用的方法是父子和模型之間的距離,就不要用兒子的magin去踹出來,而是用父親的padding擠出來。
水平方向的margin沒有塌陷現象
css 常用樣式
css 說的通俗一點就是 給標籤加樣式的。什麼玩意是樣式呢。你們可以理解為人穿的衣服,化妝之類的修飾,讓自己的寫的標籤變的好看一點 那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 內頁樣式 行內樣式。那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 ...
css常用樣式
格式調整 標籤的位置調整 text align center 絕對元素生成 position absolute margin right 微調上下左右 浮動 float 上下左右 width 寬 height 高 樣式調整 字型粗細 font weight size 字型格式 text decora...
CSS常用樣式
img box imgparentelement childelementfilter alpha opacity 60 filter progid dximagetransform.microsoft.gradient startcolorstr red,endcolorstr blue,grad...