全面我们学了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是内容)

列表能做什么?

做二级菜单 做导航

备注

margin和padding问题的探讨

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

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

margin:200px 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塌陷。

CSS的再一次深入(更新中···)的更多相关文章

  1. css的再深入7(更新中···)

    1.transparent  透明的 2.placeholder  提示语 写页面 搞清结构层次, 保证模块化,让他们之间不能受到影响 (1) 元素性质 (2) 标准流 浮动带来的脱离文档流撑不起父级 ...

  2. css的再深入6(更新中···)

    background-position  雪碧图 我们的html和css中有三个属性可以向服务器发送请求,src href url. overflow (1) 值hidden 超出就隐藏 (2) 值s ...

  3. CSS的再深入2(更新中···)

    在上一章中,我们又引出了一个知识点: margin的问题 margin:0 auto:(上下为0,左右自适应)会解决元素的居中问题(auto 自适应)前提是给这个元素设置width 同时,我们又要学习 ...

  4. css的再深入9(更新中···)

    一 单位 1.px 就是一个基本的单位 像素 2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字.如果父级没有就继承上一个父级直到body,如果body没有那就默认是16px. 3.rem ...

  5. CSS的再深入5(更新中···)

    页面布局 结构层:搭我们的页面框架. 布局层:针对框架内部结构进行排版. 不需要使用浮动解决的问题尽量不用. 使用浮动之后会使该元素脱标,并且该元素的margin. div 盒子模型 : 就是一个容器 ...

  6. CSS的再深入3(更新中···)

    在前面,我们学习了标准文档流,但在实际制作的过程中,用标准文档流书写显然是不现实的,因此,我们来了解几种脱离标准文档流的方法: 1.float 浮动 float:left/right:(左浮/右浮) ...

  7. css的再深入8(更新中···)

    1.去滚动条的属性 overflow:hidden; overflow-x:hidden; 水平超出的隐藏. 2.z-index 层次叠加 元素重叠 谁的值大谁在上面 (1) 父级出现position ...

  8. css的再深入4(更新中···)

    两种居中的方式: Margin:0 auto;和text-align:center; Margin的居中是对自身,text-align对元素内部的文本来说. 隐藏的两种方式: visibility:h ...

  9. 前端常用场景总结CSS/JS/插件(实用篇更新中...)

    <div class="box box1"> <span>垂直居中</span> </div> .box1{ display: ta ...

  10. css 不大常见的属性(不断更新中...)

    1 英语或数字强制换行 word-break:break-all; 2 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果 -webkit-overflow-scroll ...

随机推荐

  1. linux系统状态检测命令

    1.ifconfig命令 ifconfig命令用于获取网卡配置与网络状态等信息,格式为“ifconfig [网络设备] [参数]”. 使用ifconfig命令来查看本机当前的网卡配置与网络状态等信息时 ...

  2. PowMod (欧拉推式子 + 指数循环节)

    最主要的步骤是用 1式子和2式子推 3式子.(难点,看了很多博客最后的时候那个式子看不懂) 当n, m互质时即gcd(n, m) == 1,存在phi(n * m) = phi(m) * phi(n) ...

  3. python XML文件解析:用xml.dom.minidom来解析xml文件

    python解析XML常见的有三种方法: 一是xml.dom.*模块,是W3C DOM API的实现,若需要处理DOM API则该模块很合适, 二是xml.sax.*模块,它是SAX API的实现,这 ...

  4. ClassThree__HomeWork

    作业一 使用类的静态字段和构造函数,可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”. 代码 public class TestOne {       ...

  5. 使用github管理Eclipse分布式项目开发

    使用github管理Eclipse分布式项目开发 老关我在前面的博文(github管理iOS分布式项目开发)中介绍了github管理iOS分布式开发,今天老关将向大家介绍使用github管 理Ecli ...

  6. [转载]Oracle PL/SQL之LOOP循环控制语句

    在PL/SQL中可以使用LOOP语句对数据进行循环处理,利用该语句可以循环执行指定的语句序列.常用的LOOP循环语句包含3种形式:基本的LOOP.WHILE...LOOP和FOR...LOOP. LO ...

  7. jquery遍历获取每一行数据进行对比

    $("#dtlTable tr:gt(0)").each(function(i){ var orderQtyBy = $("input[name='orderQtyBys ...

  8. 大神教你Nginx常用基础配置方案

    Nginx的fastcgi模块参数设置 Nginx 有两个配置文件fastcgi_params.fastcgi.conf,两者唯一的区别是,fastcgi.conf 多一个参数 SCRIPT_FILE ...

  9. 需求中碰到的简单Map集合 key相同合并 value的思路

    从两个接口获取到了数据Map集合, 但是要展示到同一页面 根据了播控人为key 将两个返回的进行遍历 将他们存在新的map里面 只有单个key value 就存为(MAP<object,obje ...

  10. GoldenGate实时投递数据到大数据平台(1)-MongoDB

    mongodb安装 安装 linux下可使用apt-get install mongodb-server 或 yum install mongodb-server 进行安装. 也可以在windows上 ...