CSS

css规则由两个主要的部分构成：选择器，以及一条或多条声明。

一、引入方式:

行内式
嵌入式
链接式:推荐使用
导入式:会在整个网页装载完后再装载CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--链接式-->
    <link href="com.css" rel="stylesheet" type="text/css"/>
    <!--导入式-->
    <style type="text/css"> @import"imp.css";</style>　
    <!--嵌入式-->
    <style>
        p{color:#333;}
    </style>
</head>
<body>
<!--行内式-->
<p style="color:red">hello world</p>
</body>
</html>

View Code

二、css选择器

1、基本选择器

标签选择器：p {color:#333;}
id选择器：#info {color:#333;}
class选择器:.info {color:#333;}
通配选择器：*{margin:0;padding:0;}

2、组合选择器

E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔       div,p { color:#f00; }
E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold;｝
E > F   子元素选择器，匹配所有E元素的子元素F             div > p { color:#f00; }
E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 
E ~ F   普通兄弟选择器（以破折号分隔）                  .div1 ~ p{font-size: 30px; }

3、属性选择器

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

4、伪类

anchor伪类：专用于控制链接的显示效果（link/visited/hover/active）
伪元素选择器(伪标签选择器) before after伪类 first-letter/before/after

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

a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
         
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }


/*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;
        }

link/visited/hover/active

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

        }
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
p:before{content:"hello";color:red;display: block;}  
        
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

first-letter/before/after

三、css选择器的特性

1、css的继承性

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。样式不仅可以应用于它，还可以应用于它的后代。
任何显示申明的样式都可以覆盖其继承样式。　
有一些属性是可以继承下来： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
有一些属性不能被继承，如盒子元素属性，定位的元素（浮动，绝对定位，固定定位）border, margin, padding。

2、css的层叠性/css的优先级

层叠性：权重大的标签覆盖掉了权重小的标签，谁的权重大，浏览器就会显示谁的属性
内联样式表的权值最高,始终高于外部定义。
有!important声明的规则高于一切(权重为无限大)。
如果!important声明冲突，则比较优先权。
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

补充：不同规则的相对权重，它的基本规则是：

内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

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>

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

View Code

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。它没有资格跟我们下面选中的标签对比。

View Code

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:那么就是"就近原则" ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。

View Code

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

！important

四、盒模型

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

盒模型的属性

width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系
盒模型的计算：width/height+2*padding+2*border
清除默认的样式表，reset.css: https://meyerweb.com/eric/tools/css/reset/

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

width不等于盒子的真实宽度

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

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

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

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

1.写小属性,分别设置不同方向的padding
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

2.写综合属性，空格隔开
    /*上 右 下 左*/
    padding: 20px 30px 40px 50px ;

    /*上 左右  下*/
    padding: 20px 30px 40px;

    /* 上下 左右*/
    padding: 20px 30px;

    /*上下左右*/
    padding: 20px;


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

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

但这种方法效率不高。所以我们要使用并集选择器来选中页面中应有的标签
（清除默认的样式表，reset.css:  https://meyerweb.com/eric/tools/css/reset/）

padding

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

按照三要素来写border：
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: 实线，点状，双线，虚线*/



按照方向划分设置小属性：
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没有样式:
border:none；
border：0；
表示border没有设置样式。


border-radius属性:

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属性

<!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>

利用border画三角示例

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

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;


margin:10px 20px 20px 10px；
        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px
 
margin:10px 20px 10px;
        上边距为10px
        左右边距为20px
        下边距为10px
 
margin:10px 20px;
        上下边距为10px
        左右边距为20px
 
margin:25px;
        所有的4个边距都是25px
 
margin: 0 auto;
        居中

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;

margin collapse（边界塌陷或者说边界重叠）

兄弟div：当给两个标准流下兄弟盒子设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决：知道有这种现象
父子div：如果父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div进行margin 。解决方法1：父标签加上overflow: hidden;属性解决方法2:善于使用父亲的padding，而不是儿子的margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            border: 1px solid gray;
            overflow: hidden;
        }
        .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;*/
        }
</style>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

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

</body>
</html>

兄弟div

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>

父子div1:父标签加上overflow: hidden

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            padding-top: 20px;
        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>

父子div2:善于使用父亲的padding，而不是儿子的margin

标准文档流

宏观的将，web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画
标准文档流下有哪些微观现象？
1. 空白折叠现象:
  多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2. 高矮不齐，底边对齐:
  文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
3. 自动换行，一行写不满，换行写:
  如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

块级元素和行内元素

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
我们也学习了行内元素和块级元素的分类，其实这种分类方式是从CSS的角度讲的。
行内元素：
1. 与其他行内元素并排；直到一行排列不下，才会新换一行
2. 不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
1. 霸占一行，不能与其他任何元素并列；
2. 能设置width、height、margin、padding属性。如果不设置宽度，那么宽度将默认变为父亲的100%。
可以通过display属性将块级元素和行内元素进行相互转换 display: inline; display: block;
dispaly属性
1. none:隐藏某标签
2. block:内联标签设置为块级标签
3. inline:块级标签设置为内联标签
4. inline-block:可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：word-spacing: -5px;
5. visibility:hidden隐藏了，但仍然会影响布局。display:none隐藏了，原本占的空间也会从页面布局中消失。
常见的块级元素:div、form、table、p、pre、h1～h5、dl、ol、ul 等
常见的内联元素:span、a、strong、em、label、input、select、textarea、img、br等

脱离标准文档流

文档流:指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流:将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
1. （1）浮动
2. （2）绝对定位
3. （3）固定定位

非完全脱离文档流

左右结构div盒子重叠，一般是由于相邻两个div一个浮动一个没有浮动。导致不是在同个“平面”上，但内容不会造成覆盖现象，只有div形成覆盖现象。
解决方法：
1. 都不使用浮动
2. 都使用float浮动

浮动

float：表示浮动的意思。它有四个值。
1. none: 表示不浮动，默认
2. left: 表示左浮动
3. right：表示右浮动
清除float
1. clear : none | left | right | both
2. clear属性只会对自身起作用，而不会影响其他元素。
浮动的特性(设置float后)：
1. 说明1：脱离了标准文档流，其实就是它不在页面中占位置了
2. 说明2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
3. 互相贴靠：如果父元素有足够的空间，浮动元素互相贴靠，如果没有足够的空间，就不能在同一行了
4. 字围效果:当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
5. 收缩效果：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
浮动的问题：
1. 子元素浮动，父盒子一般不设置高度。（如果页面加内容删内容，就要去改高度那会影响开发效率的）但是如果不给父盒子一个高度，浮动子元素是不会填充父盒子的高度，此时父盒子的兄弟盒子就会跑到第一个位置上，影响页面布局！！！所以要清除浮动。
2. 清除浮动方式1：给父盒子设置高度【它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏】
3. 清除浮动方式2：给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
4. 清除浮动方式3：伪元素清除法(常用) 【给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类】
5. 清除浮动方式4：overflow:hidden 【给浮动子元素的父盒子，也就是不浮动元素，添加overflow:hidden属性】
大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
.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;
        }
</style>
<body>

<div class="box1">小红</div>
<div class="box2">小黄</div>
<span>小马哥</span>
<span>小马哥</span>



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

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

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


互相贴靠：如果父元素有足够的空间，浮动元素互相贴靠，如果没有足够的空间，就不能在同一行了

</p>


</body>
</html>

互相贴靠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
*{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }
</style>
<body>

<div>
<img src="https://img2018.cnblogs.com/blog/992919/201812/992919-20181228153133348-1917005121.png" alt="">
收缩为文字的宽度
</div>
<p>
123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
</p>


<p>
    字围效果:当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
    收缩效果：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
    
    
    
假如某个div元素A是浮动的

如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)
如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
浮动之后的block元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。
浮动之后的inline元素，会为这个框空出位置，然后按顺序排列。    
    
    
    
    
</p>
</body>
</html>

字围效果&收缩效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
*{
            padding: 0;
            margin: 0;

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

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


            /*========方式4父盒子设置高度不推荐=========*/
            /*overflow: hidden;*/

        }
        .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;
        }
        .clear{clear: both}
        
        /*
        .clearfix:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
        .clearfix { display:inline-block; }
        .clearfix { display:block;}
        */
        
        .clearfix:after {
        
        /*必须要写这三句话*/
        
        content:".";display:block;clear:both;visibility:hidden;line-height: 0; height: 0; font-size:0;}        
        /*在类名为clearfix的元素内最后面加入内容,
        内容为.就是一个英文的句号而已。也可以不写。
        加入的这个元素转换为块级元素
        清除左右两边浮动
        可见度设为隐藏visibility:hidden;仍然占据空间，只是看不到而已
        */
        .clearfix { *zoom:1;} 
        /*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素*/
        
        
        

</style>
<body>

<!--========方式3父盒子添加clearfix类=========-->
<div class="father clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

        <!--========方式2父盒子设置高度不推荐=========-->
        <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
        <!-- 内墙法 -->
        <!-- 无缘无故加了div元素  结构冗余 -->
        <!-- <div class="clear"></div>-->

 </div>

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


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


效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。
那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动

清除浮动方式:
1、给父盒子设置高度 【它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏】
2、clear:both
    clear：意思就是清除的意思。
    有三个值：
    left：当前元素左边不允许有浮动元素
    right：当前元素右边不允许有浮动元素
    both：当前元素左右两边不允许有浮动元素
    给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

3、伪元素清除法(常用)  【给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类】

4、overflow:hidden  【给浮动子元素的父盒子，也就是不浮动元素，添加overflow:hidden属性】

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

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

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



</p>

</body>
</html>

清除浮动的方法

position定位

定位有三种：相对定位、绝对定位、固定定位
static: 默认值无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
relative: 相对定位。主要用法：方便绝对定位元素找到参照物。
1. 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。
2. 有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。
3. 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute: 绝对定位。
1. 设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位
2. 如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）
3. 元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
4. 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
5. 如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
6. 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
7. 总结：参照物用相对定位，子元素用绝对定位
fixed: 固定定位。
1. fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位
2. 当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
注意:
1. 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float
2. 这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”
3. 但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

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

现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
特性：1.不脱标  2.形影分离  3.老家留坑（占着茅房不拉屎，恶心人）
所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。



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

参考点(重点)：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

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

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



固定定位:
固定当前的元素不会随着页面滚动而滚动
特性: 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后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

定位&z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
*{
            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等于元素宽度的一半，实现绝对定位盒子居中*/
        }
</style>
<body>

<div class="box">
    <ul class="c"></ul>

</div>

</body>
</html>

绝对定位中的居中

五、css属性操作

color:颜色

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

文本属性

属性	描述	属性值	说明
text-align	文本对齐方式	none center left right justify	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 属性的值

font-size: 10px;
line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
font-family: 'Lucida Bright'
font-weight: lighter/bold/border/
font-style: oblique
text-indent: 150px;      首行缩进150px
letter-spacing: 10px;  字母间距
word-spacing: 20px;  单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

文本其它属性

<!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;
 
            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
        }
        .div2 {
            width: 300px;
            border: 1px solid black;
 
            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
            /*修剪超出的文本*/
            text-overflow: clip;
        }
        .div3 {
            width: 300px;
            border: 1px solid chocolate;
 
            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
            /*显示省略符号来代表被修剪的文本*/
            text-overflow: ellipsis;
        }
    </style>
</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：设置背景颜色
background-image：设置背景图片
background-repeat：设置背景图像的平铺方式
background-position：设置背景图像的起始位置
background-attach：设置固定的背景图像
background属性的简写:background：#ffffff url('1.png') no-repeat right top;

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 属性的设置。

background属性的简写:background：#ffffff url('1.png') no-repeat right top;

<!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>

滚动背景图示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" rel="stylesheet">

</head>
    <style>

        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: url(https://img2018.cnblogs.com/blog/992919/201907/992919-20190701212335667-2011395205.png);
            background-repeat:no-repeat ;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        .error {
            color: red; margin-left: 10px;
        }

        .login {
            background: #fff;
            width: 400px;
            height: 400px;
            margin-top:-200px;
            margin-left:-200px;
            position: relative;
            top: 50%;
            left: 50%;
            border: 1px solid #f0f0f0;
            padding: 10px 30px 50px 30px;
            -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
            box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
        }

        .login h3 {
            font-size: 25px;
            text-align: center;
            font-weight: bold;
        }
    </style>
<body>

<div class="login">
    <h3>
        用户登陆
    </h3>
    <form  method="post">

         <div class="form-group">
            <label for="user">用户名</label>
            <input type="text" class="form-control"  name="user" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" class="form-control"  name="pwd" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="check_code">验证码</label>

            <div class="row">
                <div class="col-xs-7">
                    <input type="text" class="form-control" name="check_code" placeholder="请输入验证码">
                </div>
                <div class="col-xs-5">
                    <img id="check" src="/check_code/">
                </div>
            </div>
        </div>


        <div class="checkbox">
            <label>
                <input type="checkbox" value="1" name="rmb"> 一个月内自动登陆
            </label>
            <!--
            <div class="pull-right">
                <a href="#">忘记密码？</a>
            </div>
            -->
        </div>

        <button type="submit" class="btn btn-primary">登 录</button><span class="error">{{ msg }}</span>

    </form>
</div>
</body>
<script src="{% static 'stark/js/jquery-3.3.1.min.js' %} "></script>
<script>

    // 刷新验证码
    $("#check").click(function () {
        $(this)[0].src += "?"
    });

    setTimeout(function(){
        $(".error").text("");
    },1200)

</script>

</html>

登录大图背景固定示例

列表属性

list-style-type 设置列表项标志的类型。
list-style-position 设置列表中列表项标志的位置。
list-style-image 将图象设置为列表项标志。
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中

container和box3的布局是上下结构，发现box3跑到了上面，与container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。
这是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致container没有被撑开。box3认为container没有高度（未被撑开），因此跑上去了。

六、Caution！"坑"

1、父子都是块级元素

对于块级元素，子元素的宽度默认为父元素的100%
当给子元素添加padding和margin时，子元素宽度width是父元素的宽度减去子元素的margin值和padding值。
如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的一般我们都是通过添加内容（子元素）将父元素撑起来。

2、父：块级元素子：内联元素

如果内联元素是不可替换元素（除img，input以外的一般元素），元素是没有办法设置宽度的，也就谈不上100%的问题了。即内联元素必须依靠其内部的内容才能撑开。
如果内联元素是可替换元素（img，input，本身可以设置长和宽），不管怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。
如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了。
一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .pg-header{
           height: 48px;
           width: 100%;
           background-color: #2459a2;
           position: fixed;
           top:0;
           left: 0;
        }
        .left{
            position:absolute;
            left:0;
            top:48px;
            bottom:0;
            width:200px;
            background-color: #ededed;
        }

        .right{
            position:absolute;
            right:0;
            left:200px;
            top:48px;
            bottom:0;
            overflow:auto;

        }
        .content{
            height: 2000px;
            width: 100%;
           
        }
    </style>
</head>
<body>


<div class="pg-header"></div>
<div>
    <div class="left">

    </div>
    <div class="right">
      <div class="content"></div>
    </div>
</div>

</body>
</html>

后台管理布局

七、css响应式布局

1、作用

使用 @media 可以针对不同的屏幕大小定义不同的样式。

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒体类型（mediaType ）类型有很多，只列出了常用的几个。
1. screen：用于电脑屏幕，平板电脑，智能手机等。（最常用）
2. speech：应用于屏幕阅读器等发声设备媒体功能
media feature：
1. max-width:定义输出设备中的页面最大可见区域宽度
2. min-width:定义输出设备中的页面最小可见区域宽度

2、设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>Title</title>
<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

兼容移动设备的展示效果
- width = device-width：宽度等于当前设备的宽度
- initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
- user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
设置IE渲染方式默认为最高(可选)
- 例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8为了防止这种情况，需要让IE的文档渲染模式永远都是最新的.
- chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。
加载兼容JS文件
- 因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>Title</title>
<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
/*文档宽度大于等于 1170px 则应用花括号内的样式*/
@media screen and (min-width: 1170px) {
    body {
        background-color:green;
    }
}
/*当文档宽度大于等于 768px 并且小于等于992px （ width >=768 && width <=992）的时候显示的样式*/
@media screen and (min-width:768px) and (max-width:992px) {
    body {
        background-color:blue;
    }
}
</style>
</head>
<body>
</body>
</html>

响应式页面

@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,legend,fieldset,input,button,textarea,p,blockquote,th,td {margin:0;padding:0;font-family: "微软雅黑";}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ul, ol, li { list-style: none; }
font,i, b, p, em {font-style: normal;}
:focus { outline: 0; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
abbr, acronym { border: 0; font-variant: normal; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; background-color: #fff; border: none;}
code, kbd, samp, tt { font-size: 100%; }
a{text-decoration:none;}
a:hover{text-decoration: none;}
input, button, textarea{ *font-size: 100%;}
input {padding: 1px;vertical-align: middle;line-height: normal;}
table {border-collapse:collapse;border-spacing:0;}
table,tr,td { border-collapse: collapse; border-spacing: 0; margin:0;padding:0;}
td {padding: 3px;}
caption, th { text-align: left; }
sup, sub { font-size: 100%; vertical-align: baseline; }

/* remember to highlight anchors and inserts somehow! */
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/**Common Css**/
.fr { float: right; *display: inline;}
.fl { float: left; *display: inline;}
/*文本超出显示省略号*/
.ehn, .otw, .tow { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
/*清除浮动*/
.clearfix:after {content:".";display:block;clear:both;visibility:hidden;line-height: 0; height: 0; font-size:0;}
.clearfix { *zoom:1;}
.text-overflow-hidden {white-space: nowrap;word-spacing: normal;letter-spacing: normal;overflow: hidden;}
.valign {display:table-cell;*display: inline;zoom:1;vertical-align:middle;}
.text{word-wrap:break-word;overflow:hidden;word-break:break-all;}
.shadow {box-shadow: 0 1px 5px rgba(1, 1, 1, 0.1);}
.alp4 {
    opacity: 0.4;
    filter: alpha(opacity=40);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    background-color: #fff;
}
.shadow_h {
    -moz-box-shadow: 0 1px 5px #999;
    -webkit-box-shadow: 0 1px 5px #999;
    box-shadow: 0 1px 5px #999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999')"; /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999');
}
.ease-in3 {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    /* -ms-transition:all 0.3s ease-in;*/
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.img_box{display:table-cell;text-align:center;vertical-align: middle; background-color:#fff; cursor:pointer;overflow:hidden;}
.img_box img{margin:0 auto; display:block; text-align: center;vertical-align: middle;}

css common

posted @ 2019-03-02 20:15 silencio。阅读(267) 评论(0) 编辑收藏举报

刷新页面返回顶部

silencio

CSS

CSS

一、引入方式:

二、css选择器

1、基本选择器

2、组合选择器

3、属性选择器

4、伪类

三、css选择器的特性

1、css的继承性

2、css的层叠性/css的优先级

补充：不同规则的相对权重，它的基本规则是：

四、盒模型

盒模型的属性

margin collapse（边界塌陷或者说边界重叠）

标准文档流

块级元素和行内元素

脱离标准文档流

非完全脱离文档流

浮动

position定位

五、css属性操作

color:颜色

文本属性

字体属性

background

列表属性

六、Caution！"坑"

1、父子都是块级元素

2、父：块级元素 子：内联元素

七、css响应式布局

1、作用

2、设置

公告

2、父：块级元素子：内联元素