1、不正交主要表現在兩點
- 各屬性之間互相影響
- margin 與 border
- 小園點 與 display
- position: absolute V.S. display: inline
- 各元素之間互相影響
- position: fixed V.S. transform
- float 影響 inline 元素
2、CSS 3 Generator
3、文字溢出省略
單行
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden; 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden; 4、文本對齊
<span>姓名</span>
<br>
<span>聯系方式</span> span{
border: 1px solid green;
display: inline-block;
text-align: justify;
line-height: 20px;
width: 5em;
}
span::after{
content: '';
display: inline-block;
width: 100%;
} 5、文字垂直居中
line-height: 20px;
padding: 8px 0; display: flex;
justify-content: center;
align-items: center; 6、一比一的div
div{
border: 1px solid red;
padding-top: 100%;
} 7、堆疊上下文
堆疊順序
- z-index: -
- background
- border
- 塊級
- 浮動
- 内聯
- z-index: 0
-
z-index: +
如果是兄弟元素重疊，那麼後面的蓋在前面的身上。
下面觸發新的堆疊作用域
- 根元素 (HTML)
- z-index 值不為"auto"的 絕對/相對定位，
- 一個 z-index 值不為"auto”的flex 項目(flex item)，即：父元素 display: flex | inline-flex.
- opacity 屬性值小于1的元素
- transform 屬性值不為"none"的元素，
- mix-blend-mode 屬性值不為"normal的元素，
- filter值不為"none"的元素，
- perspective值不為"none"的元素
- isolation 屬性被設定為 “isolate"的元素
- position: fixed
- 在will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值
- webkit-overtilow-scrolling 屬性被設定 "touch"的元素
8、icon 的各種做法
-
img 做法
标簽
-
background 做法
background: red url(./xxx.png) no-repeat 0 0;
background-image: url(./xxx.png);
-
font 做法
第一步：拷貝項目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf?t=1660807256345') format('truetype');
} 第二步：定義使用 iconfont 的樣式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} 第三步：挑選相應圖示并擷取字型編碼，應用于頁面
<span class="iconfont">3</span> -
CSS Icon
https://cssicon.space/#/icon/focus
9、靜态伺服器
npm i -g http-server
http-server -c-1
10、布局套路
原則
- 不到萬不得已，不要寫死width 和height
- 盡量用進階文法，如 calc、flex
- 如果是IE，就全部寫死
口訣
- float
- 兒子全加float: left ( right)
- 老子加.clearfix
- flex
- 老子加 display: flex
- 老子加justify-content: space-between;
如果寬度不夠，可以用 margin: 0-4px;
.clearfix::after{
content:''
display:block;
clear: both;
}
.clearfix{
zoom:1:
} .p{
width: 400px;
height: 200px;
background-color: red;
}
.c {
float:left;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: green;
border: 1px solid blue;
}
.p{
width: 400px;
height: 200px;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.c {
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: green;
border: 1px solid blue;
} 11、BFC
CSS規範中對BFC的描述
塊格式化上下文
浮動，絕對定位元素,非塊盒的塊容器(例如,inline-blocks, table-cells和table-captions ) 和’overflow’不為’visible’的塊盒會為它們的内容建立一個新的塊格式化上下文
在一個塊格式化上下文中,盒在豎直方向一個接一個地放置,從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由’margin’屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并
在一個塊格式化上下文中,每個盒的left外邊( left outer edge )挨着包含塊的left邊(對于從右向左的格式化,right邊挨着)。即使存在浮動(盡管一個盒的行盒可能會因為浮動收縮),這也成立。除非該盒建立了一個新的塊格式化上下文(這種情況下,該盒自身可能會因為浮動變窄)标記為已完成
MDN 對BFC的描述
一個塊格式化上下文(block formatting context)是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現的區域,也是浮動層元素進行互動的區域。
一個塊格式化上下文由以下之一建立:
根元素或其它包含它的元素
浮動元素(元素的float 不是none)
絕對定位元素(元素具有position 為 absolute 或 fixed)
内聯塊(元素具有 display: inline-block)
表格單元格(元素具有 display: table-cell , HTML表格單元格預設屬性)
表格标題(元素具有display: table-caption, HTML表格标題預設屬性)
具有overflow 且值不是visible 的塊元素
display: flow-root
column-span: all 應當總是會建立一個新的格式化上下文,即便具有 column-span: all的元素并不被包裹在一個多列容器中。
一個塊格式化上下文包括建立它的元素内部所有内容,除了被包含于建立新的塊級格式化上下文的後代元素内的元素。
塊格式化上下文對于定位(參見float)與清除浮動(參見clear)很重要。定位和清除浮動的樣式規則隻适用于處于同一塊格式化上下文内的元素。浮動不會影響其它塊格式化上下文中元素的布局,并且清除浮動隻能清除同一塊格式化上下文中在它前面的元素的浮動。
12、REM
<script>var pageWidth = window.innerWidth;
document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')</script>
<body>
<div class='p'>
<div class='c'>40%</div>
<div class='c'>40%</div>
<div class='c'>40%</div>
<div class='c'>40%</div>
</div>
</body> *{
margin: 0;
padding: 0;
}
body{
font-size: 16px;
}
.c{
background-color: green;
float: left;
width: 0.4rem;
height: 0.4rem;
margin: 0.05rem 0.05rem;
text-align: center;
} ![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)