2018-08-17day-23

总结

1、选择器的权重

选择器的权重
类型选择器（元素选择器）：0001
class选择器：0010
id选择器：0100
层级（包含）选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
谁的权重值大，谁的优先级就高

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

2、浮动

标准流：块标签一个占一行，从上往下布局。
行内标签哟行可以显示多个，从左往右布局，直到遇到边界就自动换行。
脱流：浮动、定位
浮动：就是让竖着的标签横着来,块的宽度默认为内容的宽度
float：left和right
如果要使用浮动，name同一级的所有标签都要浮动
若果父标移动了，子标也会移动
从上往下从左往右

<!--<!DOCTYPE html>-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #top{
                float: left;
                background-color: red;
                height: 150px;
                width: 100%;
            }
            #m1{
                float: left;
                background-color: darkmagenta;
                height: 500px;
                width: 20%;
            }
            #m2{
                float: left;
                background-color:azure;
                height: 500px;
                width: 65%;
            }
            #m3{
                float: right;
                background-color: cadetblue;
                height: 500px;
                width: 15%;
                
            }
            #m4{
                width: 100%;
                height: 180px;
                float: left;
                background-color: gold;
            }
        </style>
    </head>
    <body>
        <div id="top"></div>
        <div id="m1"></div>
        <div id="m2"><img style="max-height: 100%;max-width: 100%;" src="img/u=3390069931,496658555&fm=27&gp=0.jpg"/></div>
        <div id="m3"></div>
        <div id="m4"></div>
    </body>
</html>

3、文字环绕

一句话总结
文字环绕：被文字环绕的标签浮动，文字标签不浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #d1{
                float: left;
                background-color: blue;
                width: 80px;
                height: 80px;
            }
            #d2{
                width: 200px;
                background-color: #F0FFFF;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            <p>
                aajkjalkjflkaf;akjfjalkjflkajlkjlkjlkjlj;ljajsdkajlkjdlkasjdlajlkdjajjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
            </p>
        </div>
    </body>
</html>

4、清除浮动

1.清除浮动：是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的

2.怎么清除浮动？
a.添加空的div：
在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的样式表: clear:both

（可能会产生大量的额外的代码）
b.设置overflow：
在父标签中设置样式表的overflow的值为hidden

c.after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            /*2.清除浮动方案2*/
            /*.clear{
                overflow: hidden;
            }*/
            
            /*3.清除浮动方案3*/
            .clear:after{
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
            .clear{
                zoom: 1;
            }
        </style>
    </head>
    <body>
        
        <div style="height: 100px; background-color: red;"></div>
        <div style="background-color: royalblue;" class="clear">
            <div style="width: 30%; background-color: peru; float: left;">
                <img src="img/luffy3.png" alt="" />
            </div>
            <div style="width: 30%; background-color: plum; height: 200px; float: left;"></div>
            
            <!--1.清除浮动方案1-->
            <!--<div id="" style="clear: both;"></div>-->
        </div>
        <div style="height: 100px; background-color: green;"></div>
    </body>
</html>

5、display属性

1.HTML中标签分为块和行内
2.CSS中中标签分为3类：块、行内块、行内（display）
（在标准流中）
block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
inline-block:行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效)
inline:行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)

通过改变标签的display的值，可以让一个标签在块、行内块个行内之间任意切换

注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接(这个间隙目前没有办法清除)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                /*display: block;*/
                background-color: hotpink;
                width: 200px;
                height: 100px;
            }
            
        </style>
    </head>
    <body>
        <input type="text" name="" id="" value=""  style="width: 100px;height: 100px; display: block;"/>
        <span id="" style="background-color: wheat; width: 300px; height: 100px;">
            ABC拿到的
        </span>
        <span id="" style="background-color: brown; display: inline-block;">
            ABC拿到的
        </span>
        
        <p id="" style="display: inline-block;">
            aaa     <br />
            bbb
        </p>
        <span id="">
            ajssjjdh
        </span>
        
    </body>
</html>

6、定位

定位
1.距离
top：标签顶部距离其他标签的位置
bottom：标签的底部到距离其他标签的位置
left：标签的左边到其他坐标的位置
right：标签的右边到其他坐标的位置

2.position
想要设置标签的top等的值有效，必须设置标签的参开方式
initial：（默认值）
absoulute:相对第一个position的值是非static的父标签进行定位
relative：整除位置定位（按标准流定位）
fixed：相对于浏览器定位
sticky：鼠标不滚动的首按标准流定位，滚动时按浏览器定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #ddd{
                width: 400px;
                height: 400px;
                background-color: #FF0000;
                /*top: 100px;
                position: absolute;*/
            }
            #dd1{
                width: 100px;
                height: 100px;
                background-color: chartreuse;
                top: 100px;
                left: 50px;
                position: absolute;
            }
            
        </style>
    </head>
    <body>
        <div id="ddd">
            <div id="dd1">
                
            </div>
        </div>
    </body>
</html>

7、relative练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div div{
                float: left;
                width: 100px;
                height: 100px;
                background-color: #0000FF;
                position: relative;
                margin-top:20px ;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <div style="width: 500px;height: 380px;background-color: #FF0000;">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        
    </body>
</html>

效果图

image.png

8、盒子模型

每一个标签都是由四个部分组成的，分别对应的是内容：
1.内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2.内边距（padding）：可见的（默认为零），不能显示内容（通过设置padding来改变其值）
3.边框（border）：可见的，如果有内边距就添加到内边距上，如果没有就添加到内容上
4.外边距（margin）：不可见额，但是会占据浏览器的空间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*在样式表开始前关掉所有网页自带的margin和padding以方便计算距离*/
            *{
                margin: 0;
                padding: 0;
            }
            div{
                background-color: darkgreen;
                width: 100px;
                height: 100px;
                /*padding值有4个,可以单独设，也可以一起设*/
                /*padding-left:20px ;
                padding-top: 20px;
                padding-right: 20px;
                padding-bottom: 20px;*/
                /*padding: 10px;*/
                padding: 20px 20px;
                
                
                /*border也可以单独设置，也可以一起设*/
                border: 3px solid black; /*大小 样式 颜色*/
                border-right:4px solid chartreuse;
                /*设置边框圆角的度数*/
                /*border-radius:70px ;*/
                border-bottom-left-radius: 80px;
                border-top-right-radius:80px ;
                /*外边距也可以单独设置也可以一起设置*/
                margin:20px ;
                margin-top: 40px;
                /*margin: 上  右  下  左;
                margin: 上/下     右/左;*/
                
            }
        </style>
    </head>
    <body>
        <div>
            aaa
        </div>
    </body>
</html>

效果图