3 8日學習日誌 css常用樣式

2021-10-21 14:12:45 字數 2691 閱讀 4127

屬性值: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...