045_CSS

一，CSS介绍

　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

二，CSS语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/

　　

三，CSS的几种引入方式

　　3.1，行内样式

　　　　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

　　3.2，内部样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            /*内部样式*/
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

　　3.3，外部样式

 　　　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

　　

四，CSS选择器

4.1，基本选择器

　　4.1.1，元素/标签 选择器

p {color: "red";}　　/*所有p标签*/

被修饰标签举例
<p style="color:blue">标签选着器  P标签字体颜色2</p>

　　4.1.2，ID选择器

/*ID选着器*/
#P3 { color: black;}  /*所有标签id是P3的*/

被修饰标签举例
<p id="P3">ID选着器字体P3</p>

　　4.1.3，类选择器

/*类选着器*/
.c1 { color: yellow;}       /* 所有类名是c1的 */

p.c1 { font-size: 14px;}   /* p标签中所有类名是c1的 */

.c2,                        /* 使用多个类，用逗号隔开 */
.c3{
    color: #ff6700;
}

被修饰的标签举例
<p class="c1">类选着器字体</p>
<p class="c1">类选着器字体</p>
<p class="c1 c2 c3">类选着器字体</p>  /*多个类，用空格分隔*/

注意：

标签中样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

 CSS中使用多个类定义同一个样式时，多个类要用逗号隔开。

 

　　4.1.4，通用选择器

* {               /* 所有标签的样式 */   
  color: white;
}

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入示例</title>

    <!--第 1 种 p 标签内容设置颜色，分别使用，不然按顺序最后一个-->
    <style>
        p{color:green;}
    </style>
    <!--第 2 种 p 标签内容设置颜色，分别使用，不然按顺序最后一个-->
    <link rel = "stylesheet" href = "index_CSS.css">    <!--引入css文件-->

</head>
<body>

<p>标签选着器  P标签字体颜色1</p>
<!--第 3 种 p 标签内容设置颜色，分别使用，不然按顺序最后一个-->
<p style="color:blue">标签选着器  P标签字体颜色2</p>

<p id="P3">ID选着器字体P3</p>

<p class="c1">类选着器字体</p>
<p class="c1">类选着器字体</p>
<p class="c1 c2 c3">类选着器字体</p>

</body>
html
/*格式顺序*/
    /*解释性的信息*/
    /*全局通用样式*/
    /*商品列表样式*/

/*标签选着器*/
p { color: red;           /*所有p标签*/
    font-size: 18px
}

/*ID选着器*/
#P3 { color: black;}   /*所有标签id是P3的*/

/*类选着器*/
.c1 { color: yellow;}
p.c1 { font-size: 14px;}   /* p标签中所有类名是c1的 */

.c2,
.c3{
    color: #ff6700;
}
CSS

 

4.2，组合选择器

　　4.2.1，后代选择器

/*后代选择器*/
#d1 p { color: red;}    /*从id是d1的标签里找后代（儿子，孙子）中的所有p标签*/

　　4.2.2，儿子选择器

/*儿子选择器*/
#d1>p { color: greenyellow;}   /*从id是d1的标签里找儿子中的所有p标签*/

　　4.2.3，毗邻选择器

/*毗邻选择器*/
div+p { color: yellow;}    /*找同一级别嵌套里面的上一个是div标签的p标签*/
　　　　　　　　　　　　　　　　　/*选择所有紧接着<div>元素之后的<p>元素*/

　　4.2.4，弟弟选择器

/*弟弟选择器*/
p~div { color: blue;}   /*p标签后面所有的兄弟(同级嵌套中的)div标签*/

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>组合选择器示例</title>
 6     <link rel="stylesheet" href="组合选择器CSS.css">
 7 </head>
 8 <body>
 9 
10 <!--后代,儿子-->
11 <div id="d1">
12     <p>我是嵌套在div中的p标签</p>
13     <span>我是嵌套在div中的span标签</span>
14     <div>
15         <p>我是嵌套在div中div中的p标签</p>
16         <span>我是嵌套在div中div中的span标签</span>
17     </div>
18 </div>
19 
20 <!--毗邻-->
21 <div>毗邻11</div>
22 <p>毗邻22</p>
23 
24 <!--弟弟-->
25 <p>弟弟11</p>
26 <div>弟弟222</div>
27 <div>弟弟333</div>
28 
29 </body>
30 </html>
html
/*组合选择器示例的CSS文件*/

/*后代选择器*/
#d1 p { color: red;}    /*从id是d1的标签里找后代（儿子，孙子）中的所有p标签*/

/*儿子选择器*/
#d1>p { color: greenyellow;}   /*从id是d1的标签里找儿子中的所有p标签*/

/*毗邻选择器*/
div+p { color: yellow;}    /*找同一级别嵌套里面的上一个是div标签的p标签*/

/*弟弟选择器*/
p~div { color: blue;}   /*p标签后面所有的兄弟(同级嵌套中的)div标签*/
CSS

 

4.3，属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例</title>
    <link rel="stylesheet" href="属性选择器CSS.css">
</head>
<body>

<p s9="hao">我是一个p标签</p>
<p s9="good">我也是一个p标签</p>

<p s9="meima">我是一个p标签</p>
<p s9="meier">我是一个p标签</p>

<p>我是一个没有id的p标签</p>

<p s9="mingtian">我是一个p标签</p>
<p s9="huaitian">我是一个p标签</p>

<p s9="minghello ">我是一个p标签</p>
<p s9="huaihello">我是一个p标签</p>

<p s9="huai hello">我是一个p标签</p>


</body>
</html>
html
/*用于选取带有指定属性的元素*/
[s9] { color: red;}

/*限定属性是hao的*/
[s9="hao"] { color: greenyellow;}

　　

/*以mei开头的*/
[s9^="mei"] { color: brown;}

/*以tian结尾的*/
[s9$="tian"] { color: darkblue;}

/*属性名中包含hello的*/
[s9*="hello"] { color: cyan;}

/*属性为多个值时，其中一个值为 hello的元素*/
[s9~="hello"] { color: coral;}
其他不常用的

4.4，分组和嵌套

　　4.4.1，分组

　　当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

HTML示例：

被修饰标签示例
<div id="d1">我是一个div标签</div>
<p>我是一个p标签</p>

　　下面CSS文件内容：

/*当样式有重复的时候, 选择器可以放在一起,之间用","隔开*/
div { color: red;}
p { color: red;}
/*上两句可以写成下面的方式*/
#d1,
p { color: red;}      /*推荐分行写选择器*/

　　4.4.2，嵌套

　　HTML示例：

<div class="c1">
    <P>嵌套1</P>
</div>

　　多种选择器可以混合起来使用，（组合选择器）

/*多种选择器可以混合起来使用*/
#d2+p { color: blue;}
/*c1类内部所有p标签设置字体颜色为红色*/
.c1 p { color: greenyellow;}

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套示例</title>
    <link rel="stylesheet" href="分组和嵌套CSS.css">
</head>
<body>

<div id="d1">我是一个div标签</div>
<p>我是一个p标签</p>

<div id="d2">我是一个div标签</div>
<p>我是一个p标签</p>


<div class="c1">
    <P>嵌套1</P>
</div>



</body>
</html>
html
/*分组和嵌套示例*/

/*当样式有重复的时候, 选择器可以放在一起,之间用","隔开*/
div { color: red;}
p { color: red;}
/*上两句可以写成下面的方式*/
#d1,
p { color: red;}      /*推荐分行写选择器*/

/*嵌套使用选择器*/
/*多种选择器可以混合起来使用*/
#d2+p { color: blue;}
/*c1类内部所有p标签设置字体颜色为红色*/
.c1 p { color: greenyellow;}
CSS

4.5，伪元素选择器

　　标签选择器：伪类属性{属性}

　　4.5.1，first-letter

 /*<!--第一个字样式-->*/
p:first-letter {
    font-size: 48px;
    color:red;
}

　　4.5.2，before

/*在每个c1段落前加内容*/
.c1:before {
　　content: "*";
　　color: red;
}

　　4.5.3，after

/*在每个c1段落后加内容*/
.c1:after {
　　content: "[?]";
　　color: blue;
}

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为元素选择器示例</title>
    <style>
        /*<!--第一个字样式-->*/
        p:first-letter {
            font-size: 48px;
            color:red;
        }

        /*在每个c1段落前加内容*/
        .c1:before {
            content: "*";
            color: red;
        }

        /*在每个c1段落后加内容*/
        .c1:after {
            content: "[?]";
            color: blue;
        }

        /*段落字体*/
         p {
             font-size: 30px;
         }
    </style>
</head>
<body>

<p>
    木马最核心的一个要求必须是能够将服务器端植入目标主机
    木马最核心的一个要求必须是能够将服务器端植入目标主机
    木马最核心的一个要求必须是能够将服务器端植入目标主机
</p>

<p class="c1">木马最核心的一个要求必须是能够将服务器端植入目标主机</p>
<p class="c1">木马最核心的一个要求必须是能够将服务器端植入目标主机</p>
<p class="c1">木马最核心的一个要求必须是能够将服务器端植入目标主机</p>




</body>
</html>
实例

　　4.5.4，其它部分伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类属性</title>
    <style>
       /*更改没有点过的链接标签样式*/
        a:link {
            color: burlywood;
        }

        /*更改点过的链接标签样式*/
        a:visited {
            color: green;
        }

        /*鼠标移上去链接标签变色*/
        a:hover {
            color:deeppink;
        }

        /*这些其他标签也可以用*/
        #d1:hover {
            color: greenyellow;
        }

        /*被选定链接标签变色*/
        a:active {
            color:blueviolet;
        }

        /*input获取光标时，输入栏的样式*/
        input:focus {
            outline: 0;
            background-color: blue;
        }


    </style>

</head>
<body>

<!--访问过和未方位过的标签有颜色区别，可以修改-->
<a href="http://www.sogo.com">搜狗</a>
<!--注意下面这个标签不要点，用于区分是否点过，点了也没事，这个链接点不开不会有记录-->
<!--点过后会一直有记录，可以更改这个连接，或则清除浏览器的历史记录-->
<a href="http://www.sogoddd.com">不要点</a>

<div id="d1">我是div标签</div>

<input type="text">

</body>
</html>
实例

 

五，选择器的优先级

5.1CSS继承

　　继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

　　此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

　　我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}

　　此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

5.2，选择器的优先级

　　我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

　　其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用  !important

5.3，样式文件优先级

1. 内联样式(直接在标签里面写style) 优先级最高
2.选择器都一样的情况下,谁靠近标签谁就生效
3. 选择器不同时 计算权重来判断

六，CSS属性相关

6.1，宽和高

width   属性可以为元素设置宽度。

height  属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

6.2，字体属性

　　6.2.1，文字字体

　　font-family  可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。（浏览器使用你设定的且浏览器支持的字体显示你的内容，如不支持，依次选择后面的备选项字体）

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

　　6.2.2，字体大小

p {
  font-size: 14px;
}

　　如果设置成  inherit  表示继承父元素的字体大小值。

　　6.2.3，字重（粗细） 

　　　　font-weight   用来设置字体的字重（粗细）

值描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值

　　6.2.4，文本颜色

　　颜色属性被用来设置文字的颜色。

　　颜色是通过CSS最经常的指定：

    • 十六进制值 - 如: ＃FF0000
    • 一个RGB值 - 如: RGB(255,0,0)
    • 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

.c2 {
    font-weight: 900;
    /*color: red;*/
    /*color: rgb(255,0,0);*/
    /*color: #b5282f;*/
    /*颜色加透明度*/
    color: rgba(255,0,0,0.3)
}

　　

6.3，文字属性

　　6.3.1，文字对齐

　　　　text-align 属性规定元素中的文本的水平对齐方式。

值描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

　　6.3.2，文字装饰

　　　　text-decoration 属性用来给文字添加特殊效果。

值描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

　　　　常用的为去掉a标签默认的自划线：

/*去掉a标签的下划线*/
a {
    text-decoration: none;
}

　　6.3.3，首行缩进

　　　　将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <link rel="stylesheet" href="03字体属性CSS.css">
</head>
<body>

<h1>海燕</h1>
<p>在苍茫的大海上</p>

<p class="c0">默认的p</p>
<p class="c1">100 c1</p>
<p class="c2">900 c2</p>

<p class="c3">
    围城是钱钟书所著的长篇小说。第一版于1947年由上海晨光出版公司出版。
    故事主要写抗战初期知识分子的群相。《围城》是中国现代文学史上一部风格独特的讽刺小说。
    被誉为“新儒林外史”。从印度洋上驶来的法国邮船白拉日隆子爵号在上海靠了岸。
</p>

<a href="http://www.sogo.com">sogo</a>

</body>
</html>
html
/*
文件说明
作者
2018-03-07
*/

/*全局的样式*/
* {
    font-family: ".PingFang SC","微软雅黑", "Microsoft YaHei", "Arial";
    font-size: 14px;
}

.c1 {
    font-weight: 100;
}

.c2 {
    font-weight: 900;
    /*color: red;*/
    /*color: rgb(255,0,0);*/
    /*color: #b5282f;*/
    /*颜色加透明度*/
    color: rgba(255,0,0,0.3)
}

.c3 {
    /*text-align: center;*/
    /*text-align: right;*/
    text-align: justify;
    text-decoration: underline;
    text-indent: 28px;
}

/*去掉a标签的下划线*/
a {
    text-decoration: none;
}
CSS

 

6.4，背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景相关属性</title>
    <style>
        /*<!--标签背景颜色-->*/
        .c0 {
            background-color: cornflowerblue;
        }

        /*电脑上的坐标系的原点是空间的左上角，水平向左是x轴，垂直向下是y轴*/
        /*被定位的图也是以图的左上角为参考点*/
        /*背景图片*/
        .c1 {
            /*定义标签高度和宽度*/
            width: 600px;
            height: 600px;

            /*加上边框*/
            border: 1px solid black;

            /*设置背景图，多个该图片铺满*/
            background-image: url("huluwa.png");

            /*对背景图的是否重复repeat属性设置*/
            background-repeat: no-repeat; /*设置成不重复*/
            /*background-repeat: repeat-x;  !*仅 X 轴，多个图片铺满*!*/
            /*background-repeat: repeat-y;  !*仅 Y 轴，多个图片铺满*!*/

            /*背景图片的位置position*属性设置*/
            background-position: center;   /*放入中心*/
            /*background-position: 50% 50%;  !*设x，y轴的占比，设置图片位置*!*/
            /*background-position: 200px 200px; !*x，y轴分别移动200像素*!*/

            /*可以把上面的三个属性简写成下面的方式*/
            /*background: cornflowerblue url("huluwa.png") no-repeat 50% 50%;*/
        }
    </style>
</head>
<body>

<div class="c0">我是div</div>

<div class="c1"></div>

</body>
</html>
背景属性设置实例

　　支持简写：

.c1 {
    background:#ffffff url('1.png') no-repeat right top;
    background: cornflowerblue url("huluwa.png") no-repeat 50% 50%;
}

background: 背景色 图片路径 铺设方式 图片位置

　　使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

参考链接点我

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景不动效果示例</title>
    <style>
        .c1 {
            height: 500px;
            background: red;

        }
        .c2 {
            height: 500px;
            background: url("http://seopic.699pic.com/photo/50061/5300.jpg_wh1200.jpg") no-repeat center;
            background-attachment: fixed;  /*把背景图固定*/
        }

        .c3 {
            height: 500px;
            background-color: green;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>


</body>
</html>
背景固定实例

6.5，边框

　　6.5.1，边框属性 

    • border-width
    • border-style
    • border-color
#i1 {
  border-width: 2px;       /*宽度*/
  border-style: solid;      /*样式*/
  border-color: red;       /*颜色*/
}

　　通常使用简写方式：

#i1 {
  border: 2px solid red;
}

　　6.5.2，边框样式

值描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

　　6.5.3，除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;

  /*border-right: 10px solid green;*/
}

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框示例</title>
    <style>
        div {
            /*定义标签的高度，宽度，颜色*/
            height: 200px;
            width: 300px;
            background-color: red;

            /*边框*/
            /*border-width: 10px;  !*宽度*!*/
            /*border-color: green; !*颜色*!*/
            /*border-style: solid; !*样式*!*/

            /*边框属性可以简写*/
            /*border: 10px solid green;*/

            /*border-right: 10px solid green;*/
        }
    </style>
</head>
<body>


<div></div>

</body>
</html>
html

6.6，border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

6.7，display 属性

用于控制HTML元素的显示效果。

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

 

display:"none"与visibility:hidden的区别：

　　visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

　　display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        .c1 {
            background-color: red;
            display: none; /*不在浏览器上显示该标签*/
            display: inline; /*将标签变为行内的*/
            visibility: hidden;
            height: 100px;
        }

        .c2 {
            background-color: green;
            /*display: block; !*行内标签变为块内的*!*/
            width: 1000px;
        }

        ul {
            /*去掉小圆点*/
            list-style-type: none;
        }

        li {
            display: inline;
            /*padding: 20px;*/
            /*border-right: 1px solid #666;  !*右边加竖线*!*/
        }

        li.last {
            border-right: none; /*last的右边不见竖线*/
        }

        /*使用将li标签下的a标签放宽，和使用将ul下的li标签放宽，都能达到让选项间距分隔开来*/
        /*但使用第一中方法同时也可以放大用户能选中选项的区域，即用户点击字外附近的空白也可以选中该选项*/
        li>a {
            border-right: 1px solid red;
            padding: 0 15px;
        }
    </style>
</head>
<body>

<div class="c1">div</div>
<span class="c2">span</span>
<span class="c2">span</span>

<ul>
    <li><a href="">玉米商城</a></li>
    <li><a href="">电脑</a></li>
    <li><a href="">手机</a></li>
    <li class="last"><a href="">爆米花</a></li>
</ul>


</body>
</html></html>
html

6.8， CSS盒子模型

  • margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • padding:           用于控制内容与边框之间的距离；   
  • Border(边框):     围绕在内边距和内容外的边框。
  • Content(内容):   盒子的内容，显示文本和图像。

看图吧：

　　6.8.1，margin外边距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

　　推荐使用简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

/* 合在一起写，顺序为：上右下左 */

　　常见  居中  方式：

.mycenter {
  margin: 0 auto;
}

　　6.8.2，padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

　　推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

/* 顺序：上右下左 */

补充padding的常用简写方式：

  • 提供一个，用于四边；
  • 提供两个，第一个用于上－下，第二个用于左－右；
  • 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
  • 提供四个参数值，将按上－右－下－左的顺序作用于四边；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>


        /*<!--对浏览器初始化，以免浏览器自己的默认值产生影响-->*/
        /** {*/
            /*margin: 0;*/
            /*padding: 0;*/
        /*}*/

        .c1 {
            /*内部范围*/
            height: 200px;
            width: 300px;
            border: 5px solid green;  /*边框*/

            /*外边距，用于调整标签间的距离*/
            /*margin-top: 5px;*/
            /*margin-right: 10px;*/
            /*margin-bottom: 15px;*/
            /*margin-left: 20px;*/

            /*合在一起写，上右下左*/
            /*margin: 5px 10px 15px 20px;*/
            /*只写两个时，第一个值上下，第二个值左右*/
            /*margin: 20px 30px;*/
            /*上下是零，左右自动调整*/
            /*margin: 0 auto;*/

            /*内边距，用于调整内容和边框的距离*/
            /*padding: 20px 30px;*/
            /*padding: 10px 20px 30px;*/

            /*外边距合并*/
            /*将c1的下外边距设为50像素，c2的上外边距设为100像素，此时会产生边距合并，并以最大的一个外边距为准*/
            /*margin-bottom: 50px;*/
        }



        .c2 {
            height: 100px;
            width: 100%;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<div class="c2"></div>

</body>
</html>
html

 

6.9，float  浮动

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

　　6.9.1，三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

参考示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float页面布局</title>
    <style>
        /*<!--所有标签在设成float标签时都会变成块级标签-->*/
        /*设置成float标签后，在一行必须放的下该标签，放不下就会另起一行*/
        * {
            margin: 0;
            padding: 0;
        }

        .c1 {
            height: 1000px;
            width: 20%;
            background-color: red;
            float: left;
        }

        .c2 {
            height: 1000px;
            width: 80%;
            background-color: green;
            float: left;
        }

        a {
            float: left;
            width: 1000px;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>

<a href="">我是a标签</a>

</body>
</html>
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float下午版</title>
    <style>
        #d1 {
            border: 1px solid black;
        }
        .c1 {
            height: 50px;
            width: 50px;
            background-color: blue;
            border: 1px solid red;
            float: left;
        }

        /*正常来说c2的内容应该从div标签的左上角开始的，但浏览器为了渲染，就会不会和浮动的标签重合。*/
        .c2 {
            height: 30px;
            /*clear: right;*/
            background-color: lawngreen;
        }

        .c3 {
            height: 200px;
            background-color: red;
        }

        /*清除浮动产生的副作用*/
        /*#d1:after {*/
            /*content: "";*/
            /*clear: both;*/
            /*display: block;*/
        /*}*/

        /*或者用类的方式，之后某个标签需要就可以在标签添加该类就可以了*/
        /*.clearfix:after {*/
            /*content: "";*/
            /*clear: both;*/
            /*display: block;*/
        /*}*/

    </style>
</head>
<body>

<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c2"></div>

</div>

<div class="c3">我是正常的内容块</div>

</body>
</html>
html

6.10，clear   清除浮动

　　clear属性规定元素的哪一侧不允许其他浮动元素。

值描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

　　注意：clear属性只会对自身起作用，而不会影响其他元素。

　　6.10.1，解决 float 的副作用

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

      • 固定高度
      • 伪元素清除法
      • overflow:hidden

　　伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: left;
}

　　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动示例</title>
    <style>
        #d1 {
            border: 1px solid black;
        }

        .c1,
        .c2 {
            float: left;
            height: 100px;
            width: 100px;
        }

        /*因为c1,c2标签设定成了浮动的，就会脱离出div标签的范围，相当与不是div内的标签，会出现问题。*/
        /*因此使用下面的语句，在div标签中内容的后面加上一个空内容，且设定其左边不能有浮动的标签*/
        /*如此，最后加入的内容就会只能另起一行放在c1,c2标签的后面，而这个内容是在div标签范围内的内容，
        因此会将div标签的范围扩充的该内容的位置，从而达到动态包含浮动标签c1,c2的目的*/
        /*#d1:after {*/
            /*content: "急急急";*/
            /*clear: left;*/
            /*display: block;*/
        /*}*/

    </style>
</head>
<body>

<div id="d1">
    <div class="c1">c1</div>
    <div class="c2">c2</div>

</div>

</body>
</html>
html

 

6.11, overflow溢出属性 

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

 

  • overflow（水平和垂直均设置）
  • overflow-x（设置水平方向）
  • overflow-y（设置垂直方向）

　　6.11.1，文本框 及 圆头像 实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出示例</title>
    <style>
        /*<!--内容溢出解决-->*/
        .c1 {
            width: 120px;
            height: 120px;
            border: 1px solid black;

            /*标签内的内容过多超出标签的范围而溢出，可通过下面的方式解决*/
            /*overflow: scroll; !*以滚轴方式显示*!*/
            overflow: auto; /*自动设置方式*/
            /*overflow: hidden; !*内容会被剪切，溢出的内容不显示*!*/
        }

        /*头像的设置示例*/
        .header-img {
            width: 120px;
            height: 120px;
            /*设置边框*/
            border: 2px solid red;
            /*设置边框分别从距离四个顶点的什么位置开始画弧线的，从50%开始之后的都会一样*/
            border-radius: 100%;
            /*限定完标签的范围，还有溢出边框的，将溢出的部分隐藏*/
            overflow: hidden;
        }

        /*设置图片的最大是父标签的100%*/
        img {
            max-width: 100%;
        }

    </style>
</head>
<body>

<div class="c1">
    绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒
    绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒
    绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒绝对路径法拉第老夫洛克菲勒
</div>

<div class="header-img">
    <img src="lp.jpg" alt="">
</div>


</body>
</html>
文本框 及 圆头像 实例

 

6.12，定位（position）

　　提示：先看属性标题再看实例之后再看属性讲解

　　6.12.1，static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。

　　6.12.2，relative（相对定位）

　　相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

　　注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

 

　　6.12.3，absolute（绝对定位）

　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

　　重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

　　另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

　　6.12.4，fixed（固定）

　　fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

　　在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

　　6.12.5，定位实例 及 说明

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定位示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c1,
        .c2,
        .c3,
        .c4,
        .c4-father{
            height: 150px;
            width: 150px;
        }

        .c1 {
            background-color: red;
        }

        /*相对定位，是相对于原位置移动显示效果*/
        /*但原位置还是由该元素占据着。并不会因为该元素的移动而照成其它元素的移动，*/
        /*显示效果的地方会将原地方的内容覆盖*/
        .c2 {
            background-color: green;
            /*相对定位relative，相对于原来在的位置距离*/
            position: relative;
            left: 400px;
            top: 150px;
        }
        .c3 {
            background-color: blue;
        }

        /*绝对定位,相对与被定位过之后的父标签的效果显示位置的位置距离*/
        .c4 {
            background-color: deeppink;
            /*绝对定位absolute，*/
            position: absolute;
            top: 150px;
            left: 400px;
        }
        .c4-father {
            background-color: grey;
            position: relative;
            left: 150px;

        }

        /*固定定位，将该标签固定在屏幕的一个位置不动*/
        .fixed-test {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: grey;
        }

    </style>
</head>
<body>

<div class="c1">c1</div>
<div class="c2">c2</div>
<div>阿诗丹顿多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</div>
<div class="c3">c3</div>

<div class="c4-father">
    c4-father
    <div class="c4">c4</div>
</div>

<div class="fixed-test">返回顶部</div>

</body>
</html>
定位 html

 

6.13，z-index  深度

#i2 {
  z-index: 999;
}

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
  2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
  3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
  4. 从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>z-index示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .c1 {
           height: 150px;
            width: 150px;
            background-color: red;
            position: relative;
            /*设置该块的深度，即坐标z轴，将该红块放到绿块上面*/
            z-index: 2;
        }
        .c2 {
            height: 200px;
            width: 200px;
            background-color: green;
            position: relative;
            top: -150px;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>青春版模态框示例</title>
    <style>
        .cover {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 999;
        }
        .modal {
            width: 600px;
            height: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -300px;
            z-index: 1000;
        }
    </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>

</body>
</html>
深度弹窗实例 HTML

6.14，opacity

　　用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明

七，综合示例

7.1，顶部导航菜单

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li标签的float示例</title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: #b0b0b0; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服务</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">优品</a></li>
  </ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>

顶部导航菜单示例
顶部导航栏

7.2，博客示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Blog页面示例</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>

<!-- 左边栏 开始-->
<div class="left">
    <!--头像 开始-->
    <div class="header-img">
        <img src="http://b-ssl.duitang.com/uploads/item/201610/01/20161001133634_dckjS.jpeg" alt="">
    </div>
    <!--头像结束-->

    <div class="blog-name">小强的狗窝</div>

    <div class="blog-info">这条狗很懒,什么都没有留下.</div>

    <!-- 连接区 开始-->
    <div class="blog-links">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">关于你</a></li>
            <li><a href="">关于他</a></li>
        </ul>
    </div>
    <!--连接区 结束-->

    <!-- 文章分类 开始-->
    <div class="blog-tags">
        <ul>
            <li><a href="">JS</a></li>
            <li><a href="">CSS</a></li>
            <li><a href="">HTML</a></li>
        </ul>
    </div>
    <!--文章分类 结束-->
</div>
<!-- 左边栏 结束-->

<!--右边栏 开始-->
<div class="right">
    <div class="article-list">
        article-list

        <div class="article">
            article
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-03-07</span>
            </div>
            <div class="article-info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
            </div>
            <div class="article-tag">
                #HTML #CSS
            </div>
        </div>

        <div class="article">
            article
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-03-07</span>
            </div>
            <div class="article-info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
            </div>
            <div class="article-tag">
                #HTML #CSS
            </div>
        </div>

        <div class="article">
            article
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-03-07</span>
            </div>
            <div class="article-info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
            </div>
            <div class="article-tag">
                #HTML #CSS
            </div>
        </div>

        <div class="article">
            article
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-03-07</span>
            </div>
            <div class="article-info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
            </div>
            <div class="article-tag">
                #HTML #CSS
            </div>
        </div>

        <div class="article">
            article
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-03-07</span>
            </div>
            <div class="article-info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
            </div>
            <div class="article-tag">
                #HTML #CSS
            </div>
        </div>

    </div>
</div>
<!--右边栏 结束-->

</body>
</html>
博客页面示例 html
/* Blog页面相关样式*/


/*公用样式*/

* {
    font-family: ".PingFang SC", "Microsoft YaHei";
    font-size: 14px;
    margin: 0;
    padding: 0;
}

/*去掉a标签的下划线*/
a {
    text-decoration: none;
}


/*左边栏 样式*/
.left {
    width: 20%;
    background-color: rgb(76,77,76);
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;

}
/*头像样式*/
.header-img {
    height: 128px;
    width: 128px;
    border: 5px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
}

.header-img>img {
    max-width: 100%;
}

/*Blog 名称*/
.blog-name {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
}

/*Blog介绍*/
.blog-info {
    color: white;
    text-align: center;
    border: 2px solid white;
    margin: 5px 15px;
}


/*连接组和标签组*/
.blog-links,
.blog-tags {
    text-align: center;
    margin-top: 20px;
}

.blog-links a,
.blog-tags a {
    color: #eee;
}

.blog-tags a:before {
    content: "#";
}

/*右边栏 样式*/
.right {
    width: 80%;
    background-color: rgb(238,237,237);
    height: 1000px;
    float: right;
}

.article-list {
    margin-left: 30px;
    margin-top: 30px;
    margin-right: 10%;
}
.article {
        background-color: white;
    margin-bottom: 15px;
}

.article-name {
    display: inline-block;
}

.article-title {
        padding: 15px;
        border-left: 3px solid red;
}

.article-info {
    padding: 15px;
}

.article-tag {
    padding: 15px 0;
    margin: 15px;
    border-top: 1px solid #eeeeee;
}
/*文章发布时间*/
.article-date {
    float: right;
}
blog.css

 

posted @ 2019-06-12 12:46  冰羽~zZ  阅读(194)  评论(0)  编辑  收藏  举报