HTML和CSS —— 2（練習）
阿新 • • 發佈：2018-12-26
Code：
xxx.html
<!DOCTYPE html>
<!-- saved from url=(0079)https://storage.googleapis.com/supplemental_media/udacityu/2872198565/test.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Framework Test page</title>
<link main.css:
/*
box-sizing三個值：content-box（default），border-box，padding-box。
1.content-box：padding 和 border 的大小都不算進width中
2.padding-box: padding大小算進width中，但border大小不算進width中;
3.border-box : border 和 padding 的大小都算進 width 中;
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.flex-container {
}
.grid {
}
div {
border:1px solid red;
display: block;
}
/*
display: flex 彈性佈局，它就像是一個容器，它裡面的元素都屬於這個容器裡面了。
可以填充多餘的空間。
相容性：目前支援IE10+，Firefox 18.0+，chrome21.0+，Safari6.1+
解決方案，使用flexibility來解決。
git：https://github.com/jonathantneal/flexibility
*/
.row {
-js-display: flex;
display: flex;
width: 100%;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 24.99%;
}
.col-4 {
width: 33.32%;
}
.col-5 {
width: 41.65%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.31%;
}
.col-8 {
width: 66.64%;
}
.col-9 {
width: 74.97%;
}
.col-10 {
width: 83.3%;
}
.col-11 {
width: 91.63%;
}
.col-12 {
width: 100%;
}
/*
媒體查詢，以@media開頭
關鍵字only相容老式瀏覽器
screen表示適用於所有型別的螢幕，平板，手機，桌上型電腦
print 列印頁面時的樣式
max-width 最大寬度
min-width 最小寬度
orientation 兩個值，1.landscape橫屏 2.portrait豎屏
*/
@media only screen and (max-width:500px) {
p {
display: none;
}
}
/* @media only screen and (max-width:500px) and (orientation : landscape) {
p {
display: none;
}
} */
/* @media only screen and (min-width:500px) {
p {
display: none;
}
} */
/* @media only print and (max-width:500px) {
p {
display: none;
}
} */總結：
1.flexibility解決彈性盒子佈局相容問題;
2.媒體查詢（螢幕尺寸問題）
3.12等份;
4.box-sizing（padding,border大小算不算入width中）