中軟實習 day7總結

2021-09-27 04:32:34 字數 3088 閱讀 2674

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%,實際工作中最常用的是畫素值。

大多數瀏覽器,如firefox、ie6及以上版本都採用了w3c規範,符合css規範的盒子模型的總寬度和總高度的計算原則是:

/*外盒尺寸計算(元素空間尺寸)*/

element空間高度 = content height + padding + border + margin

element 空間寬度 = content width + padding + border + margin

/*內盒尺寸計算(元素實際大小)*/

element height = content height + padding + border (height為內容高度)

element width = content width + padding + border (width為內容寬度)

1.width,height僅使用塊級元素,對行內元素無效

2.計算盒子總高度時,還應考慮上下兩個盒子的外邊距合併情況

3.如果乙個盒子沒有給定寬度和高度時,padding不會影響盒子大小

什麼時候用內邊距,什麼時候外邊距

我的回答是,這兩者可以混用,

width > padding > margin

1.margin外邊距合併問題,ie6 margin加倍的bug,所以最後使用

2.padding會影響內盒的大小,經常使用加減法

3.width 寬度剩餘法,高度剩餘法

css3中可以通過box-sizing 來指定盒模型,即可指定為content-box、border-box,這樣我們計算盒子大小的方式就發生了改變。

1.content-box :盒子模型 width + padding + boder

2.border-box:/盒子模型即為寬度 padding 和boder 都包含再width/

1.預設設定,優先保證內部的內容所佔區域不變

2.boder-box 優先保證自己盒子的所佔區域不變,對內容進行壓縮

語法格式:

box-shadow

:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/**影;

1.前兩個屬性一定要有,其他的可以省略

2.**影(outset預設值,內陰影inset

文件流,標準流,普通流

前面我們說過,網頁布局的核心,就是用css來擺放盒子位置。如何把盒子擺放到合適的位置?

css中三種定位機制:普通流,浮動,定位

html中相當重要的概念,乙個網頁中,標籤從上而下,從左至右順序排序的意思,這種布局稱之為普通流

浮動最早是用來控制,以便達到其他元素(特別是文字)實現「環繞」的效果。

後來,我們發現浮動可以使任何盒子一行排列,因此我們漸漸偏離主題,用浮動的特性進行布局

元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制,移動到其父元素中指定位置的過程。

在css中,通過float屬性來定義浮動,其基本語法格式如下:

選擇器
屬性值

描述left

元素向左浮動

right

元素向右浮動

none

元素不浮動(預設值)

浮動脫離標準流,不佔位置,會影響標準流。浮動只有左右浮動。

標準流父級

1.子盒子浮動不會壓住padding

2.浮動的元素會找最近的父級元素對齊,不會超出內邊距的範圍

浮動的目的是,讓多個塊級元素同一行顯示

float 浮漏特

浮:浮起來,漂浮在其他標準流盒子上面

漏: 加了浮動,不佔位置,原來的位置就漏給了標準流的盒子

特:特別注意,首先浮動的盒子和標準流父級搭配使用,特別注意,浮動會使元素變成行內塊元素

閱讀報紙時容易發現,雖然報紙中的內容很多,但是經過合理地排版,版面依然清晰、易讀。同樣,在製作網頁時,要想使頁面結構清晰、有條理,也需要對網頁進行「排版」。

「版心」(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器視窗中水平居中顯示,常見的寬度值為960px、980px、1000px、1200px等。

最普通的,最為常用的結構

人生苦短,有始有終。

好比我們的浮動,有浮動開始,則就應該有浮動結束。

由於浮動元素不再占用原文件流的位置,所以它會對後面的元素排版產生影響,為了解決這些問題,此時就需要在該元素中清除浮動。

文字混排效果,但是現在拿來做布局,出現很多的問題。

準確的說,不是清除浮動,清除浮動後造成的影響

清除浮動的本質,解決父級元素因為自己浮動引起的內部高度為0的問題

在css中,clear屬性用於清除浮動,其基本語法格式如下:

選擇器
屬性值

描述left

不允許左側有浮動元素(清除左側浮動的影響)

right

不允許右側有浮動元素(清除右側浮動的影響)

both

同時清除左右兩側浮動的影響

閉合浮動,

w3c推薦的清除浮動方法

優點:通俗易懂,書寫方便

缺點:新增了許多無意義的標籤,結構化更差。

bfc(後面詳細講)

可以給父級新增overflow:hidden auto scroll

優點:**簡介

缺點:內容增多的時候,不會自動換行,無法顯示溢位元素

:after 的公升級版

優點:符合閉合浮動的思想,結構語義化正確

缺點: ie6不支援after,

清除浮動:clear:both 塊級元素下移,直到兩邊沒有浮動元素

閉合浮動:使浮動元素閉合,使父元素能夠包含浮動元素,從而減少浮動影響

**更簡潔

ie6 不支援:after

中軟實習day7之簡單的springboot小專案

今天是實習的第七天,主要簡單了解了springboot以及自己實際操作乙個簡單的小專案進行了解。首先springboot在配置檔案上面比spring簡單的多,更加方便,首先引入依賴,可以利用lombok簡化實體類的開發 利用好lombok可以不用再自己補充構造方法 user類 package com...

中軟實習 day4總結

從html被發明開始,樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為使用者提供頁面效果的控制。最初的html只包含很少的顯示屬性。隨著html的成長,為了滿足前端工程的需求,html增加了很多顯示功能,html變得混亂,html頁面顯得用臃腫,於是css誕生了 css cascading...

中軟實習 day8總結

如果,說浮動,關鍵在乙個 浮 字上面,那麼 我們的定位,關鍵在於乙個 位 上。定位是難點,一定要學好 那麼定位,最常運用的場景再那裡呢?如果用標準流或者浮動,實現會比較複雜或者難以實現,此時我們用定位來做,just soso!元素的定位屬性主要包括定位模式和邊偏移兩部分。1 邊偏移 邊偏移屬性 描述...