CSS的再一次深入(更新中··&a…

2018-09-29 03:51:55来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

全面我们学了6个选择器,今天再来学习两个选择器,分别是通配符选择器和并集选择器:

1.通配符选择器:

  *{

}

表示body里所有的标签都被选中

2.并集选择器:

选中的标签之间用逗号隔开,表示这几个标签都被选中

*选择器 有好处也有弊端

好处 就是省事,弊端,就是因为太省事了,加大了浏览器的负荷。

解决办法  按需选择。

再来学习几个列表标签

1.无序列表  ul

  (1)内部必须有子标签<li></li>

  (2)ul天生自带内外边距(天生自带内外边距的还有p,hi-h6,ol)

2.有序列表   ol

  (1)内部也必须有子标签<li></li>

  (2)ol天生也自带内外边距

无序列表前面符号是形状,有序列表前面符号是序号

ul和ol不同之处就在前面符号的区别

ul想改前面的形状要用list-style:circle(空心圆)/disc(实心圆)/square(正方形)/none(空);

ol想改前面的序号要用标签属性 type 修改,无法使用样式标签修改

3.自定义列表   dl

dl中要用dt和dd(dt是小标题,dd是内容)

 

列表能做什么?

 

做二级菜单 做导航

 

备注

 

marginpadding问题的探讨

 

margin:200px;设置一个值 说明top right bottom left 都是200px

 

margin200px 100p;设置两个值 上下是200px  左右是100px

 

margin200px 50px 100px 上是200px 左右是50px  下是100px

 

margin:200px 50px 100px 50px; 上是200  右是50px 下是100px 左是50px

 

padding同上

 

实际占用的空间大小

 

通过分析我们发现 一个标签元素实际占用的空间是 

 

width+border*2+padding*2+margin*2

 

一个标签元素的实际高度是

 

height+padding-top+padding-bittom+2 x border

 

同时还有一种情况需要注意:

margin的塌陷现象,即:

相邻两个块级元素同时设置margin是他们的外边距不会叠加,会取最大的外边距的值,这种现象叫做margin塌陷。

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:404页面自动跳转到首页

下一篇:多个Img标签之间的间隙处理方法