HTML及CSS复习

1.

  •      src 是属性,用于指定图片的路径
  •      alt 替换文本 图像显示不出来时用文字替换
  •      title 提示文本 鼠标放在图片上显示信息

2.>文本或图片

  •     target="_blank":开始一个新窗口打开页面, "_self":默认,当前窗口打开页面。 

3. 锚点链接:快速定位到页面中的某个所需位置

  •  

4.在中加可以使本页面所有超链接实现此属性。 

为页面上所有链接规定默认目标:



5.Emmet语法:

  •    生成div类名有顺序:div.demo$*5
  •    像生成标签里默认文字:div{文本}*5 |  div{$}*5

6.※注意: outline:none;---/*在谷歌浏览器中有默认的轮廓线*/

7.链接里面不能再放链接,可以放块级元素,但给转换成块级元素最可靠

8.行高

       1.行高可以跟单位也可以不跟单位;
       2.行高不跟单位表示文字大小的倍数;
       3.如果子元素没有设置行高,则会继承父元素的行高为1.5
       4.此时子元素的行高时当前子元素的文字大小*1.5
       5.body行高1.5写法优势就是里面子元素可以根据自己文字大小自动调整行高。 

9. 外边距合并:

      ①相邻块元素垂直外边距的合并:会取较大的值。 /*只设置一个值*/
      ②嵌套块元素垂直外边距的塌陷(合并):父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大外边距值。
      /*①可以给父元素定义个上边框*/
      /* ②可以给父元素定义上内边距*/
      /* ③给父元素添加overflow:hidden;(溢出隐藏)*/ 

      /*如果有定位盒子,慎用overflow:hidden*/

10. 清除内外边距:

*{
   margin:0;
   padding:0;
 } 

 注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换成块级或行内块元素可以。

11. 清除浮动

原因:由于父盒子很多时候不方便给高度,但子盒子浮动又不占有位置,最后父级盒子高度为0就会影响下面的标准盒子。

   ①(不推荐)额外标签法也称为隔墙法,w3c推荐
        选择器 { clear : both; }
       闭合浮动:只让浮动在父盒子内部影响。
       注意:新空标签必须是块级元素!
   ②父级添加overflow属性
        overflow:hidden/*给父元素添加*/ | auto | scroll;
   ③父级添加after伪元素
        /*  :after{ content:' '; }  */

   //伪元素清除浮动代码:
   .clearfix:after {
              content: "";
              display: block;
              clear: both;
              height: 0;
              visibility: hidden;
          }

          .clearfix {
              /* IE6、7 专有 */
              *zoom: 1;
          }

   ④父级添加双伪元素  /*也是父元素添加*/

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table; /*block也行*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

 12.元素居中的方法

           ①定位top50%,left50%,然后transform:translate(-50%,-50%)

           ②利用flex布局中的align-Items:center垂直居中,然后再justify-content:center水平居中

 13.flex布局

   display : flex; (弹性布局) -----默认情况下一行显示
   行内元素也可以使用Flex布局。
          .box{
                  display: inline-flex;
                 }
   /*主轴居中,主轴默认是x轴*/
   justify-content: flex-start(左对齐) | flex-end(右对齐) | center | space-between | space-around;
   justify-content:space-between;/*对齐方式是两边贴着边。剩余内容进行平分*/
   justify-content:center;   /*居中*/
   justify-content:space-around;   /*每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。*/
   flex-direction:row(默认值) | row-reverse(主轴为水平方向,起点在右端) | column | column-reverse(主轴为垂直方向,起点在下沿);    /*默认主轴方向是row*/
   flex-wrap: nowrap(默认,不换行) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方) ;
   flex-flow: flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
   align-items:flex-start(交叉轴的起点对齐) | 
                     flex-end(交叉轴的终点对齐) | 
                     center(交叉轴的中点对齐) | 
                     baseline(子元素的第一行文字的基线对齐) | 
                     stretch(如果子元素未设置高度或设为auto,将占满整个容器的高度);   
   align-content(定义了多根轴线的对齐方式): flex-start | flex-end | center | space-between | space-around | stretch(默认值,轴线占满整个交叉轴)
         /*如果主轴是x轴,那么侧轴是y轴,侧轴就是交叉轴*/
               可调margin
等比例分配:  flex : 1;/*每个盒子按1:1分配*/
                     可调margin
注意:设为Flex布局以后,子元素float,clear,和vertaical-align属性将失效。
容器默认存在两根轴:水平主轴和垂直交叉轴。 

14. 文本域

  ①取消表单轮廓和防止拖拽文本域:outline : none;
  ②禁止textarea被拖拽:resize:none;防止用户拖拽文本域破坏布局.
  ③textarea中不建议把双标签换行写,textarea标签完全还原HTML中的空格。
  ④图片或表单和文字垂直对齐: vertical-align : center ; 
   vertical-align: baseline(默认,按基线对齐) | top | middle | bottom; /*会让图片地测有一个空白缝隙*/
   因为行内块元素和文本默认按照基线对齐,添加vertical-align:top | middle | bottom;即可;把图片转换为块级元素。
  ⑤单行文字语出省略号显示:   white-space: nowrap;   /* 1. 强制在一行显示文本,默认 normal 会自动换行 */
                              overflow: hidden;         /*1 . 超出的部分隐藏 */
                              text-overflow: ellipsis;  /* 2. 文字用省略号替代超出的部分 */
                              display: -webkit-box;  /* 3. 弹性伸缩盒子模型显示 */
                              -webkit-line-clamp: 2; /* 4. 限制在一个块元素显示的文本的行数 */
                              -webkit-box-orient: vertical; /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */ 

15.鼠标样式

    鼠标样式cursor: pointer | default(小白) | move(四个箭头) | text | not-allowed(禁止标志); 

你可能感兴趣的