CSS基礎(chǔ)記錄

Flex

flex和inline-flex

/* 
    flex        寬度默認(rèn)100%
    inline-flex 根據(jù)子元素自適應(yīng)
*/
display: flex | inline-flex

flex-direction

flex-direction: row(default) | row-reverse | column | column-reverse

flex-wrap

/*
    wrap         與flex-direction方向相同
    wrap-reverse 與flex-direction方向相相反(左下開始)
*/
flex-wrap: nowrap(default) | wrap | wrap-reverse

flex-flow

flex-flow: <flex-direction> || <flex-wrap>

justify-content

/*
    space-between 兩端對齊厂镇，中間間隔相等
    space-around  每個(gè)塊兩側(cè)相等纤壁，類似padding
*/
justify-content: flex-start(default) | flex-end | center | space-between | space-around

align-items

/*
    ** 多行對齊方式 **
    baseline 項(xiàng)目的第一行文字的基線對齊
    stretch  如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將拉長占滿整個(gè)容器的高度
*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch(default)

項(xiàng)目屬性

/*
    ** 多行對齊方式 **
    order       排列順序捺信，值越小越靠前（可相同酌媒，可負(fù)數(shù)）
    flex-grow   項(xiàng)目放大比例 默認(rèn)0 box按照值大小等分
    flex-shrink 項(xiàng)目縮小比例 默認(rèn)1 若為0則此項(xiàng)不縮小（無負(fù)數(shù)）
    flex-basis  沒有則auto為width 超出自動(dòng)shrink 受maxminwidth影響                     見http://www.reibang.com/p/17b1b445ecd4
    flex        grow, shrink, basis的簡寫 (默認(rèn)0 1 auto)
    align-self  單個(gè)項(xiàng)目與其他不一樣的對齊方式，覆蓋align-items
*/
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto(default) | flex-start | flex-end | center | baseline | stretch

CSS選擇器系列

基本選擇器

選擇器	含義
*	通配符選擇器
#id	id選擇器
.class	類選擇器
a[href="a.com"]	屬性選擇器
:hover	偽類選擇器
tag	標(biāo)簽選擇器
::before	偽元素選擇器

組合選擇器

選擇器	含義
AB	AB同時(shí)具有
A, B	A或 / 和B
A B	B是A的后代元素
A > B	B是A的直接子元素
A + B	B是A的后一個(gè)
A ~ B	B是A的后N個(gè)

優(yōu)先級

內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器

!import高于內(nèi)聯(lián)選擇器

優(yōu)先級是由 A 秒咨、B喇辽、C、D 的值來決定的雨席，其中它們的值計(jì)算規(guī)則如下：

如果存在內(nèi)聯(lián)樣式菩咨，那么 A = 1, 否則 A = 0;

B 的值等于 ID選擇器 出現(xiàn)的次數(shù);

C 的值等于 類選擇器 和 屬性選擇器 和 偽類 出現(xiàn)的總次數(shù);

D 的值等于 標(biāo)簽選擇器 和 偽元素 出現(xiàn)的總次數(shù)

比較規(guī)則是: 從左往右依次進(jìn)行比較，較大者勝出陡厘，如果相等抽米，則繼續(xù)往右移動(dòng)一位進(jìn)行比較。如果4位全部相等雏亚，則后面的會(huì)覆蓋前面的

偽類缨硝，偽元素

選擇器	含義
a:link	匹配所有未被點(diǎn)擊的鏈接
a:visited	匹配所有已被點(diǎn)擊的鏈接
a:hover	匹配鼠標(biāo)懸停其上的a元素
a:active	匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的a元素
li:first-child	匹配父元素的第一個(gè)子元素li
li:last-child	匹配父元素的最后一個(gè)子元素li
li:nth-child(n)	匹配父元素的第n個(gè)子元素li（odd奇數(shù)罢低，even偶數(shù)）

E::before	在E元素內(nèi)創(chuàng)建一個(gè)子元素，插入生成的內(nèi)容作為偽元素胖笛，放在最前面
E::after	在E元素內(nèi)創(chuàng)建一個(gè)子元素网持，插入生成的內(nèi)容作為偽元素，放在最后面
E::selection	應(yīng)用于文檔中被用戶高亮的部分（比如使用鼠標(biāo)選中的部分）
E::first-letter	匹配E元素的第一個(gè)字母/第一行的第一個(gè)字母
E::first-line	匹配E元素的第一行

https://www.itcodemonkey.com/article/2853.html CSS基礎(chǔ)題

問答

CSS 有哪些樣式可以給子元素繼承

可繼承的:font-size,font-weight,line-height,color,cursor等
不可繼承的一般是會(huì)改變盒子模型的:display,margin长踊、border功舀、padding、height等

行內(nèi)元素有哪些身弊？塊級元素有哪些辟汰？空(void)元素有那些？

行內(nèi): input,span,a,img以及display:inline的元素
塊級: p,div,header,footer,aside,article,ul以及display:block這些
void: br, hr

CSS3實(shí)現(xiàn)一個(gè)扇形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扇形</title>
    <style>
        .sector {
          width: 0;
          height: 0;
          border: 50px solid transparent;
          border-left-width: 20px;
          border-right-width: 20px;
          border-top-color: red;
          border-radius: 20px;
        }
</style>
</head>
<body>
    <div class="sector"></div>
</body>

</html>

盒模型

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

padding-box：（已從規(guī)范中移除）width包括內(nèi)容和padding

border-box：即便設(shè)置了padding或border也不會(huì)改變元素的寬度和高度

content-box：會(huì)改變（標(biāo)準(zhǔn)盒模型）

inherit：使元素繼承父級的box-sizing規(guī)則

低版本IE默認(rèn)使用怪異模式阱佛，即border-box

清除浮動(dòng)

僅在float布局需要（可以考慮使用flex布局）

偽類添加clear: both;（閉合浮動(dòng)）

在父元素后添加內(nèi)容content帖汞，清除浮動(dòng)

.clearfix{}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

BFC（block formatting context）

1.通常的做法是設(shè)置父元素 overflow: auto 或者設(shè)置其他的非默認(rèn)的 overflow: visible 的值

當(dāng)你使用這個(gè)屬性只是為了創(chuàng)建BFC的時(shí)候，你可能會(huì)發(fā)現(xiàn)一些不想要的問題凑术，比如滾動(dòng)條或者一些剪切的陰影翩蘸，需要注意。另外淮逊，對于后續(xù)的開發(fā)催首，可能不是很清楚當(dāng)時(shí)為什么使用overflow。所以你最好添加一些注釋來解釋為什么這樣做

2.display: flow-root

創(chuàng)建無副作用的BFC泄鹏。在父級塊中使用 display: flow-root 可以創(chuàng)建新的BFC

animate如何停留最后一幀

animation-fill-mode: forwards;
<!--backwards則停留在首幀,both是輪流-->

水平垂直居中的方法

水平居中
1.定寬塊級

.center{
    width:200px;
    margin:0 auto;
}

2.不定寬塊級

.center {
    display:table;
    margin:0 auto;
}
.center {
    text-align:center;
    .child {
        display:inline-block;
    }
}
.center {
    display:flex;
    justify-content:center;
}

垂直居中
1.單行文本

.center {
    padding-top: x
    padding-bottom: x
}
.center {
    height: x
    line-height: x
}

2.多行文本

.center {
    diaplay:table;
    .child {
        display:table-cell;
        verticle-align:middle;
    }
}

3.塊級元素
flex

.center {
    display: flex;
    align-items: center;
}

position+transform

.center {
    width
    height
    position:relative;
    .child {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%)
    }
}

寬高比

.box {
  background: #333;
  width: 50%;
}
.box::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.box::after {
  content: '';
  display: block;
  clear: both;
}

padding-top: 100%; 設(shè)置偽元素的內(nèi)上邊距郎任，這里的百分比的值是按照寬度計(jì)算的，所以會(huì)呈現(xiàn)為一個(gè)響應(yīng)式的元素塊备籽。
此方法還允許將內(nèi)容正常放置在元素內(nèi)舶治。