CSS

CSS

CSS概述

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

CSS的四种引入方式

1.行内式
　　行内式是在标记的style属性中设定CSS样式. 这种方式没有体现出CSS的优势, 不推荐使用.

<p style="background-color: rebeccapurple">Hello Charon</p>

2.嵌入式
　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中. 格式如下：

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

3 链接式
　　将一个.css文件引入到HTML文件中, 在<head>标签中写以下语句: 

<link href="mystyle.css" rel="stylesheet" type="text/css"/>   <!--此处要注意.css文件的路径-->

4.导入式
　　将一个独立的.css文件引入HTML文件中, 导入式使用CSS规则引入外部CSS文件, <style>标签也是写在<head>标签中，使用的语法如下：  

<style type="text/css">
          @import"mystyle.css";    <!--此处要注意.css文件的路径-->
</style>　

注意：

　　导入式, 属于CSS部分; 而链接式, 属于HTML部分.

      导入式会在整个网页装载完后再装载CSS文件, 因此这就导致了一个问题, 如果网页比较大则会儿出现先显示无样式的页面, 闪烁一下之后, 再出现网页的样式, 这是导入式固有的一个缺陷.

　　使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件, 因此显示出来的网页从一开始就是带样式的效果的, 它不会象导入式那样先显示无样式的网页, 然后再显示有样式的网页, 这是链接式的优点.

CSS的选择器 (Selector）

"选择器"指明了{}中的"样式"的作用对象, 也就是"样式"作用于网页中的哪些元素.

1. 基础选择器

＊：   通用元素选择器，匹配任何元素                    
例子: * { margin:0; padding:0; }

E：    标签选择器，匹配所有使用E标签的元素               
例子: p { color:green; }

.info和E.info:     class选择器，匹配所有class属性中包含info的元素   
例子: .info { background:#ff0; }    p.info { background:blue; }

#info和E#info:     id选择器，匹配所有id属性等于info的元素         
例子: #info { background:#ff0; }    p#info { background:#ff0; }

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. 若是E元素的下面一个元素不是F元素则找不到          
例子: div + p { color:#f00; } 
 E ~ F      普通兄弟选择器（以破折号分隔）
例子: div1 ~ p{ font-size: 30px; }
 

注意嵌套规则：

  1. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素.
  2. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素. 如h1,h2,h3,h4,h5,h6,p,dt.   <p><div></div><p>中的<div>是无效的
  3. li内可以包含div
  4. 块级元素与块级元素并列、内联元素与内联元素并列.

3. 属性选择器

属性名和值可以自定义

 E[att]         匹配所有具有att属性的E元素, 不考虑它的值.（注意：E在此处可以省略, 如写"[att]"即可）   
例子: 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. 伪类(Pseudo-classes)

CSS伪类是用来给选择器添加一些特殊效果

anchor伪类：专用于控制链接的显示效果

其格式为 - 标签:伪类名称{ css代码; }

伪类选择器: 伪类指的是标签的不同状态(不同状态包括: 点过状态 没有点过的状态 鼠标悬浮状态 激活状态)

a:link(没有接触过的链接), 用于定义了链接的常规状态.

a:hover(鼠标放在链接上的状态), 用于产生视觉效果.

a:visited(访问过的链接), 用于阅读文章, 能清楚的判断已经访问过的链接.

a:active(在链接上按下鼠标时的状态), 用于表现鼠标按下时的链接状态.

例子:
a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }
</style>
</head>
<body>
    <a href="www.baidu.com">百度</a>
</body>
</html>
View Code

补充：

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

    <style>
        .outer{
            border: 1px solid;
        }

       .top{
           background-color: rebeccapurple;
           width: 100px;
           height: 100px;
       }
        .bottom{
            background-color: green;
            width: 100px;
            height: 100px;
        }

        .outer:hover .bottom{    /* 当鼠标悬浮到outer时, bottom会变黄色 */
            background-color: yellow;
        }

        /*注意:一定是outer:hover  控制outer里某一个标签,否则无效, 即以下的是无效的*/
        .top:hover .bottom{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .container{
            background-color: red;
        }

        .container .item{
            width: 180px;
            height: 150px;
            background-color: #303a40;
            border: 1px solid red;
            overflow: hidden;
            position: relative;
        }

        .container .item:hover{
            border: 1px solid green;
        }
        .container .item .text{
            display: none;
        }
        .container .item:hover .text{   /*当鼠标放在item上时, item下的text才生效*/
            display: block;
        }
    </style>
</head>
<body>

    <div class="container clearfix">
        <div class="item left">
            <div class="bg">
                <img style="height: 150px; width: 180px;" src="images/22.jpg">
            </div>
            <div class="text">
                <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
                <div style="z-index:10;position: absolute;left: 0;right: 0;top: 0;bottom: 0; color: #c0cddf">$1000 per night</div>
            </div>
        </div>
    </div>
</body>
</html>
View Code

before after伪类 ：

复制代码
:before    p:before       在每个<p>元素之前插入内容
:after     p:after        在每个<p>元素之后插入内容

 p:before        在每个 <p> 元素的内容之前插入内容                    
例子: p:before{content:"hello";color:red}
 p:after         在每个 <p> 元素的内容之前插入内容                    
例子: p:after{ content:"hello"；color:red}
复制代码

5. CSS优先级和继承

CSS优先级:　　
　　所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序. 
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
       1 内联样式表的权值最高        style=""-------------------  1000
　　  2 统计选择符中的ID属性个数      #id    ------------------  100
　　3 统计选择符中的CLASS属性个数    .class  ------------------  10
 4 统计选择符中的HTML标签名个数      p      -------------------  1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p{
            color: rebeccapurple;
        }
        .p{
            color: #2459a2;
        }
        p{
            color: yellow;
        }
    </style>
</head>
<body>
    <p id="p" class="p" style="color: deeppink">Hello Charon</p>
    <!--所以这里的顺序是内联 > class > id > tag-->
</body>
</html>
View Code

CSS的继承性:

      继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的. 继承是一种机制, 它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代. 例如一个BODY定义了的颜色值也会应用到段落的文本中.
CSS: body{color:red;}       HTML: <p>hello charon</p>

这段文字都继承了由body {color:red;}样式定义的颜色. 然而CSS继承性的权重是非常低的, 是比普通元素的权重还要低的0.

p{color:green}

发现只需要给加个颜色值就能覆盖掉它继承的样式颜色. 由此可见: 任何显示申明的规则都可以覆盖其继承样式. 　

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

附加说明:

文内的样式优先级大于外部定义的样式(<link>,<style>)
有!important声明的规则高于一切
如果优先权一样，则按照在源码中出现的顺序决定，后来者居上
由继承而得到的样式低于一切其它规则
 

CSS的常用属性 

1. 颜色属性

div style="color:blueviolet">ppppp</div>
 
<div style="color:#ffee33">ppppp</div>
 
<div style="color:rgb(255,0,0)">ppppp</div> 
 
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
/*三个255为黑色, 三个0位白色*/

2. 字体属性

font-size: 20px/50%/larger
 
font-family:'Lucida Bright'
 
font-weight: lighter/bold/border/
 
<h1 style="font-style: oblique"Charon</h1>

3. 背景属性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top; (20px 20px)(横向：left center right)(纵向：top center bottom)

简写：
<body style="background: center center no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"> 

注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html.

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

    <style>

        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>
View Code

4. 文本属性

font-size: 10px;

text-align: center;   横向排列

line-height: 200px;   文本行高. 文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-indent: 150px;   首行缩进
letter-spacing: 10px;   字母间的空隙
word-spacing: 20px;    单词间的间隙
text-transform: capitalize;    首字母大写

5. 边框属性

border-style: solid;
 
border-color: chartreuse;
 
border-width: 20px;
 
简写：border: 30px rebeccapurple solid;

6. 列表属性

ul,ol{   
        list-style: decimal-leading-zero;
        list-style: none;         
        list-style: circle;
        list-style: upper-alpha;
        list-style: disc; 
}

7. dispaly属性

none     消失, 位置也不在了
block    调成块级属性
inline   调成内联属性

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

#outer{
    border: 3px dashed;
    word-spacing: -5px;
}

8. 外边距和内边距

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

元素的宽度和高度:

重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.

margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下  右左
margin:10px;    ---------------------上右下左

下面的例子中的元素的总宽度为300px = 250+(10+10+5)*2：

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;   

题目: 300px*300px的盒子装着100px*100px的盒子, 分别通过margin和padding设置将小盒子移到大盒子的中间

思考1:       
　　边框在默认情况下会定位于浏览器窗口的左上角, 但是并没有紧贴着浏览器的窗口的边框, 这是因为body本身也是一个盒子(外层还有html), 在默认情况下, body距离html会有若干像素的margin, 具体数值因各个浏览器不尽相同, 所以body中的盒子不会紧贴浏览器窗口的边框了.

解决方法：

body{
    margin: 0;
}
思考2：   
margin前       margin后
　　margin collapse(边界塌陷/边界重叠), 外边距的重叠只产生在普通流文档的上下外边距之间, 如上下排列一系列规则的块级元素(如段落P), 块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离.

兄弟div: 上面div的margin-bottom和下面div的margin-top会塌陷, 也就是会取上下两者margin里最大值作为显示值.

父子div:  如果父级div中没有border, padding, inline content, 子级div的margin会一直向上找, 直到找到某个标签包括border, padding, inline content中的其中一个, 然后按此div进行margin;

解决方法：

1: border:1px solid transparent
2: padding:1px
3: overflow:hidden; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid transparent;    /* 方法一 */
            /*padding:1px;*/                      /* 方法二 */
            /*overflow: hidden;*/                /* 方法三 */
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;

            margin: 100px;             /* 解答 */
        }
    </style>
</head>
<body>
        <div class="div1">
           <div class="div2"></div>
        </div>
</body>
</html>
答案1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;

            padding-left: 200px;    /* 解答, 在自身的基础上向左拓展200px */
            padding-top: 200px;    /* 在自身的基础上向上拓展200px, 达到效果 */
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
        <div class="div1">
           <div class="div2"></div>
        </div>
</body>
</html>
答案2

 

block元素和inline元素在文档流中的排列方式:

　　block元素通常被现实为独立的一块, 独占一行, 多个block元素会各自新起一行, 默认block元素宽度自动填满其父元素宽度. block元素可以设置width、height、margin、padding属性；

　　inline元素不会独占一行, 多个相邻的行内元素会排列在同一行里, 直到一行排列不下, 才会新换一行, 其宽度随元素的内容而变化. inline元素设置width、height属性无效. inline元素的margin和padding属性, 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果.

  • 常见的块级元素有 div、form、table、p、pre、h1～h6、dl、ol、ul 等。
  • 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的正常文档流, 指的是元素排版布局过程中, 元素会自动从左往右, 从上往下的流式排列.

脱离文档流, 也就是将元素从普通的布局排版中拿走, 其他盒子在定位的时候, 会当做脱离文档流的元素不存在而进行定位.

只有绝对定位absolute和浮动float才会脱离文档流.

     需要注意的是, 使用float脱离文档流时, 其他盒子会无视这个元素, 但其他盒子内的文本依然会为这个元素让出位置, 环绕在周围(可以说是部分脱离). 而对于使用absolute position脱离文档流的元素, 其他盒子与其他盒子内的文本都会无视它(可以说是完全脱离).

　　一旦给元素加上absolute或float就相当于给元素加上了display:block; 如内联元素span默认宽度是自适应的, 给其加上width是不起作用的. 若想用width定宽, 需要将span设成display:block. 但如果给span加上absolute或float, 那span的display属性自动就变成block, 就可以指定width了.

9. float属性

浮动的表现

      定义: 浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在正常文档流中, 所以正常文档流中的浮动框之后的块框表现得就像浮动框不存在一样.( 注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响)

起初float被设计的时候就是用来完成文本环绕的效果, 所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式. 无论多么复杂的布局, 其基本出发点均是: "如何在一行显示多个div元素".

表现1:     
　　假设某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行); 如果A元素上一个元素是正常文档流中的元素, 那么A的相对垂直位置不会改变, 也就是说A的顶部总是和上一个元素的底部对齐. 此外, 浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置(文绕图). 浮动的框之后的inline元素, 会为这个框空出位置, 然后按顺序排列.

表现2:

　　(1)左右结构div盒子重叠现象, 一般是由于相邻两个div一个使用浮动一个没有使用浮动. 一个使用浮动一个没有导致DIV不是在同个"平面:上, 但内容不会照成覆盖(如文绕图), 只有div形成覆盖现象.
解决方法：
1. 都不使用浮动；
2. 都使用float浮动；
3. 对没有使用float浮动的DIV设置margin样式.　　

　　(2)上下结构div盒子重叠现象, 上面的盒子里的子元素使用了浮动, 脱离了正常文档流, 导致盒子没有被撑开. 下面的盒子认为上面的盒子没有高度(未被撑开), 因此形成覆盖现象(跑上去了).     BFC(Block Formatting Context)

解决方法：
1. 给上面的盒子设置固定高度，但是一般情况下文字内容不确定多少就不能设置固定高度解决覆盖问题, 所以这种方法不推荐.
2. 清除浮动.
 
清除浮动：
当容器的高度为auto, 且容器的内容中有浮动(float为left或right)的元素, 在这种情况下, 容器的高度不能自动伸长以适应内容的高度, 使得内容溢出到容器外面而影响布局的现象, 叫浮动溢出. 为了防止这个现象的出现而进行的CSS处理, 就叫CSS清除浮动.

clear语法：
clear: none | left | right | both

取值：
none: 默认值. 允许两边都可以有浮动对象
left: 不允许左边有浮动对象
right: 不允许右边有浮动对象
both: 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素. 如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
         .container{
            border:2px solid black;width:300px;
         }
         #box1{
            background-color:green;float:left;width:100px;height:100px;
         }
         #box2{
            background-color:deeppink; float:right;width:100px;height:100px;
         }
         #bottom{
             background-color:pink;height:40px;
             /*clear: both;*/
         }
         #box4{
            background-color:darkorange;float:left;width:100px;height:100px;
         }
         #clear{
             clear: both;
         }
</style>
</head>
<body>
    <div class="container">
        <div id="box1">box1 向左浮动</div>
        <div id="box2">box2 向左浮动</div>
        <div id="box4">box3 向右浮动</div>
        <div id="clear"></div>
    </div>
    <div id="bottom">box4</div>
    <!--单单在bottom加上clear是无法根本解决问题的-->
    <!--在container设置高度也可, 但是这样就设死了, 不好-->
    <!--最好的方法就是在box下面加个空的div, 并加上clear:both属性-->
    <!--另一个好方法, 在container上加overflow:hidden-->
</body>
</body>
</html>
View Code

方式1:

在浮动元素后面跟了个宽高为0的空div, 然后设定它clear:both来达到清除浮动的效果.
使用原因: 不必在html文件中写入大量无意义的空标签, 又能清除浮动. 
<div class="clearfix"</div>
.clearfix:after{
    clear: both;
}
简易版(推荐)
.clearfix:after{       /*在类名为"clearfix"的元素内最后面加入内容*/
    content: ".";                 /*内容为"."就是一个英文的句号而已. 也可以不写*/
    display: block;             /*加入的这个元素转换为块级元素*/
    clear: both;               /*清除左右两边浮动*/ 
    visibility: hidden;        /*可见度设为隐藏. 和display:none;不同, visibility:hidden;仍然占据空间, 只是看不到而已*/ 
    line-height: 0;           /*行高为0*/
    height: 0;                 /*高度为0*/
    font-size:0;               /*字体大小为0*/
}
复杂版 

方式2：

overflow:hidden;

overflow：hidden的含义是超出的部分要裁切隐藏, float的元素虽然不在正常文档流中, 但是他是浮动在正常文档流之上的, 可以把普通流元素+浮动元素想象成一个立方体. 如果没有明确设定包含容器高度的情况下, 它要计算内容的全部高度才能确定在什么位置hidden, 这样浮动元素的高度就要被计算进去. 这样包含容器就会被撑开, 清除浮动.

方式3 (推荐)：

在外部框架加个id或class叫clearfix, 然后对 .clearfix:after 进行设置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .container{
            background-color: red;
        }

        .container .item{
            width: 180px;
            height: 150px;
            background-color: #303a40;
            border: 1px solid red;
        }

        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
    </div>
    <div>asdf</div>
</body>
</html>
View Code

 

10. position(定位)

1) static

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

2) position: relative／absolute

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

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

　　absolute绝对定位. 设置为绝对定位的元素框从正常文档流中完全删除, 并相对于最近的已定位祖先元素定位, 若没有就一直往上找, 直至它的位置相对于最初的包含块(即body元素). 元素原先在正常文档流中所占的空间会关闭, 就好像该元素原来不存在一样. 元素定位后生成一个块级框. 对象脱离正常文档流, 可以使用top,right,bottom,left等属性进行绝对定位. 而其层叠通过z-index属性定义.

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

总结: 参照物用相对定位, 子元素用绝对定位, 并且保证相对定位参照物不会偏移即可.

3) position:fixed

        fixed: 对象脱离正常文档流, 使用top,right,bottom,left等属性以窗口为参考点进行定位, 被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标, 不论窗口是否滚动, 它都会固定在这个位置. 而其层叠通过z-index属性定义.

注意点: 一个元素若设置了position:absolute;或者position:fixed; 则该元素就不能设置float, 因为这是两个不同的流, 一个是浮动流, 另一个是"定位流". 但是 relative却可以, 因为它原本所占的空间仍然占据文档流.

4) 仅使用margin属性布局绝对定位元素

此情况, margin-bottom和margin-right的值不再对文档流中的元素产生影响, 因为该元素已经脱离了文档流. 另外, 不管它的祖先元素有没有定位, 都是以正常文档流中原来所在的位置上偏移参照物.  
例子:
div - position:relative;
div - 没有设置为定位元素，不是参照物
div - 没有设置为定位元素，不是参照物
div box1
div box2 - position:absolute; margin-top:50px; margin-left:120px;
div box3
效果图：

CSS拾遗

inline-block 的间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            display: inline-block;
            background-color: #2459a2;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<a>111</a>
<a>222</a>
<a>333</a>

</body>
</html>
View Code

inline-block默认的空格符就是标签与标签之间的空隙造成的。

(1) 我们可以通过margin:-3px来解决，但是

1.我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了

2.我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！

(2)我们可以给几个标签加一个父级div，然后：

div{word-spacing: -5px;}　　

 

word-wrap & word-break:

word-wrap:

the word-wrap CSS property is used to specify whether or not the browser is allowd to 
break lines within words in order to prevent overflow when an otherwise unbreakable 
string is too long to fit.

The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word.

word-break:

The word-break CSS property is used to specify how (or if) to break lines within words

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


        .p1{
            width: 100px;
            background-color: #84a42b;
            word-wrap: break-word;
            word-break: break-all;
        }
        .p2{
            width: 100px;
            background-color: darkgoldenrod;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>


<p class="p1">hello yuan hello yuan hello yuan hello yuan hello yuan</p>

<p class="p2">helloyuanhelloyuanhelloyuanhelloyuanhelloyuanhelloyuan</p>


</body>
</html>
View Code

 

快写

div   然后按tab
a     然后按tab
div.main>ul>li.c*4    然后按tab

display:flex

响应式布局

posted @ 2018-03-02 23:19  Charonnnnn  阅读(119)  评论(0)    收藏  举报