在上海樂位元組學習的的第六天(持續更新中)

2021-10-25 02:30:49 字數 2033 閱讀 9527

今天是學習前端的第六天,主要學習內容為:圓角邊框、盒子陰影以及浮動。

圓角邊框:我們可以使用border-radius屬性來設定元素的外邊框圓角,其語法為:border-radius:length;引數可以為數值或是百分比的形式,該語法為複寫形式,其後可跟乙個值(四個圓角相同)、兩個值(左上角和右下角為第乙個值,右上角和左下角是第二個值)、三個值(左上角為第乙個值,右上角和左下角為第二個值,右下角為第三個值)或是四個值(左上角、右上角、左下角、右下角)。

也可以四個角分開寫,但對順序有要求,需先上下後左右,

例如:border-top-left-radius:length;。

如果盒子是乙個正方形,那麼可以通過將數值改為高度或者寬度的一半,或直接寫為50%的方式將邊框設定成圓。其過程可以理解為將圓與邊框的四個角分別內切,然後裁剪。

盒子陰影:我們可以使用box-shadow屬性來為盒子新增陰影,其語法為:box-shadow:h-shadow v-shadow blur spread color inset;其中有兩個必需屬性:h-shadow(控制陰影水平方向的位置)和v-shadow(控制陰影垂直方向的位置),四個可選屬性:blur(模糊距離)、spread(陰影的尺寸)、color(陰影的顏色)以及inset(將**影改為內陰影)。

需要注意的是:

1.預設的陰影是**影(outset),但是不能寫這個單詞,否則陰影無效,因此使用**影時不寫單詞,使用內陰影時寫上inset;

2.盒子陰影不占用空間,不會影響其他盒子的排列。

浮動:傳統css的三種布局機制為標準流、浮動和定位,浮動可以改變元素標籤預設的排列方式,讓多個塊級元素一行無縫顯示,其語法為:選擇器。屬性值包括:none(預設值,不浮動)、left(元素向左浮動,直到左邊緣觸及包含快或另乙個浮動框的邊緣)和right(元素向右浮動,直到右邊緣觸及包含快或另乙個浮動框的邊緣)。

浮動具有以下特性:

1.浮動的元素找相鄰帶有浮動的元素頂部對齊,要浮動都浮動;

2.浮動的元素脫離標準流,在頁面中不佔據位置;

3.浮動的元素只會影響到下面的元素;

4.浮動的元素不會超過父元素的padding值,在父元素內部進行浮動;

5.浮動的顯示方式基本和行內塊元素顯示方式相同;

6.浮動的元素壓不住文字和;

7.浮動的元素不能被text-align:center;或margin:auto;等屬性居中。

清除浮動:在開發過程中有時不方便給父盒子指定高度,子盒子浮動後將不再占有原來的位置,導致父盒子高度為0,就會影響到下方的盒子,此時我們就需要清除浮動。清除浮動的本質是清除浮動元素造成的影響,清除後父盒子就會根據浮動的子盒子自動檢測高度,在父盒子有了高度後就不會影響下面的盒子。

清除浮動的方法有四種:

1.額外標籤法。

2.給父元素新增overflow屬性法。

3.:after偽元素法。

4.雙偽元素法。

額外標籤法:在浮動元素末尾新增乙個空的標籤,其語法為:選擇器(空標籤)。屬性值包括:left(清除左側浮動的影響)、right(清除右側浮動的影響)以及both(清除兩側浮動的影響)。

這種方法通俗易懂,書寫方便,但是會新增許多無意義的標籤,結構化比較差。

給父元素新增overflow屬性法:給父元素新增overflow屬性,將其屬性設定為hidden、auto、scroll都可以,一般設定為:overflow:hidden;。

其優點是**簡潔,但是存在無法顯示溢位部分的缺點。

:after偽元素法:給父盒子新增類名(clearfix),並在css中寫下如下**:.clearfix:after 。其優點是結構語義正確,但存在低版本瀏覽器不相容問題。

雙偽元素法:給父盒子新增類名(clearfix),並在css中寫下如下**:

.clearfix::before,

.clearfix::after

.clearfix::after

12

。其優點是結構語義正確,但存在低版本瀏覽器不相容問題。

在上海樂位元組學習的三十六天

許可權在日常辦公系統中算是乙個比較常見的基本功能,對於存在有許可權模組的系統中規定了登入使用者能夠操作哪些資源,不能夠操作哪些資源。借助許可權模組可以有效的控制參與到系統不同身份人員要具體做的操作,可以說乙個成熟的後端系統離不開乙個比較完善的許可權管理系統。rbac模型 role based acc...

在上海樂位元組學習的第十六天(持續更新中)

很多css3屬性 最初的預覽版沒有形成最終的正式版,但是瀏覽器為了對這些新屬性形成支援,主流瀏覽器提供屬於自己的語法規則 瀏覽器字首 webkit 谷歌 蘋果 瀏覽器字首 moz 火狐瀏覽器字首 ms ie瀏覽器字首 o 歐鵬瀏覽器 注 新增瀏覽器字首 相容模式 不新增瀏覽器字首 標準模式 1.漸變...

在上海樂位元組學習的第八天(持續更新中)

一 控制單行文字,溢位 省略號顯示 1 空白空間的處理 white space prepre wrap pre line inherit 繼承!nowrap 不讓文字換行 2 溢位屬性 控制內容溢位時候的顯示方式 overflow屬性 auto 當內容超出的時候有滾動條,沒有超出的時候沒有滾動條 s...