资讯专栏INFORMATION COLUMN

CSS的再一次深入(更新中···)

Jackwoo / 1020人阅读

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

1.通配符选择器:

  *{

}

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

2.并集选择器:

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

*选择器 有好处也有弊端

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

解决办法  按需选择。

再来学习几个列表标签

1.无序列表  ul

  (1)内部必须有子标签

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

    2.有序列表   ol

      (1)内部也必须有子标签

  •   (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塌陷。

     

     

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/1757.html

    相关文章

    • css的再深入6(更新···)

      摘要:宋体雪碧图宋体我们的宋体和宋体中有三个属性可以向服务器发送请求,宋体。宋体类型,客户端和服务器之间的暗号,根据拓展名而定。注内容包含图片和文字 background-position  雪碧图 我们的html和css中有三个属性可以向服务器发送请求,src href url。 overflow   (1) 值hidden 超出就隐藏   (2) 值scroll  出现滚动条   vis...

      Bowman_han 评论0 收藏0
    • css的再深入8(更新···)

      摘要:宋体去滚动条的属性宋体水平超出的隐藏。往往需要设置宋体为宋体滚动标签他身上所具有的功能有标签属性决定。1.去滚动条的属性 overflow:hidden;   overflow-x:hidden; 水平超出的隐藏。 2.z-index 层次叠加 元素重叠 谁的值大谁在上面   (1) 父级出现position:relative;时候z-index失效   (2) 层叠元素出现float的时候...

      chuyao 评论0 收藏0
    • css的再深入7(更新···)

      摘要:宋体可以继承的属性有哪些宋体系列宋体系列宋体的值的问题宋体四个值的顺序是宋体左上宋体右上宋体右下宋体左下。宋体在宋体下宋体为负让元素居中,前提是知道元素的宽高。宋体如宋体正常状态宋体宋体设值时1.transparent 透明的 2.placeholder 提示语 写页面 搞清结构层次, 保证模块化,让他们之间不能受到影响 (1)元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级的高度...

      番茄西红柿 评论0 收藏0
    • css的再深入9(更新···)

      摘要:宋体二宋体浏览器浏览器和浏览器之间是由差距的,这个差距是由浏览器自身的内核决定的。宋体每个浏览器都有自己的前缀,主要解决宋体中的兼容问题。宋体是弹性子元素在弹性容器中所占的份数。一 单位 1.px 就是一个基本的单位 像素 2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字。如果父级没有就继承上一个父级直到body,如果body没有那就默认是16px。 3.rem 也是一个单位,...

      yexiaobai 评论0 收藏0
    • CSS的再深入2(更新···)

      摘要:层叠行选不中的情况下,走继承性。继承性的权重为。选中情况下,首先需要考虑权重的问题,谁的权重大,就选谁的样式属性。如果权重相同,因为后者会覆盖前者,所以谁的样式属性在后面,就选择谁的样式属性。在上一章中,我们又引出了一个知识点: margin的问题 margin:0 auto;(上下为0,左右自适应)会解决元素的居中问题(auto 自适应)前提是给这个元素设置width 同时,我们又要学习新...

      enrecul101 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <