css的样式优先级
高----------------->低
css内容属性
content属性通常是和:before和:after伪元素选择器配合使用的,用于插入生成的内容
属性 | 含义 |
---|---|
:before | 插入在前 |
:after | 插入在后 |
示例:
<!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>
结果
overflow属性的使用
值 | 含义 |
---|---|
visible | 默认值 |
auto | 如果内容被修剪,自动添加滚动条 |
hidden | 会自动将超出的内容裁减掉,且裁剪掉的内容不可见 |
scroll | 设置一直显示滚动条 |
<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>
结果:
display属性
display用于设置元素如何显示
- none 该值用于让元素隐藏,通常用于预先做好,动态显示
- block 该值将显示为块级元素,元素前后会有换行符,,可以设置它的宽高和上右下左的内外边距
- inline 该值会显示为内联元素,元素前后没有换行符,也无法设置宽高和内外边距
- inline-block 该值会被认为是行内块元素,这种值既具有block值,可以设置width和height属性的特性,又保持了inline值的不换行的特性
- inherit 继承父元素的display设置
<!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>