寒假打卡*
分组选择器部分学习：
在样式表中有很多具有相同样式的元素。
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：
实例
h1,h2,p
{
color:green;
}
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
实例
p
{
color:blue;
text-align:center;
}
.marked
{
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
实例
h1.hidden {visibility:hidden;}
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
实例
h1.hidden {display:none;}
如何改变一个元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：
实例
li {display:inline;}
下面的示例把span元素作为块元素：
实例
span {display:block;}
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
实例
div.static {
position: static;
border: 3px solid #73AD21;
}
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
实例
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
relative 定位
相对定位元素的定位是相对其正常位置。
实例
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
移动相对定位元素，但它原本所占的空间不会改变。
实例
h2.pos_top
{
position:relative;
top:-50px;
}
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
实例
h2
{
position:absolute;
left:100px;
top:150px;
}
overflow: visible
默认情况下，overflow 的值为 visible， 意思是内容溢出元素框：
这里的文本内容会溢出元素框。
这里的文本内容会溢出元素框。
这里的文本内容会溢出元素框。
这里的文本内容会溢出元素框。
实例
div {
width: 200px;
height: 50px;
overflow: visible;
}
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
实例
img
{
float:right;
}
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：
实例
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
实例
.text_line
{
clear:both;
}
组合选择器被称为 组合器（Combinators）。一共有4种组合器：
' ' 后代组合器（Descendant combinator）
'>' 直接子代组合器（Child combinator）
'~' 一般兄弟组合器（General sibling combinator）
'+' 紧邻兄弟组合器（Adjacent sibling combinator）
伪类可以看作以选中元素为基准点，此元素的一些状态或属性。
chrome消除 div 滚动条的宽度，通过箭头键直接控制滚动：
#divContainer {
overflow: auto;
height: 160px;
width: 260px;
}
#divContainer::-webkit-scrollbar {
border-width:1px;
}
