不誤正業 之前端CSS基礎（二）

2021-09-28 12:45:12 字數 3251 閱讀 6371

css離不開一些常用屬性的書寫，本章呢就從，鏈結偽類，行高，盒模型介紹，以及文件流和定位浮動的介紹。最近還是太忙了，已經好久沒有去更行部落格了，但凡有時間呢，jj都會加以總結。對不務正業系列加以總結～

瀏覽器存在預設的字型大小16px，行高是基線與基線之間的距離。行高=文字高度+上下邊距。單行文字行高和氟元素高度一致時，內容垂直居中顯示。

行高單位

文字大小

值20px

20px

20px

2em20px

40px

150%

20px

30px

220px

40px

行高單位

父文字大小

子元素文字大小

行高40px

20px

30px

40px

2em20px

30px

40px

150%

20px

30px

40px

220px

30px

60px

1、邊框的常用屬性

.eg1
2、border屬性的連寫

/*邊框屬性連寫*/


border-top


: red solid 5px;


/*四個邊框值相同的寫法*/


border


: 12px solid red;
3、邊框的合併border-collapse: collapse;

table


td
padding-left | right | top | bottom

1、padding 連寫

padding


: 10px; // 上下左右間距為20px


padding


: 10px 20px; // 上下間距為10px，左右為20px


padding


: 10px 20px 30px; // 上10px，左右20px 下30px


padding


: 10px 20px 30px 40px; // 上10px 右20px 下30px 左40px
2、內邊距會撐大盒子

盒子寬度 = 定義的寬度 + 邊框的寬度 + 左右邊距

3、繼承的盒子一般不會被撐大

巢狀的盒子，如果字盒子沒有定義寬度，給子盒子設定左右邊距一般不會撐大盒子。

1、外邊距連寫

/*上下左右外邊距是20px*/


margin


: 20px;


/*上下20px 左右30px*/


margin


: 20px 30px;


/*上20px 左右30px 下40px*/


margin


: 20px 30px 40px;


/*上20px 右30px 下40px 左50px*/


margin


: 20px 30px 40px 50px;
2、垂直方便外邊距合併

兩個盒子垂直，乙個設定上外邊距，乙個設定下外邊距，設定的值為較大值

3、巢狀的盒子外邊距塌陷

元素自上而下，自左而右，塊元素獨佔一行，行內元素在一行上顯示，碰到父級元素的邊框換行。

float: left | right

1、特點

2、清除浮動

當父盒子沒有定義高度，巢狀的盒子浮動之後，下邊的元素位置放生錯誤

2.1 額外標籤法（在最後乙個浮動元素後新增標籤）

class


="main"


>


class


="content"


>


div>


class


="sidebar"


>


div>


style


="clear


:both;


">


div>


div>
2.2 給父集元素使用overflow:hidden；

type


="text/css"


>


.main


style


>
2.3 偽元素清除浮動

.clearfix:after


/*相容ie瀏覽器*/


.clearfix


style


>


>


>


class


="header"


>


div>


class


="main clearfix"


>


div>


class


="left"


>


div>


class


="content"


>


class


="content-top"


>


div>


class


="content-bot"


>


div>


div>


class


="right"


>


div>


body


>
–

–overflow:visible

預設值。內容不會被修剪，會呈現在元素框之外

overflow:hidden

內容會被修剪，並且其餘內容是不可見的

overflow:scroll

內容會被修剪, 但是瀏覽器會顯示滾動條以便檢視其餘內容

overflow:auto

如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容

定位的方向：left | right | top | bottom

1、 絕對定位:postion:absolute;

1.1 特點

2、 相對定位:position:relative

2.1 特點：

3、 固定定位:position:fixed

3.1 特點：

不務正業 之前端HTML基礎（一）

常用標籤用法 jeverson html roadtitle head html 上述的 注釋中，匆匆一看乙個標準的html文件，除去文件宣告的型別大概是由標籤和內容組成的，對於前端來講html是結構標準，那html的結構是不是就是由這些富有語義化的元素和元素屬性組成的呢，答案是的。熟知了上述的一些...

不務正業 二分基礎

二分作為查詢利器很實用 本篇主要講述二分理論 二分解題 二分stl解題 二分模板 非遞推版本 int search int x 二分查詢 else right mid 1 題目 二分查詢模板 include include include include using namespace std co...

前端複習記錄（前端基礎 CSS）二

修改父元素的color屬性 line height一般是指布局裡面一段文字上下行之間的高度，是針對字型來設定的，height一般是指容器的整體高度，background color設定的背景顏色會填充元素的content padding border區域 margin的外邊緣 聖杯布局是指布局從上到...