css style precedence
High -----------------> Low
css content attribute
and usually the content attribute: before and: after pseudo element selectors used in conjunction with, for inserting the generated content
| Attributes | meaning |
|---|---|
| :before | Insert the front |
| :after | Is inserted after |
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
h1:before{
content: "Hello";
}
h2:after{
content: url("https://www.w3school.com.cn/i/html5_new_note.png");
}
</style>
</head>
<body>
<h1>World</h1>
<h2>HTML</h2>
</body>
</html>
result
Use overflow property
| value | meaning |
|---|---|
| visible | Defaults |
| auto | If the content is trimmed automatically add scroll bars |
| hidden | It will automatically cut off the excess content, and the clipped content is not visible |
| scroll | Has been set up to display a scroll bar |
<p class="abc" style="width:200px;height:50px ;overflow:visible">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:auto">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:hidden">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:scroll">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<hr>
result:
display properties
How to display element is used to set display
- This value is used to make none to hide elements, typically used for pre-made, dynamic display
- This value is shown as block block-level element, the element before and after the line break will ,, its width and height may be provided on the lower right and left inner and outer margin
- This value is displayed inline inline element, no line break before and after the element can not be set high and the inner and outer margins width
- The inline-block row value is considered to be within the block elements, which have both the value of block values, width and height attributes can be set properties, while maintaining the characteristic is not a line feed value inline
- inherit inherit the parent element of the display settings
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
span.inline_box{
border: solid 1px #1fa8b4;
display: inline-block;
width: 100px;
text-align: center;
}
.inline{
display: inline;
}
</style>
</head>
<body>
<p style="display: none" id="demo">大家好。。。。。</p>
<button onclick="document.getElementById('demo').style.display=''">显示</button>
<button onclick="document.getElementById('demo').style.display='none'">隐藏</button>
<p><span style="display: block">hello</span> word</p>
<div class="inline">hello </div>
<div class="inline">world</div>
<br>
<span class="inline_box"> HTML</span>
<span class="inline_box"> CSS</span>
<span class="inline_box"> JQuery</span>
</body>
</html>
result:
