CSS

阅读目录

回到顶部

CSS介绍

现在的互联网前端分三层：

      • HTML：超文本标记语言。从语义的角度描述页面结构。
      • CSS：层叠样式表。从审美的角度负责页面样式。
      • JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

      1. 不能够适应多种设备
      2. 要求浏览器必须智能化足够庞大
      3. 数据和显示没有分开
      4. 功能不够强大

CSS 优点：

      1. 使数据和显示分开
      2. 降低网络流量
      3. 使整个网站视觉效果一致
      4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

回到顶部

CSS的引入方式

行内样式

行内样式

内接样式

<style type="text/css">
    /*写我们的css代码*/

span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> yellow</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>



</style>

内接样式

外接样式-链接式

<link rel="stylesheet" href="./index.css">
外接样式-链接式

外接样式-导入式

<style type="text/css">
        @import url('./index.css');
</style>
外接样式-导入式

回到顶部

css选择器

基本选择器：

      • 标签选择器
      • 类选择器
      • id选择器

标签选择器(标签名)

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}
标签选择器

类选择器(.)

所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

类的使用，能够决定前端工程师的css水平到底有多牛逼？在这里一定要有”公共类“的概念。

.lv{
     color: green;

}

.big{

font-size: 40px;

}

.line{

text-decoration: underline;


}

. 类选择器
<!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
</div>
html

id选择器(#)

同一个页面中id不能重复。

任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

#box{
    background:green;
}

s1{


color: red;



}


s2{


font-size: 30px;



}

# id选择器
<body>
    <div id="box">娃哈哈</div>
    <div id="s1">爽歪歪</div>
    <div id="s2">QQ星</div>
</body>
html

高级选择器：

      • 后代选择器
      • 子代选择器
      • 并集选择器(组合选择器)
      • 交集选择器

后代选择器

使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}
后代选择器

子代选择器

使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.container>p{
     color: yellowgreen;
}
子代选择器

并集选择器

多个选择器之间使用 逗号 隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

/*并集选择器*/
h3,a{
    color: #008000;
    text-decoration: none;

}

并集选择器
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
百度首页-并集选择器示例

交集选择器

使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active

比如有一个<h4 class='active'></h4>这样的标签。那么它表示两者选中之后元素共有的特性。

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}
交集选择器

更多选择器：

      • 伪类选择器
      • 伪标签选择器
      • 属性选择器

伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"  LoVe HAte

      /*link表示没有被访问的a标签的样式*/
        .box ul li.item1 a:link{

        color: #666;
    }
    /*visited表示访问过后的a标签的样式*/
    .box ul li.item2 a:visited{
        
        color: yellow;
    }
    /*hover表示鼠标悬停时a标签的样式*/
    .box ul li.item3 a:hover{
        
        color: green;
    }
    /*active表示鼠标摁住的时候a标签的样式*/
    .box ul li.item4 a:active{
        
        color: yellowgreen;
    }</span></pre>
link/visited/hover/active

伪元素选择器(伪标签选择器)

/*设置第一个首字母的样式*/
     p:first-letter{
            color: red;
            font-size: 30px;

    }



/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/

p:before{

content:'alex';

}


/在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）/

p:after{

content:'&';

color: red;

font-size: 40px;

}

first-letter/before/after

属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

            /*根据for属性查找，找到所有又for属性的，设置字体颜色为红色*/
            /*[for]{
                color: red;
            }*/

        /*找到for属性的值等于username的元素 字体颜色设为黄色*/
        /*[for='username']{
            color: yellow;
        }*/
        
        /*以....开头  ^*/ 
        /*[for^='user']{
            color: #008000;
        }*/
        
        /*以....结尾   $*/
        /*[for$='vvip']{
            color: red;
        }*/
        
        /*包含某元素的标签*/
        /*[for*="vip"]{
            color: #00BFFF;
        }*/
        
        /*指定标签的for属性
        其中for属性的值是以空格隔开的值列表，
        user1是值列表中的一个独立值*/
        label[for~='user1']{
            color: red;
        }
        
        input[type='text']{
            background: red;
        }</span></pre>
属性选择器

选择器的权重

有些时候我们可能会给同一个标签设置多个样式，遇到了重叠项的设置又该听谁的呢？这里就要用到选择器的权重。

行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0

css的两大特性 ：继承性和层叠性

继承性：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

记住：有一些属性是可以继承下来 ： color 、 font-、 text-、line-* 。主要是文本级的标签元素。


但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

继承规则

层叠性：权重大的标签覆盖掉了权重小的标签，谁的权重大，浏览器就会显示谁的属性

谁的权重大？

其实就是非常简单的是小学生算数。数：id的数量 class的数量 标签的数量，当然顺序不能乱

/*1  0  0 */显示红色
#box{
    color: red; 
}

/0  1  0/

.container{

color: yellow;

}


/0  0  1/

p{

color: purple;

}

示例

练习1

css样式：
#box1 #box2 p{
     color: yellow;
}

box2 .wrap3 p{


  color: red;



}


div div #box3 p{

color: purple;

}


div.wrap1 div.wrap2 div.wrap3 p{

color: blue;

}


html代码：

<div id='box1' class="wrap1">

<div id="box2" class="wrap2">

<div id="box3" class="wrap3">

<p>再来猜猜我是什么颜色？</p>

</div>

</div>

</div>

代码
黄色
答案

练习2

css代码： 
       #box2 .wrap3 p{
            color: yellow;
        }

    #box1 .wrap2 p{
        color: red;
    }



html代码：

<div id='box1' class="wrap1">

<div id="box2" class="wrap2">

<div id="box3" class="wrap3">

<p>再来猜猜我是什么颜色？</p>

</div>

</div>

</div>

代码
红色
结论：当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。
答案

练习3

css代码：
#box1 #box2 .wrap3{
    color: red;
}

box2 .wrap3 p{


color: green;



}

html代码：

<div id='box1' class="wrap1">

<div id="box2" class="wrap2">

<div id="box3" class="wrap3">

<p>再来猜猜我是什么颜色？</p>

</div>

</div>

</div>

代码
绿色
第一条css设置的属性值，是通过继承性设置成的红色，继承来的属性权重为0。它没有资格跟我们下面选中的标签对比。
答案

练习4

css代码：
#box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}
html代码：
    <div id='box1' class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>再来猜猜我是什么颜色？</p>
            </div>
        </div>
    </div>
代码
红色
权重都是0:那么就是"就近原则" ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。
答案

!important 的使用

！important:设置权重为无限大 
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
！important

选择器总结

使用什么选择器？

      • 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
      • 每个类要尽可能的小，有公共的概念，能够让更多的标签使用
      • id or class in css ？ 尽可能的用class。除非一些特殊情况可以用id，id一般是用在js的。也就是说 js是通过id来获取到标签

 

选择器的权重

      • 先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
      • 如果没有被选中标签元素，权重为0。
      • 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性

回到顶部

盒模型

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。

盒模型示意图

盒模型的属性

width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离

如果让你做一个宽高402*402的盒子，您如何来设计呢？答案有上万种，甚至上亿种。

盒模型的计算 ：width/height+2*padding+2*border

如果一个盒子设置了padding，border，width，height
盒子的真实宽度=width+2*padding+2*border
盒子的真实高度=height+2*padding+2*border
width不等于盒子的真实宽度

如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。

padding的设置

padding有四个方向，分别描述4个方向的padding。描述的方法有两种：

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
1.写小属性,分别设置不同方向的padding
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/上 左右  下/

padding: 20px 30px 40px;


/* 上下 左右*/

padding: 20px 30px;


/上下左右/

padding: 20px;

2.写综合属性，空格隔开

标签的默认padding

比如ul，ol标签，有默认的padding-left值。

那么我们一般在写网页的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

*{
  padding:0;
  margin:0;    
}
通配符选择器

但这种方法效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

border的设置

border:边框的意思，描述盒子的边框

边框有三个要素： 粗细 线性样式 颜色（如不写颜色默认为黑色。如不写粗细不显示边框。只写线性样式，默认有上下左右 3px宽度的实体黑色边框。）

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

/*

border-width: 5px 10px;

border-style: solid dotted double dashed;

border-color: red green yellow;

*/


/设置顺序 ：上 右 左 下/

/border-style: 实线，点状，双线，虚线/

按照三要素来写baoder
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;

border-right-color: red;

border-right-style: solid;


border-bottom-width: 10px;

border-bottom-color: red;

border-bottom-style: solid;


border-left-width: 10px;

border-left-color: red;

border-left-style:solid;

按照方向划分设置小属性
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
按照方向设置
border:none；
border：0；
表示border没有设置样式。
设置border没有样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.box1{
            width: 200px;
            height: 200px;
            border-radius: 20px;
            background-color: #f0809d;
        }
        div.box2{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #7ef0c2;
        }
        div.box3{
            width: 200px;
            height: 200px;
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
            background-color: #b589f0;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>
border-radius属性

利用border画三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 20px;
            border-color: #7ef0c2 transparent transparent transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>
画三角示例

margin的设置

margin：外边距的意思。表示边框到最近盒子的距离。

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;
设置margin
html:
<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>
css:
    *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            border: 1px solid gray;
            /*float: left;*/
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
            /*float: left;*/
        }
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
            /*float: left;*/
        }

/*

当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候注意margin的用法。

当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。

*/

margin的塌陷
div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

    }



/*当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？


设置margin-left:auto；我们发现盒子尽可能远离左侧，当设置margin-right:auto；我们发现盒子尽可能远离右侧。当两条语句并存的时候，我们发现盒子尽可能远离两侧，此时盒子就居中了。


如果给盒子设置浮动，那么margin:0 auto失效。


使用margin：0 auto;注意点：


1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

*/

margin：0 auto;

善于使用父亲的padding，而不是margin

 

margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系.

如果让大家实现如图的效果，应该有不少的同学做不出来。

    *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;

        margin-top: 30px;
    }</span></pre>
错误示例
*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
            border: 1px solid;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 30px;
        }
设置border
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
            padding-top: 30px;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
使用padding

因为父亲没有border，那么儿子margin-top实际上踹的是“流” ，踹的是行，所以父亲掉下来了，一旦给父亲一个border发现就好了。

回到顶部

标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画

标准文档流下 有哪些微观现象？

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
空白折叠现象
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
高矮不齐，底边对齐
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
自动换行，一行写不满，换行写

回到顶部

块级元素和行内元素

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。

我们也学习了行内元素和块级元素的分类，其实这种分类方式是从CSS的角度讲的。

行内元素：

      • 与其他行内元素并排；
      • 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

      • 霸占一行，不能与其他任何元素并列；
      • 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

      • 此时这个div不能设置宽度、高度；
      • 此时这个div可以和别人并排了

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

      • 此时这个span能够设置宽度、高度
      • 此时这个span必须霸占一行了，别人无法和他并排
      • 如果不设置宽度，将撑满父亲

 ps：

复制代码
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动

（2）绝对定位

（3）固定定位

复制代码

回到顶部

浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

      • none: 表示不浮动，默认
      • left: 表示左浮动
      • right：表示右浮动

看一个例子:

复制代码
html: 
<div class="box1"></div>
<div class="box2"></div>
<span>路飞学城</span>

css:

.box1{

width: 300px;

height: 300px;

background-color: red;

float:left;

}

.box2{

width: 400px;

height: 400px;

background-color: green;

float:right;

}

span{

float: left;

width: 100px;

height: 200px;

background-color: yellow;

}

复制代码

效果：

我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。

浮动的四大特性：

浮动的四大特点

一、浮动元素脱标

脱标：就是脱离了标准文档流

示例：

html
    <div class="box1">小红</div>
     <div class="box2">小黄</div>
     <span>小马哥</span>
     <span>小马哥</span>
css:
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;

    }
    .box2{
        width: 400px;
        height: 400px;
        background-color: yellow;
    
    }
    span{
        background-color: green;
        float: left;
        width: 300px;
        height: 50px;
    }</span></pre>
View Code

效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。

说明1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

说明2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

二、浮动元素互相贴靠

html：
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

css：

.box1{

width: 100px;

height: 400px;

float: left;

background-color: red;

}

.box2{

width: 150px;

height: 450px;

float: left;

background-color: yellow;

}

.box3{

width: 300px;

height: 300px;

float: left;

background-color: green;

}

示例

效果发现：

如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

三、浮动元素的字围效果

html：
<div>
        <img src="./images/企业1.png" alt="">    
    </div>
    <p>
        123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
    </p>

css：

*{

padding: 0;

margin: 0;

}

div{

float: left;

}

p{

background-color: #666;

}

示例

效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

四、浮动元素的紧凑效果

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

html：
<div>
     alex
</div>

css：

div{

float: left;

background-color: red;

}

示例

大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，

浮动的问题和清除浮动 

浮动的问题

在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）

大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。

html:
<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

</div>


<div class="father2"></div>


css：

*{

padding: 0;

margin: 0;


    }
    .father{
        width: 1126px;
        /*子元素浮动 父盒子一般不设置高度*/

        /*出现这种问题，我们要清除浮动带来影响*/
        /*height: 300px;*/

    }
    .box1{
        width: 200px;
        
        height: 500px;
        float: left;
        background-color: red;
    }
    .box2{
        width: 300px;
        height: 200px;
        float: left;
        background-color: green;
    }
    .box3{
        width: 400px;
        float: left;
        height: 100px;
        background-color: blue;
    }
    .father2{
        width: 1126px;
        height: 600px;
        background-color: purple;
    }</span></pre>
示例

效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。

那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动

清除浮动

给父盒子设置高度

这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

clear:both

clear：意思就是清除的意思。

有三个值：

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

html:
<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>

    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span>



</div>

<div class="box">


</div>


css：

*{

padding: 0;

margin: 0;

}

ul{

list-style: none;


    }


    div{
        width: 400px;
    
    }
    

    div ul li {
        float: left;
        width: 100px;
        height: 40px;
        background-color: red;
    }
    .box{
        width: 200px;
        height: 100px;
        background-color: yellow;
    }
    .clear{
        clear: both;
    }</span></pre>
示例
伪元素清除法(常用)

给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}
css示例
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden
新浪首页清除浮动伪元素方法
overflow:hidden

overflow属性规定当内容溢出元素框时发生的事情。

说明：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

有五个值：

值描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

 

回到顶部

定位

定位有三种：相对定位、绝对定位、固定定位

相对定位：相对于自己原来的位置定位

现象和使用：

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

特性：1.不脱标  2.形影分离  3.老家留坑（占着茅房不拉屎，恶心人）

所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途：

1.微调元素位置

2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。

绝对定位

特性：1.脱标  2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

参考点(重点)：

一、单独一个绝对定位的盒子

1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

还要注意，绝对定位的盒子无视父辈的padding

作用：页面布局常见的“父相子绝”，一定要会！！！！

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

        /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
    }</span></pre>
绝对定位中的居中

固定定位 

固定当前的元素不会随着页面滚动而滚动

特性: 1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

回到顶部

z-index

指的就是各个盒子重叠在一起谁上谁下的问题。

四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。

      • z-index 值表示谁压着谁，数值大的压盖住数值小的，
      • 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
      • z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
      • 从父现象：父亲怂了，儿子再牛逼也没用

回到顶部

文本属性和字体属性

文本属性

属性 描述 属性值  说明
text-align 文本对齐方式

none

center

left

right

justify

  
color 文本颜色    
text-indent 首行缩进，单位建议em    
text-decoration 规定文本修饰的样式 

none   

underline  

overline  

line-through

inherit 

默认

下划线

定义文本上的一条线

定义穿过文本下的一条线

继承父元素text-decoration属性的值 
line-height 行高    

针对单行文本垂直居中

公式：行高=盒子高度，

使文本垂直居中，只适用单行文本。

针对多行文本垂直居中

行高不能小于字体，不然字会紧挨一起。
text-shadow  阴影  5px 5px 5px #FF0000

水平方向偏移量

垂直方向偏移量

模糊度

阴影颜色
text-overflow  文字溢出

clip

ellipsis

修剪文本

显示省略号代表被修剪文本
 white-space

处理元素内的空白 

normal

pre

nowrap

pre-wrap

pre-line

inherit

默认。空白被浏览器忽略。

空白会被浏览器保留

文本不换行，直到遇到 <br>

保留空白符序列，但正常地进行换行

合并空白符序列，但是保留换行符

继承父元素 white-space 属性的值

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        .div0 {
            width: 300px;
            border: 1px solid darkblue;
        }
        .div1 {
            width: 300px;
            border: 1px solid red;

        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">强制在一行内显示</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        white-space</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> nowrap</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">超出部分隐藏</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div2 </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid black</span><span style="background-color: #f5f5f5; color: #000000;">;</span>

        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">强制在一行内显示</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        white-space</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> nowrap</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">超出部分隐藏</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">修剪超出的文本</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        text-overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> clip</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div3 </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid chocolate</span><span style="background-color: #f5f5f5; color: #000000;">;</span>

        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">强制在一行内显示</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        white-space</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> nowrap</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">超出部分隐藏</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">显示省略符号来代表被修剪的文本</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        text-overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> ellipsis</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>



</head>

<body>

<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

</body>

</html>

文字溢出

字体属性

属性 描述 属性值 说明
font-size 字体大小    
font-weight 字体粗细

none

bold

border

lighter

100~900

inherit

默认值，标准粗细

粗体

更粗

更细

值，400=normal，700=bold

继承父元素字体的粗细值
font-family 字体系列 "Microsoft Yahei","微软雅黑", "Arial", sans-serif 浏览器使用它可识别的第一个值 

 

1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。 
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

2.为了防止用户电脑里面，没有微软雅黑这个字体。

就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，

没有安装微软雅黑字体，那么就是宋体：

font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。

3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，

就自动的变为后面的中文字体：

font-family: "Times New Roman","微软雅黑","宋体";


4.所有的中文字体，都有英语别名，

我们也要知道： 微软雅黑的英语别名：

font-family: "Microsoft YaHei";

宋体的英语别名： font-family: "SimSun";

font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";


5.行高可以用百分比，表示字号的百分之多少。

一般来说，都是大于100%的，因为行高一定要大于字号。

font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;

反过来，比如： font:16px/48px “宋体”;

等价于 font:16px/300% “宋体”

使用font-family注意几点

回到顶部

background

给元素设置padding之后，发现padding的区域背景和content部分的一致。

background-color —— 背景颜色

css: 
   <style>
       .demo{
           width: 50px;
           height: 100px;
           background-color: greenyellow;
       }
    </style>
html:
<body>
<div class="demo"></div>
</body>
设置背景色

background-image —— 背景图片

css:
     <style>
       .demo{
           width: 2000px;
           height: 1500px;
           background-image: url('./images/xxx.jpg');
       }
    </style>
html:
    <body>
    <div class="demo"></div>
    </body>
设置背景图片

那么发现默认的背景图片，水平方向和垂直方向都平铺

背景图片相关配置 ：background-repeat，background-position，background-attach
background-repeat：设置背景图像的平铺方式

repeat

repeat-x

repeat-y

no-repeate

inherit

默认。背景图像将在垂直方向和水平方向重复

背景图像将在水平方向重复

背景图像将在垂直方向重复

背景图像将仅显示一次

规定应该从父元素继承 background-repeat 属性的设置
background-position：设置背景图像的起始位置

垂直位置 水平位置

 

可以从两个纬度上设定关键词：上中下 左中右

垂直位置：top center bottom

水平位置：left center right

如仅规定了一个关键词，那么第二个值将是"center"。

默认值：0 0；

这两个值必须挨在一起。
background-attachment：设置固定的背景图像

scroll

fixed

inherit

默认值。背景图像会随着页面其余部分的滚动而移动。

当页面的其余部分滚动时，背景图像不会移动。

规定应该从父元素继承 background-attachment 属性的设置。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            height: 500px;
            background: url("hulu.jpg") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: rgba(132,0,255,0.2);
        }
        .d2 {
            height: 500px;
            background-color: rgba(132,255,255,0.2);
        }
        .d3 {
            height: 500px;
            background-color: rgba(0,255,0,0.2);
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>

</body>

</html>

滚动背景图示例

background属性的简写

background：#ffffff url('1.png') no-repeat right top;

 

回到顶部

posted @ 2019-09-18 15:05  若如初见_you  阅读(170)  评论(0)  编辑  收藏  举报