-
1、給子元素設置flex屬性,可以設置子元素相對于父元素的占比。
2、flex屬性的值只能是正整數(shù),表示占比多少。
3、給子元素設置了flex之后,其寬度屬性會失效。
查看全部 -
align-items: flex-start | flex-end | center | baseline | stretch;
豎直方向
flex-start：默認值，左對齊
flex-end：交叉軸的終點對齊
center： 交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
查看全部 -
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start：左對齊。
flex-end：右對齊。
center： 居中。
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
查看全部 -
1、設置display: flex屬性可以把塊級元素在一排顯示。
2、flex需要添加在父元素上，改變子元素的排列順序。
3、默認為從左往右依次排列,且和父元素左邊沒有間隙。
查看全部 -
流動布局模型(Flow)具有2個比較典型的特征：
第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據(jù)位置。如右側代碼編輯器中三個塊狀元素標簽(div，h1，p)寬度顯示為100%。第二點，在流動模型下，內聯(lián)元素都會在所處的包含元素內從左到右水平分布顯示。（內聯(lián)元素可不像塊狀元素這么霸道獨占一行）
浮動模型
float:left;
float:right;
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
查看全部 -
一個元素實際寬度（盒子的寬度）=左邊界(margin)
+左邊框(border)+左填充(padding)+內容寬度+右填充(padding)+右邊框(border)+右邊界(margin)。查看全部 -
display: none;
none設置此元素不會被顯示，當想要元素隱藏的時候可以使用此值。
查看全部 -
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內聯(lián)元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯(lián)塊狀元素有：
<img>、<input>
塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
display:block就是將元素顯示為塊級元素。
內聯(lián)元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
display:inline將元素設置為內聯(lián)元素。
inline-block 元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
display:inline-block就是將元素設置為內聯(lián)塊狀元素。
查看全部 -
選擇器的優(yōu)先級依次是: 內聯(lián)樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器
查看全部 -
總結：>作用于元素的第一代后代，空格作用于元素的所有后代。
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>css3選擇器優(yōu)先級</title>
? ? <style type="text/css">
? ? ? ? /* 選擇器的優(yōu)先級依次是: 內聯(lián)樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器 */
? ? ? ? /* 選擇器: id選擇器 */
? ? ? ? #id_box {
? ? ? ? ? ? color: red;
? ? ? ? ? ? font-size: 20px;
? ? ? ? }
? ? ? ? /* 選擇器: 類選擇器 */
? ? ? ? .cls {
? ? ? ? ? ? color: blue;
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? /* 選擇器: 標簽選擇器 */
? ? ? ? div {
? ? ? ? ? ? color: black;
? ? ? ? ? ? font-size: 40px;
? ? ? ? }
? ? ? ? /* 選擇器: 通用符選擇器 */
? ? ? ? * {
? ? ? ? ? ? color: yellow;
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="id_box" class="cls" >
? ? ? ? 我是一個div
? ? </div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>文本域</title>
</head>
<body>
? ? <form>
? ? ? ? <lable>聯(lián)系我們</lable>
? ? ? ? <br />
? ? ? ? <textarea cols="50" rows=10>在這里輸入內容...</textarea>
? ? </form>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>表單標簽</title>
</head>
<body>
? ? <!-- 6-1 使用表單標簽，與用戶交互 - 使用<form>創(chuàng)建表單
? ? ? ? method ： 數(shù)據(jù)傳送的方式（get/post）
? ? ? ? action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php)。? ??
? ? ? ? 所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在 <form></form> 標簽之間
? ? ? ? （否則用戶輸入的信息可提交不到服務器上哦！）
? ? -->
? ? <form method="post">
? ? ? ? <label for="username">用戶名:</label>
? ? ? ? <input type="text" name="username" id="username" value="" />
? ? ? ? <label for="pass">密碼:</label>
? ? ? ? <input type="password" name="pass" id="pass" value="" />
? ? ? ? <input type="submit" value="確定" name="submit" />
? ? ? ? <input type="reset" value="重置" name="reset" />
? ? </form>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>使用thead、tbody、tfoot標簽</title>
</head>
<body>
? ? <table border="1">
? ? ? ? <!--?
? ? ? ? ? ? 如果不加 thead、tbody、tfoot 那么table表格加載完才顯示
? ? ? ? ? ? 加上這些表結構，tbody包含的內容下載完優(yōu)先顯示，不必等表格結束后才顯示。
? ? ? ? ? ? 如果表格很長用tbody可以分段，可以一部分一部分地顯示。即可按結構一塊一塊的顯示。
? ? ? ? -->
? ? ? ? <!-- thead 標簽：表示表格的頭部 -->
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>科目</th>
? ? ? ? ? ? ? ? <th>分數(shù)</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <!-- tbody 標簽：表示表格的內容 -->
? ? ? ? <tbody>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>語文</th>
? ? ? ? ? ? ? ? <td>99</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>數(shù)學</th>
? ? ? ? ? ? ? ? <td>60</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? ? <!-- tfoot 標簽：表示表格的頁腳 -->
? ? ? ? <tfoot>??
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>總分</th>
? ? ? ? ? ? ? ? <td>159</td>
? ? ? ? ? ? </tr>
? ? ? ? </tfoot>??
? ? </table>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>學習表格標簽</title>
</head>
<body>
? ?
<!-- border 屬性：給表格加上邊框，不添加border屬性則沒有表格線 -->
? ? <table border="1">
? ? ? ? <!-- caption 表格標題標簽 -->
? ? ? ? <caption>前端三劍客</caption>
? ? ? ? <!-- tr：表示一行，tr標簽用來設置表格的行，tr里面只能放th或者td標簽 -->
? ? ? ? <tr>
? ? ? ? ? ? <!-- th：頭部單元格，表示一列，字體有加粗效果，tr里面有多少個td\th則代表一行有多少列 -->
? ? ? ? ? ? <th>知識點</th>
? ? ? ? ? ? <th>重要程度</th>
? ? ? ? ? ? <th>難度</th>
? ? ? ? ? ? <th>學習周期</th>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <!-- td：表示一列，tr里面有多少個td則代表一行有多少列 -->
? ? ? ? ? ? <td>html</td>
? ? ? ? ? ? <td>5星</td>
? ? ? ? ? ? <td>3星</td>
? ? ? ? ? ? <td>7天</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>css</td>
? ? ? ? ? ? <td>5星</td>
? ? ? ? ? ? <td>4星</td>
? ? ? ? ? ? <td>10天</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>js</td>
? ? ? ? ? ? <td>5星</td>
? ? ? ? ? ? <td>5星</td>
? ? ? ? ? ? <td>20天</td>
? ? ? ? </tr>
? ? </table>
</body>
</html>
查看全部
舉報