html,css

佛曰小希希發表於2020-10-12
HTMLCSS

1.1、flex佈局

flex佈局就是彈性佈局，他的所有子容器會自動成為容器成員。felx佈局有六個容器屬性，flex-direction來設定專案的排列方向和順序，flex-wrap來控制是否可以換行，flex-flow是flex-direction和flex-wrap屬性的簡寫形式；justify-content是用來設定主軸上的對齊方式，align-item是用來設定交叉軸的對齊方式，align-content是用來定義多根軸線的對齊方式。還有六個項屬性，order決定排列順序，flex-grow決定放大比例，flex-shrink決定縮小比例，flex-basic在分配多餘空間之前，專案所佔的比例，flex是前面三個的縮寫，還有一個align-self不常用

1.2、垂直水平居中

四種方法

  1. 利用table，table-cell來將其設定為單元格來實現水平垂直居中
  2. 利用flex佈局中的align-item，justity-content屬性
  3. 利用position和transform
  4. 利用偽元素實現居中：在父元素上設定::before偽元素

1.3、清除浮動

  1. 給父元素新增overflow：hidden
  2. 在最後一個元素後面新增一個額外的標籤，並設定clear：both
  3. 利用單偽元素清除浮動：
.clearfix:before{
content：'';
display:block;
height:0;
clear:both;
visibility:hidden
}
  1. 雙偽元素清除浮動
.clearfix:before,,clearfix:after{
content:'';
display:table
}
.clear:after{
clear:both

1.4、BFC

1.5、三欄佈局

1.6、動畫

1.7、盒模型

1.8、h5,css3新特性

1.9、css的盒子模型

從下面三個部分做答：

  • css盒子模型的概念
  • css盒子模型的組成
  • css盒子模型的分類
    概念：每個元素都佔有一定的空間，都可以看作是盒子模型
    組成：由四個部分組成，content，padding，border，margin
    分類:在談到分類的時候，我們需要先了解一個屬性，border-sizing，他的取值有兩種，content-box和border-box，其中content-box是W3C標準盒子模型，他的width只包括content，不包括padding，border，margin，其子元素可以撐開父元素，大小隨著內容的變化而變化；content-box是ie盒子模型，他的width包括content，padding，border，和margin，其子元素不能撐開父元素，大小不能隨著內容的變化而變化。

相關文章