贾老师每日小课堂

        今天让我们先来讲解一道在面试中会考到的一道基础题

        1.当我们用编辑器打出一段文字如图在网页中会显示出但当我们打入英文时却会出现图中的情况这是什么原因呢？

这就是因为当我们输入英文是需要用空格键隔开每个单词，如果没有用空格键隔开当浏览器读取时会认为那一串长长的英文是一个单词，浏览器读取时单个单词是不会转行的，所以会发生上述情况。

        2.无序列表 ul

无序列表需要注意两点：第一 内部必须有子标签 <li></li>；第二 ul天生自带内外边距   还有一个 p 标签

  延伸选择器

并集选择器

这个选择器可以同时选取多个标签，但需要将不同的标签用逗号隔开如图

通配符选择器可以选择所有标签进行设置

优点：省时省力；缺点：一次性选择所有标签会加重浏览器的负荷；解决办法：按照则身的需求对标签进行选择。

List-style   这是样式属性 除去列表前的符号也可以添加自己喜欢的符号

List-style的属性值 circle（空心圆） disc（实心圆）square（正方形）none（空）

 

4.ol 有序列表

 

1. 内部必须有子标签<li>
2. 天生自带内外边距

 

5.自定义列表

 

 Dl 自定义列表 dt 是小标题  dd内容

 

列表可以做二级菜单 做导航

 

6.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-bottom+2*border

 

Margin塌陷现象：相邻两个块级元素同时设置margin时，他们之间的外边距不会叠加，会取最大的。这种现象叫margin塌陷。

 

7.标签又分为块级： p h1-h6 div ul li ol dl 等；内敛：span img i b a em icon（矢量标签）

 

（1）二者区别

　　块级1.块级元素会独占一行2.块级可以设置宽高

 

　　内敛1.内敛不会独占一行2.内敛不可以设置宽高3.内敛元素的margin上下不起作用了

 

（2）二者转换

 

　　块级转行级给块级元素添加属性display:inline; display 显示  inline 行

 

　　行级转块级给行级元素添加属性display:block;    block块

 

　　行级块元素给需要的元素添加属性 display:inline-block;

 

　　(可以设置宽高了，可以在一行了，margin可以随便使用了)

 

1.备注

 

　　Line-height 行高  设置字体的垂直位置

 

　　Line-height的值和height的值相同 文本就上下居中

 

　　拓展 line-height:50px/2;

 

　　当是2的时候  line-height的值是2*font-size的大小==36px