第四周学习周记

本次周记主要内容
css尺寸 css显示 css定位 css对齐
第一部分css尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
所有CSS 尺寸 (Dimension)属性

第二部分 css显示
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

比如：h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

比如：h1.hidden {display:none;}

第三部分css定位
position 属性指定了元素的定位类型。
position 属性的五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
第四部分css对齐
要水平居中对齐一个元素(如

), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配。

比如：.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

比如：.center {
text-align: center;
border: 3px solid green;
}

图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

比如：img {
display: block;
margin: auto;
width: 40%;
}