学习【尚硅谷HTML5前端视频】主讲人李立超（中篇，下篇）

视频地址ヾ(✿ﾟ▽ﾟ)ノ

1.电脑中的 1个像素的大小，相当于手机的4个像素的大小。也就是说，电脑中12px的长度，在手机中默认乘以4，为48像素

    1em = 1font-size ,  1em 是相对于自身的字体大小来计算的。

    颜色  rbg(255,255,255)  rgb(100%,100%,100%) 值在 0-255之间，用十六进制表示：  #红色绿色蓝色   #00FF00   #0F0

    浏览器 中默认的字体大小 是 16px

    字体分类（指一类字体的集合）：   font-family:  arial, "微软雅黑",  serif;

    

     font-style:  normal;  以及斜体 font-style: italic;

     font-weight:  normal; 以及  font-weight: bold;

    小写字母变成 小型的大写字母    font-variant: small-caps;

使用 （倒数第一是font-family，倒数第二是 font-size， 这里两个不可少），可以一次性解析，不用解析5次。

font: small-caps italic bold 24px "微软雅黑";

2.  line-height:  20px;  字体大小font-size: 10px;  则上下各留了 5px 的距离，所以行高为10px。

     可以得出结论：   行高 =  line-height 减去  font-size

font-size: 20px;
line-height: 100%;  /*相对于font-size, 值为20 * 100% = 20px;*/

line-height: 1.5;  /*相对于font-size, 值为 20 * 1.5 = 30p;*/

注意：如果使用 font: 30px "微软雅黑";   时 line-height会被重置为默认值，所以line-height不能写在 font前面

line-height: 40px;  /**此句将不起作用*/
font: 30px "微软雅黑";   /**此处line-height 被重置了*/

应该这样写：

font: 30px "微软雅黑";   /**此处line-height 被重置了*/
line-height: 40px;  /**写在后面，起作用*/

或者直接：

font: 30px/40px "微软雅黑";

3.  text-transform: capitalize; 每个单词的首字母都大写

a 标签的 text-decoration 的默认值是 underline, 可以使用 text-decoration: none; 去除下划线

word-spacing 其实就是延长空格的长度

一个字默认16px, 缩进2个汉字就是  text-indent: 32px;  但如果font-size 不是16px就不是两个汉字，于是用

text-indent: 2em;

负值 表示首行向左移动   text-indent: -2em; 

用处：  text-intent: -99999px;  将这段话隐藏起来（不想让用户看到，但又想让搜索引擎可以搜到）

 

4.  盒子模型（框模型）box model  ，  一直把 padding 和 margin 搞混( • ̀ω•́ )✧

 

边框 3个属性缺一不可：  

border-width: 10px;
border-color: red;
border-style: solid;

其中 border-width:  10px 20px 30px 40px;   4个值：  上  右  下  左

border-width: 10px 20px 30px;   3个值： 上  右/左  下

border-width: 10px 20px;   2个值：  上/下   右/左 （可以使用 border-xxx-width 来分别设置）

border-color, border-style 也遵循上面的规律，也有 border-xxx-color; border-xxx-style.

浏览器默认的  border-color为black, border-width: 3px; 但 border-style为none，也就是如果仅仅只设置  border-style: solid; 也是能够看到边框的。

同时指定（没有顺序规定）：  border: 10px red solid;   可以 使用 border-xxx: 10px red solid; 分别指定。

假如我只要三边，不要右边：

border: 10px yellow dashed;
border-right: none;

 

5. 外边距 margin

现在都是相对于  左，上 ，设置 margin-top ,  margin-left  会改变元素自身的位置

但设置 margin-right, margin-bottom 不会改变自身位置，但会改变相邻的元素的位置。

margin 一般只给水平方向设置 auto , 左右方向设置为auto会将外边距设置为最大值， 上下方向设置为auto,则外边距为0 

若 margin-right 和 margin-left 同时设置为auto，则会将两侧外边距设置为相同的值。

兄弟元素外边距重叠（选最大的），例如上一个元素的margin-bottom:100px;  下一个相邻的元素的margin-top: 200px;  则这两个元素之间的距离为 200px;而不是 300px;

父子元素垂直外边距 相邻 ，子元素的外边距会赋值给 父元素(垂直方向)。例如子元素的 margin-top: 100px; 但未给父元素设置margin-top，但此时父元素的 margin-top也变成了100px;

 

6.  浏览器 默认 的  有一个 8px 的 外边距

去除浏览器默认样式

*{
   margin: 0;
   padding: 0;
}

7. 对于内联元素 来说：  我是内容我是内容,  设置 width 和 height 是不起作用的 

内联元素支持 水平方向的 外边距  margin-left 和 margin-right , 不支持垂直方向的外边距 margin-top，margin-bottom

display: inline;  /*内联元素，不可设置width和height*/
display：block;   /*块级元素，独占一行*/
display: inline-block; /*既有内联元素特点又有块级元素特点，即支持width和height，但不独占一行*/

display: none;  /*隐藏， 并且不占位置*/
visibility: hidden; /*隐藏，但占位置*/
visibility: visible; /*默认值，显示*/

例如  就是 inline-block ，既可以设置 宽高，又不独占一行。

8.  如果子元素 的 高度 超出了 父元素的高度， 则 子元素会 溢出。  这里的  overflow: visible; 默认值，表示不对溢出部分处理，元素会在父元素以外的位置显示。   overflow: hidden;  会把溢出部分会被修剪，不会显示

overflow: scroll;  为父元素添加滚动条，拖动来查看完整内容。但这个存在缺点，不管子元素有没有超出，水平和竖直方向都会有滚动条，所以可以使用    overflow: auto; 根据需求来添加滚动条，需要水平就添加水平，需要竖直就添加竖直，不需要就不加。

9. 文档流 ， 是网页最底层的， 块元素：默认宽度是父元素宽度的100%

float: none;  float: left;  float: right;  

 

 

导航条 小练习：（这是我的一小步，更是人类的一大步(◕ᴗ◕✿)）

    
    
    


    

        
首页
        
地址
        
商品
        
榜单
    

真的是很神奇啊，从变成 ：

内联元素 设置 width 和 height是没有效果的，它只会被内容撑开 。

 

10.  清除浮动： clear: left;   clear: right;               clear: both;  清除对其影响最大的一边的浮动

使用clear: both;  解决高度坍塌问题：

对于：

给子元素添加 float: left;  造成高度坍塌

添加一个新的 

clear

,  并赋予样式  clear: both;  

    
    
    



    

    
clear

它将父元素撑了起来：

如果 中间不加内容

， 成功解决高度坍塌问题。

但这种方法需要 添加格外的 html , 下面使用 伪类选择器 :after 在父元素之后用css添加html，需满足第一是 块级元素，第二是 清除浮动，第三是没有内容，给该class取名为 clearfix, 可以复用

11.  定位 

position: static;  默认值，元素没有开启定位           relative 相对定位   absolute 绝对定位  fixed  固定定位

position:relative;  内联元素还是内联元素

position:absolute;  相对于 开启了定位的祖先元素，

         一般情况是 子元素position: absolute; 此时 其祖先元素开启了 position:relative

        并且内联元素会变成块元素

position: fixed;  固定定位，相对于浏览器。

z-index: 9999;

只有设置了 定位的元素，可以使用 z-index ， 对于position: static; 来说z-index设置无效。

父元素永远都盖不住子元素

12. 背景

background-repeat: repeat;

background-position: 

这种写法总共就九个位置：

可以具体制定位置： 

background-attachment

13. 按钮，有三张背景图片，

.btn:link{
  width: 93px;
  height: 26px;
  background-image: url("/img/btn.jpg");
}
.btn:hover{
  background-image: url("/img/hover.jpg");
}
.btn:active{
  background-image: url("/img/active.jpg");
}

会出现一种情况： 第一次点击的时候，会闪一下，这是因为  :hover 和 :active 只有在移到按钮，点击的时候才触发样式，此时才会去请求获取图片，因此第一次会闪烁。

解决方法：  将三张图片合成一张图片，叫做 CSS-Sprite 雪碧图，这样 .btn:link 获取一次图片就行了，再往左移。

.btn:link{
  width: 93px;
  height: 26px;
  background-image: url("/img/sprite.jpg");
}
.btn:hover{
  background-position: -93px 0px;
}
.btn:active{
  background-position: -186px 0px;
}

13. 表格

   

      
 colspan 横向合并单元格 
      
 rowspan 纵向合并单元格 
   

对于

        

            
编号
 
姓名
 
性别
        
        

            
0001
 
why_su
 
男
        
        

            
0002
 
张三
 
女
        
        

            
0003
 
李四
 
男
        

使用

        table{
            width: 300px;
            margin: 0 auto;
            border: 1px solid black;
        }
        th, td{
            border: 1px solid black;
        }

结果

使用   border-spacing: 0px;  可以设置  table 和 td边框 之间的 距离

因为两个边框重合，看起来像加粗效果，可以给table设置  border-collapse: collapse;   表示 边框不重合，此时 border-spacing: 0px; 不起作用

设置 隔行变色 ， 以及 鼠标经过时更改背景颜色 

        tr:nth-child(even){
            background-color: #bfa;
        }
        tr:hover{
            background-color: #fba;
        }

tfoot 反正都是在表格末尾，写代码的时候可以写在 tbody 前面

使用   table > tr { ... } 无法设置样式，原因在于，如果 table 与 tr 之前没有写 tbody 的话，浏览器会默认为其添加 tbody 标签。

使用 tbody > tr {... } 就可以了

 

14， 对于 

设置样式

       .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #fba;
            margin-top: 100px;
        }

 这里使用 margin-top: 100px;  因为子元素  和 父元素 相邻的 垂直外边距 会重叠，子元素的外边距会传递给 父元素

可以在 两个 div  之间加一个 

解决（这样就不是相邻的了）

用CSS的形式表示就是：  

.box1:before{
   content: "";
   display: table;
}

可以使用如下 ：  同时 解决 父元素高度坍塌 和 父子元素相邻垂直外边距重叠 ：

.clearfix:before,
.clearfix:after{
   content: "";
   display: table;
   clear: both;
}

15， 默认选中：checked="checked"              selected="selected"

    

        用户名： 

        密码： 

        性别：男
        女

        爱好： 打游戏
         读书
         写字

        喜欢的明星：
        
            胡歌
            刘诗诗
            赵丽颖
        

        
        
    

其中可以使用   来分组

       
            
                 胡歌
                 霍建华
            
            
                刘诗诗
                赵丽颖
            
        

按钮
重置
提交

关于  label , 有个属性for="id" 指向id， 当点击 文本的时候 可以选中 组件：

性别：
 男        
                       
 女 

使用

    
性别
  

把上面内容给圈起来

16. 框架集 frameset 在 HTML 中不能和 合用，你要使用 就不能使用 ,  HTML5 废除了