當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS进阶学习

發布時間：2023/12/10 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS进阶学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

5種主流瀏覽器及內核

IE ?trident

Chrome webkit/blink

Firefox ?gecko

Opera presto 3%-5%

Safari webkit

css引入三種方式

行間樣式

頁面級

外部css文件

同步：順序進行。一件事做完做另一件事。

異步：同時進行。兩件不同的事同時做。

CSS權重（進制256進制）

！Important ??infinity

行間樣式 ????1000

Id ???????????100

Class|屬性|偽類 10

標簽|偽元素 ??1

通配符 ???????0

??????????????????

常用復雜選擇器

div span {} ?????div下的所有span標簽樣式

div ?> ?span {} ??div下的所有子標簽span標簽樣式

div.demo{} ???????并列選擇器，通過多種條件查詢一個元素，（沒有逗號）

em,span,div{} ????分組選擇器，共用代碼塊

* 瀏覽器遍歷父子結構標簽向左的順序。

font-weight:100-900 加粗字體效果

Normal:400 ???bold:700 ??bolder:特粗體 ??lighter:細體

文字水平垂直居中

文本高度=容器高度 ?line-height=height

首行縮進2個字符

text-indent:2em ????//開頭縮進兩個字符。

em: 相對單位， ?em=1*font-size.

文字行高是1.2倍行高：line-height=1.2em;

行級元素：span strong em a del ?內容決定大小，css不可修改寬高

塊級元素：div p ul li ol form adress ?獨占一行，css可修改寬高

行級塊元素：img ??內容決定大小，css可修改寬高

盒模型

border:10px solid black; ?//盒子大小不變，外邊加變寬10px邊框

Padding:10px ?//盒子四周全都增加10px;

Margin:10px; ?//距離外部10px;

Padding:100px 100px 100px 100px;

　　　　　上? ? ?右? ? ? ?下?? ???左

Padding:100px ??100px ????100px

?　　　　上? ? ??左，右 ????下 ???

Padding: ?100px ??100px ??

? ? ? ? ? ? ? ?上下? ? ? ? 左右

Padding: ?100px

? ? ? ? ? ? ? 上下左右

body天生具有margin:8px;

定位

Left:100px; ?????盒子左邊線距左側100px;

層模型：

Position:absolute: ?脫離原來位置定位，每個定位的盒子在不同層，比如樓房上下層用戶。

Position:relative: ?保留原來位置定位，本來的位置不許其他盒子占用。

absolute定位相當于最近的有定位的父級進行定位；如果沒有，那么相對于文檔定位。

relative定位相當于自己原來位置進行定位。

fix定位，（廣告定位）相當于屏幕定位，在屏幕某個位置始終不變。

一般用法：父級用relative定位(保留原來位置，不影響后序標簽位置)，盒子用absolute定位。

廣告定位：始終在屏幕中心；

五環居中，隨窗口改變而改變

<!DOCTYPE html>

<head>

<style>

.wrapper{

width:400px;

height:180px;

position: fixed;

left: 50%;

top: 50%;

margin-left: -200px;

margin-top: -90px;

}

.circle1,

.circle2,

.circle3,

.circle4,

.circle5{

width: 100px;

height: 100px;

border: 10px solid blue;

border-radius: 50%;

position: absolute;

}

.circle2{

left: 140px;

border-color: #000;

z-index: 3;

}

.circle3{

left: 280px;

border-color: red;

z-index: 5;

}

.circle4{

left: 70px;

top:60px;

border-color: yellow;

}

.circle5{

left: 210px;

top:60px;

border-color: green;

z-index: 4;

}

</style>

</head>

<body>

</div>

</body>

</html>

margin 塌陷bug

父子結構盒子，垂直方向上，父級margin-top與子級margin-top取最大值。

如果父級margin-top較大，子級margin-top將失去效果。

如果父級margin-top較小，子級將和父級一起使用margin-top最大值

<!DOCTYPE html>

<head>

<title>Document</title>

.wrapper{

width: 100px;

height: 100px;

margin-top: 100px;

解決方案3種；

1、overflow: hidden;

2、position: absolute;

3、display: inline-block; */

}

.content{

width: 50px;

height: 50px;

margin-top: 170px;

background-color: blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

彌補方案：

1、給父級加上overflow: hidden;

2、給父級加上position: absolute;

3、給父級加上display: inline-block;

margin 合并bug

兄弟盒子，margin-top不能實現累加。

<!DOCTYPE html>

<head>

<title>Document</title>

.demo1{

background: red;

height: 10px;

margin-bottom: 100px;

}

.demo2{

background: green;

height: 10px;

margin-top: 100px;

}

.wrapper{

overflow: hidden;

}

</style>

</head>

<body>

<!-- 解決方案：加一層包裹

</div>

</div> -->

</body>

</html>

解決方案：加一層wrapper.(開發中一般不解決。)

浮動：

只有塊級元素看不到浮動元素。當塊級元素變成bfc元素時，可以看到浮動元素。

塊級元素變成bfc元素三種方式：

1、overflow: hidden;

2、position: absolute;

3、display: inline-block;

如何清除浮動流。

1、父級元素變成bfc元素

2、父級使用偽元素::after{content: "";clear: both;display: block;}

*使用position 和 float 元素自動變成inline-block。

單行文本溢出部分打點顯示

white-space: nowrap;

overflow: hidden;

text-overflow:ellipsis;

<!DOCTYPE html>

<head>

<title>Document</title>

width: 200px;

border: 1px solid #000;

/* 三件套 */

white-space: nowrap;

overflow: hidden;

text-overflow:ellipsis;

}

</style>

</head>

<body>

<p>打電話帶大客戶的卡大號帶畫uu的哈互貸的</p>

</body>

</html>

多行文本溢出：只做截斷不做打點。

文字對齊方式

當一個行級塊元素后面加一段文字，文字與行級塊元素底對齊。當行級塊元素內部有文字時，外面文字與內部文字底對齊。

轉載于:https://www.cnblogs.com/2016-zck/p/9694844.html

總結

以上是生活随笔為你收集整理的CSS进阶学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
进阶