浮動給我們帶來了便利,同時它也有一部分的缺點
1、浮動後盒子的高度爲0
解決辦法:BFC
我們給他的父級元素一個overflow:hidden;會激活BFC,高度會自動計算到裏面。
當然,也有其他的辦法解決,比如:清除浮動,在這裏我只記錄了我最近用的這種方法。
2、頁面縮小後,有邊框的浮動元素,會掉下來,因爲頁面變小後,border會變寬,頁面放不下自然會掉下來
解決辦法:給父級盒子的寬度加大,給個overflow:hidden;
eg:
提到CSS,首先會想到的就是盒模型,如果對於盒模型不是很理解的,看這裏。這是一個基礎的系列,看了盒模型還可以看看box-sizing,好了不多說了,下面介紹今天的重點。首先從概念入門,B是Block,I是inline,F [Formatt
<div style="height: 30px;line-height: 30px;text-align: center;"> 讓我居中 </div>使line-height和height一樣就能讓字上下居中
對工程的部署一般是將工程的壓縮文件放在tomcat安裝目錄的webapps下,訪問時通過鍵入:http://localhost:8080/xx(假定爲本機訪問,xx是部署時的應用工程的訪問名字)。 而如果直接鍵入:http://loca
HTML+CSS+JS實現小學四則運算自動出題程序 要求 編寫一個小學四則運算自動出題程序 要求: 1、100以內四則運算,題目自動生成; 2、頁面需要有計算結果輸入框,提交按鈕; 3、用戶提交結果之後系統能自動計算成績; 4、系
JS 實現拖拽效果 拖拽原理 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/
Flex佈局 flex 佈局是繼 標準流佈局 、 浮動佈局 、 定位佈局 後的第四種佈局方式。這種方式可以非常優雅的實現子元素居中或 均勻分佈,甚至可以隨着窗口縮放自動適應。 flex 佈局在瀏覽器中存在一定的兼容性。但是在小程序