- absolute position和relative position:
https://css-tricks.com/absolute-positioning-inside-relative-positioning/ - 強制刷新controller:
在定義的時候：
.state('editBio',
{ url: '/edititBio',
cache:'false',
})
-
Text-overflow ellipsis on right side 省略多余的部分，...
MDN連接: https://developer.mozilla.org/en/docs/Web/CSS/text-overflow
#div2 {
float: left;
width: 85%;
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
font-size:41px;
height: 45px;
overflow: hidden;
}
This is some long text that will not...
1 . img span
<span>
<img src="" style="width:10px;height:10px;margin-right:10px">
<span style="display: inline-block;word-wrap: break-word;width: 92%;
vertical-align: top;"> //這個決定了左邊圖片的位置：top/middle/bottom
</span>
</span>
2 . HTML/CSS: Making two floating divs the same height讓兩個浮動的div有高度相同
You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.
您可以通過應用大量的底部填充，相同量的底部負邊距和包圍溢出隱藏的div的列來獲得CSS中的相等高度列。垂直居中的文本有點棘手，但這應該幫助你的路上。
3 .Expand Parent Div To Child Height
1.
Div內的文字自動換行
word-wrap:break-word;
word-break:break-all;
div高度隨著外部元素變化
display:block;
overflow:auto;
Disable vertical scroll bar on div overflow: auto
overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
兩個div挨著
<div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:left;width:200px">右</div>
</div>
2.背景色透明度
background:rgba(28,54,73,0.8);
前三個變量決定顏色，最后一個變量0.8決定透明度
3.table 內的文字換行：
<table style="table-layout: fixed; width: 100%"> <tr> <td style="word-wrap: break-word;width:100px;"> LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord </td> </tr></table>
4.Basic rule syntax基本語法/?s?ntaks/
semicolon/?s?m??k??l?n/分號
strong { color: red;}
In your stylesheet, type a full stop (period)句號 before the class name when you use it in a selector.
In your stylesheet, type a number sign (hash)井號 before the ID when you use it in a selector.
Attribute Selectors屬性選擇器
You are not restricted to the two special attributes, class and id. You can specify other attributes by using <u>square brackets 方括號</u>. Inside the brackets you put the attribute name, optionally followed by a matching operator and a value. Additionally, matching can be made case-insensitive by appending an " i" after the value, but not many browsers support this feature yet.
- [disabled]
Selects all elements with a "disabled" attribute. - [type='button']
Selects elements with a "button" type. - [class~=key]
Selects elements with the class "key" (but not e.g. "keyed", "monkey", "buckeye"). Functionally equivalent to .key - a[href^="https://"]
Specifies what the attribute's value should start with; in this case, it selects secure links.
Pseudo-classes selectors偽類選擇器
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).
List of pseudo-classes
:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
5.共享規則，用逗號分隔：
Example
In the example, both of elements that have the "content-1" class and elements that have the "content-2" class will display bold text.
.content-1, .content-2
{
font-weight: bold;
}
6 .Information: <u>Specificity 特定；特指</u>：
If more than one rule applies to an element and sets the same property, then CSS gives priority to the rule that has the more specific selector. An ID selector is more specific than a class, pseudo-class or attribute selector, which in turn are more specific than a tag or pseudo-element selector.
如果規則有沖突，那么更加特指的那個規則會優先；
More details
You can also combine selectors, making a more specific selector. For example, the selector .key selects all elements that have the class name key. The selector p.key selects only<p>elements that have the class name key.
p.key選中的是class 名為“class=key”的p元素；
If the stylesheet has conflicting rules and they are equally specific, then CSS gives priority to the rule that is later in the stylesheet.
css后面定義的會覆蓋前面定義的樣式；
7. Information: Selectors based on relationships
for example:
<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...
#data-table-1 td:first-child {text-decoration: underline;}
#data-table-1 td:first-child + td {text-decoration: line-through;}
These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:
The result looks like:
- 格式問題
Some people use <u>indention縮進</u>—two spaces, four spaces, or a tab are common:
.carrot { /*注意這里的縮進*/
color: orange;
text-decoration: underline;
font-style: italic;
}
- font
- Bold, italic, and small-caps (small capitals)
- Size
- Line height
- Font typeface
For example:
p {font: italic 75%/125% "Comic Sans MS", cursive;}
The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).
The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.
End the list with one of the built-in default typefaces: serif, sans-serif, cursive, fantasy or monospace.
