前端基础笔记

最新推荐文章于 2022-06-03 00:44:51 发布

liguangjiehao

最新推荐文章于 2022-06-03 00:44:51 发布

阅读量284

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/u012360634/article/details/78369153

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.复合选择器
(1)交集选择器
格式：标签+类(ID) 选择器{属性：值;}
特点：既要满足使用某个标签，还要满足使用了类(id)选择器。

    <style type="text/css">
        .box{
            font-size:50px;
        }
        div.box{
            color:red;
        }
        div#miss{
            width: 400px;
            height: 300px;
            background-color:yellow;
        }
    </style>

(2)后代选择器
格式：选择器+空格+选择器{属性：值；}
特点：无限制隔代只要能代表标签，类选择器，ID选择器自由选择

    <style type="text/css"> 
     .box span{
        background-color: blue;
     }
    .box .miss{
        color:red;
     }
     .box span{
        color:red;
     }
    </style>

(3)子代选择器
格式：选择器>选择器{属性：值;}
特点：直接下一代，不能隔代

    <style type="text/css">
    div>span{
            color:red;
            font-size:40px;
        }
    p>span{
        color:green;
        font-size:60px;
    }

    </style>

(4)并集选择器

    <style type="text/css">
    .box,#miss,span,h1{
        font-size:100px;
        color: #fff;
        background-color: green; 
    }
    </style>

(5)综合

<style type="text/css">
        div.div1 ul.box li,div.div1 p{
            color:red;
        } 
    </style>

(6)文本属性

<style type="text/css">
        div{
            font-size:16px;
            font-weight:700;
            font-family:微软雅黑;
            font-style:italic;
            line-height: 40px;
            /*文字属性连写*/
            font:  italic 700 16px/40px 微软雅黑;
        }
    </style>

(7)文字属性连写

font: font-style font-weight  font-size/line-height  font-family;
//font:后边写属性的值。一定按照书写顺序。文本属性连写文字大小和字体为必写项。
//Font:italic 700 16px/40px  微软雅黑;

2.标签分类
(1)块状元素
常用：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

特点：独占一行，可以设置宽高，默认宽度为父级元素宽度

(2)行内元素
常用：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

特点：在一行上显示，不能直接定义宽高，宽高靠内容撑高

(3)行内块状元素
常用：

<img>、<input>

特点：在一行上显示，可以定义宽高

3.标签的转换

4.CSS三大特性
(1)层叠性

<div class="box box1"></div>

当多个样式作用于同一个(同一类)标签，样式发生了冲突，总是执行后边的代码。

(2)继承性

<style type="text/css">
   .father{
       color:red;
       font:40px microsoft yahei;
     }
</style>
<body>
   <div class="father">
      <p>33333</p>
</body>

继承性发生的前提是包含(嵌套关系)
总结：文字的所有属性都可以继承
特殊情况： h系列不能继承文字大小 a标签不能继承文字颜色

(3)优先级
默认样式<标签选择器<类选择器

div{
 color:red !important;
 font-size:60px !important;
}

(4).继承的优先级为0，交集选择器时权重会叠加

5.链接伪类
a:link{属性:值;} a{属性:值}效果一样
a:link{}; 链接默认状态
a:visited{}; 链接访问之后的状态
a:hover{}; 鼠标放在链接上显示的状态
a:active{}; 链接激活的状态
a:focus{}; 获得焦点

6.背景属性
(1)background-image 背景图片

(2)background-repeat repeat|no-repeat|repeat-x|repeat-y 背景平铺 (背景图片方式)

(3)background-position left|right|center|top|bottom 背景定位
background-position:right;
方位值只写一个的时候，另外一个值默认居中
background-position:right bottom ;
方位值写两个时，顺序没有要求
background-position:20px 30px;
方位值写两个具体的值的时候，第一个代表水平，第二个代表垂直

(4)background-attachment scroll|fixed 背景图片是否滚动
如果属性为fixed，那么position的定位为浏览器的边框，而不是父布局的边框

7.背景属性的连写
background:red url(“1.png”) no-repeat 30px 40px scroll; 连写的时候没有顺序要求，url为必写项。

8.行高
(1)浏览器默认文字大小：16px
(2)行高：是基线与基线之间的距离
行高 = 文字高度 + 上下边距
(3)一行文字行高与父元素高度一致的时候，垂直居中显示

9.行高的单位

.box{
   font-size : 20px ;
   line-height:150%;
   }

这里写图片描述

总结：单位除了像素以外，行高都是与文字大小乘积

10.盒子模型—-边框
(1)边框 border
border-top-style : solid 实线 dotted 点线 dashed 虚线
border-top-color: 边框颜色
border-top-width: 边框粗细

(2)边框属性的连写
border-top : red solid 5px ;
特点：没有顺序要求，线型为必写项

(3)边框合并
table cellspacing 属性：规定单元格之间的空间。
边框属性：border-collapse:collapse 可以合并边框

11.表单控件

.name{
    border: 0 none ;  /*去掉外边框*/
    outline-style: none; /*去掉选中时的外边框*/
   }

12.内边距
Padding:20px ; 上右下左内边距都是20px
Padding:20px 30px ; 上下20px ,左右30px
Padding:20px 30px 40px ; 上内边距为20px 左右内边距为30px 下内边距为40px
Padding: 20px 30px 40px 50px ; 上20px ,右30px ,下40px 左50px

内边距指里面的内容距离边框的长度

影响盒子宽度的因素：(1)内边距影响盒子的宽度 (2)边框影响盒子的宽度
盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距

继承的盒子一般不会被撑大
包含(嵌套)的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

13.新浪导航案例
(1)text-align 属性规定元素中的文本的水平对齐方式。让盒子内容居中
(2)margin: 0 auto 让盒子居中

14.外边距
(1)外边距连写
margin:20px ; 上下左右外边距20px
margin:20px 30px ; 上下20px 左右30px
margin:20px 30px 40px ; 上 20px 左右30px
margin:20px 30px 40px 50px 上20px 右30px 下40px 左50px

(2)垂直方向外边距合并
垂直方向的2个盒子，如果都设置了垂直方向外边距，取的是设置的比较大的值

(3)外边距塌陷
嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷
解决方法：
》给父盒子设置边框
》给父盒子设置overflow:hidden

1.浮动布局
（1）.让div在一行显示
（2）.元素浮动之后不占据原来的位置
（3）.浮动的盒子在一行显示
（4）.行内元素浮动之后转换为行内块元素

2.清除浮动
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
(1)伪元素清除浮动法

               .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear:both;
        }
        /*兼容ie浏览器*/
        .clearfix{
            zoom:1;
        }

<body>
    <div class="header"></div>
    <div class="main clearfix">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
    <div class="footer"></div>
</body>

2.Overflow
这里写图片描述

3.定位
定位方向：left | right | top | bottom
(1)position:static : 静态定位。默认值，就是文档流
(2)position:absolute : 绝对定位
特点： *.元素使用绝对定位之后不占据原来的位置(脱标)
*.元素使用绝对定位，位置是从浏览器出发
*.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，自盒子位置从浏览器出发。
*.嵌套的盒子，父盒子使用定位，子盒子绝对定位，自盒子位置从父盒子出发。
*.给行内元素使用绝对定位之后，转换为行内块。

(3)相对定位：position:relative
特点：使用相对定位，位置从自身出发。
★还占据原来的位置。
★子绝父相（父元素相对定位，子元素绝对定位）子元素相对父元素
★行内元素使用相对定位不能转行内块

(4)固定定位 : Position:fixed;
特点：
★固定定位之后，不占据原来的位置（脱标）
★元素使用固定定位之后，位置从浏览器出发。
★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）

4.css内容移除
这里写图片描述
(1)方法一

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  .logo{
    height: 76px;
    width:143px;
    background: url("image/logo.png");
  }
  a{
    display: inline-block;
    text-indent: -5000px;
  }
  </style>
</head>
<body>
  <div class="logo">
    <h1>
      <a href="#">搜狐</a>
    </h1>
  </div>
</body>
</html>

5.精灵图
这里写图片描述

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 68px;
            height: 30px;
            background: url("qq.png") -877px -201px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

7.margin:0 auto ; 只能让标准流的盒子居中对齐，脱表的元素不能使用

8.定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)

<style type="text/css">
  body{
    margin: 0;
    padding: 0;
  }
  .box{
    height: 500px;
    background: #aaa;
    position: relative;
  }
  .nav{
    width: 960px;
    height: 60px;
    background: #666;
    position: absolute;
    left: 50%;
    margin-left: -480px;
    bottom: 0;
  }
  </style>
</head>
<body>
 <div class="box">
   <div class="nav">
   </div>
 </div> 
</body>

9.精灵图：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  body,ul,li{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .box{
    background: #000;
      height: 48px;
      margin-top: 100px;
  }
  .nav{
    width: 1143px;
    height: 48px;
    margin: 0 auto;
    position: relative;
  }
  .nav ul li{
    float: left;
  }
  .nav ul li a{
    display: inline-block;
    color:#fff;
    height: 48px;
    font: 16px/48px 微软雅黑;
    padding: 0 13px;
    text-decoration: none;
  }
  .nav ul li a:hover{
    background: #3A92D0;
  }
  .nav .hot{
    position: absolute;
    width:31px;
    height:21px;
    background: url("image\\sprite.png") -57px 0;
    left: 246px;
    bottom:35px;
  }
  </style>
</head>
<body>
  <div class="box">
    <div class="nav">
      <div class="hot"></div>
      <div class="new"></div>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">UI设计</a></li>
        <li><a href="#">前端与移动开发</a></li>
        <li><a href="#">问答专区</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">C/C++</a></li>
        <li><a href="#">python</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#">活动专区</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

10.属性选择器

input[type=text]{
  width:300px;
  height:300px;
}
input[type=text][class="pwd"]{
}

11.div浮动后宽度由内容撑开

12.css滑动门
这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  body,ul,li{
    margin:0;
    padding: 0;
  }  
  li{
    list-style: none;
    float: left;
  }
  a{
    display: inline-block;
    height: 35px;
    background: url("image/bg_r1_c1.png") no-repeat;
    text-decoration: none;
    padding-left: 7px;
    color: #fff;
  }
  span{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    background: url("image/bg_r1_c2.png") right;
    padding-right: 21px;
  }
  a:hover{
    background: url("image/blue_r1_c1.png");
  }
  span:hover{
    background: url("image/blue_r1_c2.png") right;
  }
  </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li><a href="#"><span>百度一下</span></a></li>
      <li><a href="#"><span>百度</span></a></li>
      <li><a href="#"><span>谷歌</span></a></li>
    </ul>
  </div>
</body>
</html>

13.dt dl dd
这里写图片描述

<div class="footer">
      <div class="foot_con">
        <dl>
           <dt>尚合首页</dt>
           <dd>返回首页</dd>
        </dl>
        <dl>
           <dt>尚合首页</dt>
           <dd>返回首页</dd>
        </dl>
        <dl>
           <dt>尚合首页</dt>
           <dd>返回首页</dd>
        </dl>
        <dl>
           <dt>尚合首页</dt>
           <dd>返回首页</dd>
        </dl>
      </div>
  </div>

==========================================
1.微信滑动门
这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  body,ul,li{
    margin: 0;
    padding: 0;
  }
  .nav{
    height: 63px;
    background: url("image/weixin_bg1d20af.jpg");
  }
  ul{
    width: 700px;
    height: 63px;
    margin: 0 auto;
  }
  ul li{
    list-style: none;
    float: left;  
    height: 63px;
    line-height: 63px;
    margin-right: 44px;
  }
  ul li a{
    display: inline-block;
    height: 33px;
    line-height: 33px;
    color: white;
    text-decoration: none;
    background: url("image/bg.png") no-repeat 0 -144px;
    padding-left: 17px;
  }
  ul li a span{
    display: inline-block;
    height: 33px;
    line-height: 33px;
    background: url("image/bg.png") no-repeat right -144px;
    padding-right: 19px;
  }
  ul li a:hover{
    background: url("image/bg.png") no-repeat 0px -192px;
  }
  ul li a span:hover{
    background: url("image/bg.png") no-repeat right -192px;
  }
  </style>
</head>
<body>
  <div class="nav"> 
        <ul>
          <li><a href="#"><span>首页</span></a></li>
          <li><a href="#"><span>下载</span></a></li>
          <li><a href="#"><span>公共平台公共平台公共平台</span></a></li>
        </ul> 
  </div>
</body>
</html>