前端基础笔记

来源：互联网发布：启航电商网络平台兼职编辑：程序博客网时间：2024/05/16 17:06

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>

这里写图片描述

阅读全文

0 0