2018-04-14 关于一些样式实现方式的总结

1.类选择器的使用

#box .content{}

.content  .item{}

后代选择器：以下面的这个为例子，那么类选择器item，只有在使用了.content类选择器的标签内才有效；

若是没有使用content，直接使用了item，是无效的。这样可以避免出现当使用了相同的标签造成的样式全部相同了；

2.水平居中  text-align为center； 已知宽的 margin 0(可以是具体数据) auto

3.垂直居中； 设置top值为 外部高度减去内部高度的一半

下面是一些例子

示例1：文字居中，图片与文字底部对齐 示例1：主要样式设置

第二个示例：

示例2：左侧是背景图，右侧是一个div

大概代码如下：以前一直都傻傻的认为，父级多高，子元素如果不设置宽度和高度那么默认就是和父级等高；

其实不设置的话那么默认都是内容撑开宽度；

示例2：大致代码

I AM A  GREEN HAND!

COME ON!

示例3：

示例3：每一个都是相同的块，边框都是1px

为了不使得上下两个块的边框组成2px；可以设置margin-bottom为-1px;

具体代码如下

示例3代码

同样的思想的还有下面这种样式

示例4

示例：4，最后一个没有|

我们可以设置border-right的颜色和宽度；最后一个不给设置border-right：none；

示例4

示例：4

大致代码如下：

大致结构如图 类选择器大致如下图