css中margin的一些易忽略的問題

2021-06-23 03:59:02 字數 944 閱讀 2079

**:

效果如下:

內部.small的div設定margin-top為50px後,連同外部的div會一起向下移動50px,要想保持外部div不動,可以將.small的div設定float:left樣式;

但是當margin-top設定為百分比時就完全不一樣了

**如下

效果如下:

margin-top本來是相對于父元素而言的,但是通過開發者工具檢視,兩個div的高度是隨著視窗的大小變化而變化的,但是margin-top的值卻保持不變,經過測量,基本為百分比的2倍高度,即使.small的div設定了float:left,只能保證父級div位置不變,其margin-top值依然不變為百分比的2倍

如下圖所示:

.big的div和.small的div均設定成固定長寬後,margin-top為百分比,無論父級div高度如何變化,結果顯示margin-top的值不變,依然為百分比的2倍 

如下如:

前端 易混淆的一些css屬性

html平時常見的塊元素有 div,p,h1,h2,h3等,address 位址 blockquote 塊引用 center 舉中對齊塊 dir 目錄列表 div 常用塊級 dl 定義列表 fieldset form控制組 form 互動表單 h 標題標籤 hr 水平分隔線 isindex inpu...

Linux中易出錯的一些命令

mkdir 新建目錄 touch 新建檔案 cd 可以回到之前的工作目錄 cd 可進入使用者的宿主目錄 代表當前目錄 代表上級目錄。netstat 顯示網路連線 路由表和網路介面資訊 netstat an ping 用於檢視網路上的主機是否在工作 ping 選項 主機名 ip ifcpnfig 檢視...

CSS中的一些術語

正常流 這是指西方語言文字從左向右,從上到下顯示,這也是我們熟悉的傳統html文件的文字布局。注意,在非西方語言中,流方向可能不同。大多數元素都在正常流中,要讓乙個元素不在正常流中,唯一的辦法就是使之成為浮動或者定位元素。非替換元素 如果元素的內容包含在文件中,則稱之為非替換元素。例如,如果乙個段落...