css学习10

1.特殊的用法，如果在padding margin中设置三个数值，例如：

 margin: 10px 10px auto;  这三个值表示的是上，左右，下。其中的auto一般都为0。

2.正常我们使用float的时候，这样能够实现元素的横向表示。但是如果设置的里面的元素的长度是固定数值,那么就会导致当浏览器的窗口缩小的时候里面的元素出现换行。解决的方法就是设置宽度为百分比。例如：

ul li{
  float: left;
  width: 20%;
}

3.设置元素的尺寸的大小使用属性resize。一般在textarea中使用。

resize的属性值：
none:
both:
horizontal:
vertical:

但是注意resize要和overflow一起使用。 设置overflow:auto

3.overflow处理溢出。

默认是visible
还有auto：在需要的时候添加滚动条。
hidden
scroll：当内容超出横向的时候，出现横向滚动条。超出纵向的时候，出现纵向滚动条。但是默认就有一个滚动条 。

4.设置轮廓outline

outline-color
outline-style
outline-width
outline-offset  设置轮廓的偏移量，也就是可以设置轮廓向内外的便宜距离。

轮廓可以和边框混用，并且可以用轮廓设计边框的样式，并且有两个优点:
①轮廓不占用控件，即不会增加额外width和height
②轮廓可能不是矩形的。

5.行内元素的边框显示效果
行内元素的上下边框高度不会影响行高，而且不受段落和行高的约束。如果设置边框的宽度太大，就会导致覆盖其他的部分。
但是行内元素的左右边框会挤占相邻的文本的位置，而不是覆盖相邻的文本。

使用margin的时候会发生重叠
比如一个div套着一个div的时候，设置内部div的margin值，垂直方向相邻的边界会发生重叠。这样的显示效果就是好像仅仅给外层的div设置了margin值一样。但是对于左右边框不会发生这样的现象。
边界重叠的时候，两个边界中最小的那边会被覆盖，这种情况padding和边框中不会出现。

在行内元素中设置margin，仅仅能作用在左右的相邻元素，上下距离并不起作用。并且不会出现断行的情况。

form元素不能直接包含input元素，因为input是行内元素，而form元素只能包含结构元素。

table元素能直接包含caption colgroup col thead tbody tfoot，但是不能直接包含tr元素或其他元素，如果在table中直接包含tr元素，那么就是默认在tr元素外添加了tbody元素。

6.定义文章块
article元素表示文档，界面中独立的，完整的可以被外界引用的内容。
anticle中包含标题，一般放在header元素
使用section元素，一般用在anticle中，用于区分不同的区域。但是在其他的地方，如果要区分不同的块，那么就使用div。
在section中，一般都有标题，不要为没有标题的内容块区域使用section元素。

7.定义导航块使用nav标签
定义侧边栏aside
定义主要内容main
定义标题栏header
定义 footer

8.清除浮动clear
定义和浮动相邻的元素在必要的情况下换行显示。这样就能控浮动元素在一行内显示。
清除浮动并不是清除浮动元素，而是清除自身，左右元素存在浮动元素，则当前的元素把自己的清除到下一行显示，而不是前面的浮动元素清除到下一行显示。