html與css的那些雜事兒
-
- css屬性
-
- flex布局
- 2d轉換子產品
- 動畫子產品
- 過渡子產品
- 定位
- css選擇器
- 僞類、僞元素
- html标簽
-
- 塊級和行級元素
- name、class和id
- 處理斷句和空白
- opacity、visibility、display:none的差別
- inline-block不能margin 0 auto
- 兩行 省略号
- 一行 省略号
- 清除浮動
- 其他
css屬性
-
outline
-
font: font-style | font-variant | font-weight | font-size | font-family
-
cursor
屬性規定要顯示的光标的類型（形狀）
光标w3c
-
background
-
background-color | background-image | background-repeat | background-attachment | background-position
-
background-size
-
background-origin
-
background-clip
- 可以設定多張背景圖檔，以逗号隔開
-
-
box-sizing
- 屬性允許您以特定的方式定義比對某個區域的特定元素
- content-box（預設）
-
border-box
- 為元素指定的任何内邊距和邊框都将在已設定的寬度和高度内進行繪制。
- 通過從已設定的寬度和高度分别減去邊框和内邊距才能得到内容的寬度和高度。
flex布局
- 要沿主軸對齊彈性項目，有一個屬性：
justify-content
- 要沿十字軸對齊彈性項目，需要三個屬性：
align-content
align-items
align-self
2d轉換子產品
1.
transform
- 旋轉 rotate（45deg）
- rotateX/Y/Z
- 平移 translate:（100px，50px）
- 縮放 scale（1.5，1.5）
- 空格隔開
-
transform-origin
- 透視
prospective: 100px
- 距離多遠觀察元素
- 添加到父元素上
- 陰影
-
box-shadow
- 元素陰影（順序）
- 水準偏移 垂直偏移 模糊度 陰影擴充 陰影顔色（預設和内容顔色color一樣） 内外陰影
- 1px 1px 1px 1px red inside
- 文字陰影
- 水準 垂直 模糊度 顔色
-
動畫子產品
-
animate
-
animate-name
-
animate-duration
-
@keyframes
-
animate-delay
-
animate-time-function
-
animate-direction
-
animate-iteration-count
-
animate-play-state
-
animate-fill-mode
過渡子產品
-
transition:width 5s linear 5s
不同屬性逗号隔開
可以簡寫兩個
-
transition-property:width，color
哪個屬性執行過渡子產品
-
transition-duration:5s，5s
持續時長
- transition-timing-function
- linear
- ease
- ease-in
- ease-out
- ease-in-out
-
transition-delay:2s
延遲
定位
-
absolute
- 在相同位置，同樣定位，哪個元素dom位置靠後，哪個元素在上面
- 如果top和bottom一同存在的話，那麼隻有top生效。 如果left和right一同存在的話，那麼隻有left生效。
- 忽略父元素的padding，從内邊框開始定位
- 不區分行級塊級元素
- 會找離元素 最近的 也是定位流（相對定位 絕對定位……）祖先元素作為參考點
-
水準居中:
left:50％
margin—left:（負的寬度一半）
2.
relative
- 上下方向隻能用一個，左右方向隻能用一個
- 區分行級塊級元素
-
fixed
- 脫離文檔流
- 子絕父相
- z—index
- 子元素聽父元素，父元素設定子元素失效
- 隻對定位流有效（position）
- z-index:0 的會建立一個新的層疊上下文，auto不會
- z-index:auto所在的div元素是一個普通定位元素，于是他們的子級層疊比較就不受父級影響
- z-index一旦變成數值，哪怕是0，就會建立一個層疊上下文，此時層疊規則就發生了變化，層疊上下文是自成體系的，當元素發生層疊的時候，整個元素被認為是在父層疊上下文的層疊順序中
影響層疊上下文的除了定位還有：
- 元素為flex布局元素（父元素display:flex|inline-flex），同時z-index值不為auto
- 元素的opacity值不是1
- 元素transform值不是none
- 元素的filter值不是none
stacking context 層疊上下文
css選擇器
- 行内樣式>内嵌樣式
- style标簽>id>class
僞類、僞元素
- 加上display: block;将僞元素變成塊級元素才能設定寬高
- 單冒号(:)用于 CSS3 僞類，雙冒号(::)用于 CSS3 僞元素
- 僞元素
- 是對元素中的特定内容進行操作，而不是描述狀态
-
:first-letter
-
:first-line
-
:before
-
:after
-
- 僞類包含兩種：狀态僞類和結構性僞類
- 狀态僞類
- a标簽的僞類選擇器（有順序）
-
:link
-
:visited
-
:hover
-
:active
-
:focus
-
- a标簽的僞類選擇器（有順序）
- 結構性僞類
-
:first-child
-
:last-child
-
:nth-child()
-
:nth-child(n)
-
:nth-last-child()
-
:nth-of-type()
-
:nth-last-of-type()
-
:first-of-type
-
:last-of-type
-
:only-child
-
:only-of-type
-
:empty
-
- 是對元素中的特定内容進行操作，而不是描述狀态
html标簽
-
<form>
-
target
規定在何處打開 action URL。
值：_blank _self _parent _top framename
-
accept-charset
規定伺服器可處理的表單資料字元集。
-
enctype
規定在發送表單資料之前如何對其進行編碼。
可能的值：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
-
method
規定用于發送 form-data 的 HTTP 方法。
-
novalidate
如果使用該屬性，則送出表單時不進行驗證。
值： novalidate
-
-
<fieldset>
- 組合表單中的相關元素：
<legend>
- 組合表單中的相關元素：
-
<label>
-
<label>
- label 元素不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。
- 如果您在 label 元素内點選文本，就會觸發此控件。就是說，當使用者選擇該标簽時，浏覽器就會自動将焦點轉到和标簽相關的表單控件上。
-
<label>
-
塊級和行級元素
- 塊級元素:
- ul li form p pre section
- 能寬高
- margin padding上下左右都有效
- 自動換行
- 多個塊級，預設從上到下排列
- 行内元素
- a span
- 寬高無效
- 不自動換行
- margin左右有效，上下無效，padding上下左右都有效
- 不會自動換行
- 行内塊級元素 （inline—block）
- img input button textarea
- 相容性:*zoom＝1 （ie6）
- position: absolute /float 行内元素可以設定寬高
name、class和id
- name：指定标簽的名稱。
- 作用
- name 屬性用于對送出到伺服器後的表單資料進行辨別，或者在用戶端通過 JavaScript 引用表單資料。
- 作為轉遞給伺服器表單清單的變量名；如上面的傳到伺服器的名稱為：username=‘text的值’
- input type='radio’單選标簽：把幾個單選标簽的 name設為一個相同值時，将會進行單選操作。
- js中快速擷取一組name相同的标簽：擷取擁有相同name的标簽，一起進行操作，如:更改屬性、注冊事件等
- 隻有設定了 name 屬性的表單元素才能在送出表單時傳遞它們的值。
- id：指定标簽的唯一辨別
- 根據提供的唯一id号，快速擷取标簽對象。如：document.getElementById(id)
- 用于充當label标簽for屬性的值：示例：
<label for='userid'>使用者名：</label>
- class：指定标簽的類名。
- CSS操作，把一些特定樣式放到一個class類中，需要此樣式的标簽，可以在添加此類
處理斷句和空白
-
white-space
屬性設定如何處理元素内的空白
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
- normal預設。空白會被浏覽器忽略。
- pre 空白會被浏覽器保留。其行為方式類似 HTML 中的 pre 标簽。
- nowrap文本不會換行，文本會在在同一行上繼續，直到遇到 br 标簽為止。
- pre-wrap 保留白白符序列，但是正常地進行換行。
- pre-line 合并空白符序列，但是保留換行符。
- inherit 規定應該從父元素繼承 white-space 屬性的值。
-
word-wrap
屬性用來标明是否允許浏覽器在單詞内進行斷句
word-wrap: normal|break-word;
- normal: 隻在允許的斷字點換行(浏覽器保持預設處理)
- break-word:在長單詞或URL位址内部進行換行，/内容将在邊界内換行。如果需要，單詞内部允許斷行。/
-
word-break
屬性用來标明怎麼樣進行單詞内的斷句
word-break: normal|break-all|keep-all;
- normal：使用浏覽器預設的換行規則。
- break-all:允許在單詞内換行 ， 允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。
- keep-all:隻能在半角空格或連字元處換行，不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行，隻能在半角空格或連字元處換行。非CJK文本的行為實際上和normal一緻。
opacity、visibility、display:none的差別
- opacity、visibility 将元素隐藏，但是在網頁中該占的位置還是占着
- visibility、display 不能觸發事件
inline-block不能margin 0 auto
auto是基于總寬度-已知固定寬度獲得取值的，
inline-block元素水準方向的7大屬性沒有總寬度的限制，
是以margin設定為auto時，不知道如何取值，是以預設為0，于是便沒有起到我們想要的居中的效果。
這7大屬性的值加起來必須是元素包含塊的寬度，這裡我們假設其他屬性均為0，那也就是margin-left + width + margin-right = 包含塊的寬度。
是以：
對于塊級元素，當width固定後，margin就能通過margin = (包含塊的寬度 - width )/2獲得取值
而對于inline-block元素（包含行内替換元素比如img等），内容的寬度就是最終的寬度，沒有margin-left + width + margin-right = 包含塊的寬度這一限制，是以當margin被設定為auto時，它并不知道要取什麼值，就預設為0了，這和為什麼垂直方向上不能設定auto是一樣的道理。
兩行 省略号
為了autoprefixer不會删除過時的樣式
{
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical; /* 垂直排列 */
/* autoprefixer: on */
word-break: break-all; /* 内容自動換行 */
}
一行 省略号
{
display:block;//inline-block
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
清除浮動
- 添加clear:both
- 觸發BFC
-
使用鄰接元素處理
給浮動元素後面的元素添加clear屬性。
- 使用帶clear屬性的空元素
.clear {
clear: both;
}
-
使用CSS的overflow屬性
浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動
- 使用CSS的:after僞元素
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
- 浮動會盡可能呈現元素而不是疊加覆寫
其他
- button、input、select、textarea這些标簽内部的字型不會繼承父級的字型
-
calc() 函數用于動态計算長度值。
需要注意的是，運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)