Html，CSS和盒子

時間 2020-08-06

標籤 html css 盒子欄目 HTML 简体版

原文原文鏈接

Html指超文本標記語言（HyperText Markup Language）是一種用於建立網頁的標準標記語言。css

CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示 HTML 元素。html

打個比方，房子牆和柱的結構就是Html，CSS表明你的裝修風格。web

網頁的全部元素都是由盒子組成，盒子都是矩形方框。chrome

盒子模型：瀏覽器

margin外邊距,padding內邊距，boder是邊界。網絡

下圖，當你按下F12,點擊元素h2(標題二的意思)，就出現了一個方框。測試

那麼圓形是如何實現的呢？網站

當你關閉Styles裏的border-radius:50%是這樣的：spa

因此網站上的一切實際上都是方框。firefox

html的格式:

<!DOCTYPE html> <!-- 網絡上有不少不一樣的文件,<!DOCTYPE>聲明有助於瀏覽器中正確顯示網頁, -->
<html>
<head> <!--<head> 元素包含了全部的頭部標籤元素. 能夠添加在頭部區域的元素標籤爲: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.-->
 <title>文檔標題</title>
</head>
<body> 可見文本... <!-- <body> 元素定義了 HTML 文檔的主體。 -->
</body>
</html>




例子:Android端firefox已測試，Android端chrome不能打開本地資源，圖片沒法顯示，

html:

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 適配中文-->
 <title>Pictures</title> <!-- 網頁的標題-->
 <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- 指定了css文件-->
</head>
<body>
 <div class="image">
 <p>Sunset</p>
 <img src="css/sunset-sd_2.png">
 <p>Skyline</p>
 <img src="css/zurich.png">
 </div>
</body>
</html>



style.css:

* {
    box-sizing: border-box;
 -ms-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

body div{
 max-width: 100%;
}

.image img{
 display:block;;
 margin: auto;
 max-width: 100%;
}

p{
 text-align: center;
}


效果圖：

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。