你现在有事做了吗?————那还等什么呢(Html)

你的男孩HD 讲起知识很帅气。又到了每天一集的传授知识环节。相信你们都有说文韩老师讲知识那是非常有知识。今天我上台给我的学友们传授了一些它们不知道的知识。虽然我以一种诙谐的风格来进行讲解可以说这就是我的风格。要想别具一格,风格必须有差异这样才会记得你。这也是我让我不紧张的办法。心里实在是害怕,哪怕只有一个人,我最不喜欢的就是严肃。废话不多说接下里就是见证知识的时刻。嘻嘻,让你飞翔在知识的海洋吧。。。。。。

一、标签的嵌套规则

  1. 块标签可以嵌套任何标签
    

例外:p标签绝对不能嵌套块标签

2.行标签,不能嵌套块标签,可以嵌套行标签

        
            
            

例外:a标签可以嵌套块标签

   注意:
    (1).自己不能嵌套自己
        
    (2).display:block;变成块之后,同样不能嵌套块标签

二、列表

1.无序列表

        
  • 每一项的内容

2.有序列表

        

3.描述列表

        

4.列表也有样式:

    点或者是数字

5.取消样式:

    list-style: none;

三、语义化

 SEO优化、可读性高:
1.h1-h6             标题
2.p                 段落
3.a                 链接
4.strong            语气助词
5.em                语气助词.    尽可能的用有语义化的标签

四、距离

1.内边距、内补丁、内补白

padding
        top     right  bottom       left
(1).单独设置四个方向
    padding-left        左边距
    padding-top         上边距
    padding-right       右边距
    padding-bottom      下边距
(2).简写:(4种)

    padding: 上下左右;      1个值
    padding: 上下 左右;     2个值
    padding: 上 左右 下;    3个值
    padding: 上 右 下 左;   4个值

2.外边距 (margin) 盒子与盒子之间的距离

margin:
        top     right  bottom       left
(1).单独设置四个方向
    margin-left         左边距
    margin-top          上边距
    margin-right        右边距
    margin-bottom       下边距

(2).简写:
    margin: 上下左右;       1个值
    margin: 上下 左右;      2个值
    margin: 上 左右 下;     3个值
    margin: 上 右 下 左;    4个值

注意:
    margin塌陷
    如果上下两个值一样,听一个。
    如果一个大,一个小,听大的。

五、盒子模型

盒子==标签  标签的模型  标签在页面中占的大小
盒子模型的组成
    width/height+padding+border
注意:
    如果标签设置了宽高,再设置padding的时候会往外挤
    一定要用宽高减掉padding,标签如果有需要,最好设置宽度。

六、元素各种margin和padding要求

(1).margin  
    行元素只有margin-left和margin-right
(2).padding
    行元素只有padding-left\padding-right和padding-bottom
1.很多元素自带margin和padding
写样式之前,需要把所有元素的margin和padding都清空
*{
    margin: 0;
    padding: 0;
}   

2.这些标签有间距:

    body            margin
    h1-h6           margin
    p               margin
    ul              margin padding

七、取消艰间距的方法

1.按标签取消如:

    body,h1,h2,h3,h4,h5,h6,p,ul{
        margin: 0;
        padding: 0;
                      }

2.全部取消

*{
        margin: 0;
        padding: 0;
}

你可能感兴趣的:(你现在有事做了吗?————那还等什么呢(Html))