[js]03css基礎

margin塌陷現象

標準文檔流中，豎直方向的margin不疊加，以較大的為準。

如果不在標準流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的：

盒子居中margin:0 auto;

margin的值可以為auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了：
1）使用margin:0 auto; 的盒子，必須有width，有明確的width
2）只有標準流的盒子，才能使用margin:0 auto; 居中。
也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用

text-align:center;

善于使用父親的padding，而不是兒子的margin

margin這個屬性，本質上描述的是兄弟和兄弟之間的距離；最好不要用這個marign表達父子之間的距離。
所以，我們一定要善于使用父親的padding，而不是兒子的margin。

行高和字號

CSS中，所有的行，都有行高。盒模型的padding，絕對不是直接作用在文字上的，而是作用在“行”上的。

line-height: 40px;

文字，是在自己的行里面居中的。比如，現在文字字號14px，行高是24px。那么：

需要注意的是，這個小技巧，行高=盒子高。只適用于單行文本垂直居中！！不適用于多行。
如果想讓多行文本垂直居中，需要設置盒子的padding：

font-family: "微軟雅黑","宋體";
font-family: "Times New Roman","微軟雅黑","宋體";

font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";


font:16px/48px “宋體”;
行高可以用百分比，表示字號的百分之多少
font:12px/200% “宋體”;
font:12px/24px “宋體”;

本文鏈接：https://blog.csdn.net/iiiiher/article/details/77648929

智能推薦

HTML+CSS+JS-入門基礎

CSS margin-left 屬性設置 p 元素的左外邊距： p { margin-left:2cm; } margin-top屬性設置元素的上部邊距。 jQuery 選擇器 HTML 標簽定義和用法標簽表示變量的名稱，或者由用戶提供的值。標簽是計算機文檔中應用的另一個小竅門，這個標簽經常與和＄(’ ')是一個jQuery方法，用來獲取網頁中id為指定值的標簽對象 HTM...

前端基礎（一）html+css+js

前端包含html+css+js這三部分內容 Html超文本標記語言，與txt文件相比，html還能存儲圖片、視頻、音頻。能被瀏覽器解釋執行，html注重的是文件的內容。通過標簽的形式實現內容的呈現。 css樣式，讓網頁更美觀的展示給用戶 Js是javaScript是腳本語言，用來做一些動態的效果，通過事件實現動態效果。 Html內常用標簽用法 css樣式的使用運行結果 ...

[js]02css基礎-清除浮動

浮動的特點 1,浮動的元素”脫標” 證據1: 證據2:浮動后的元素不區分行內或者塊級元素了一個span標簽不需要轉成塊級元素，就能夠設置寬度、高度了。所以能夠證明一件事兒，就是所有標簽已經不區分行內、塊了。也就是說，一旦一個元素浮動了，那么，將能夠并排了，并且能夠設置寬高了。無論它原來是個div還是個span。 2.浮動的元素相互”貼靠” 3.浮動...

js基礎 && CSS面試題 - 2020.11.12

js基礎 && CSS面試題 - 2020.11.12 a. JS基礎 i. JS中由+ , == 導致的數據類型轉換規則 1、+ 如果有一個操作數是字符串，則要應用如下規則：如果兩個操作數都是字符串，則將第二個字符串拼接到第一個字符串后面；如果只有一個操作數是字符串，則將另一個操作數轉換為字符串，再將兩個字符串拼接在一起。如果有任一操作數是對象、數值或布爾值，則調用它們的 ...

JS基礎 && CSS面試題 -2020.11.15

JS基礎 && CSS面試題 -2020.11.15 a. JS基礎 https://blog.csdn.net/weixin_43415330/article/details/109697865 b. CSS面試題 c. CSS挑戰（設置CSS實現下面效果） https://codepen.io/surjithctly/pen/pLDwe 建議自己嘗試寫出來效果圖...