2018-04-14 关于一些样式实现方式的总结
2018-04-15 本文已影响54人
正阳Android
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大致代码如下:
大致结构如图 类选择器大致如下图