- 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.
