Day3 css属性

作者: zhazhaK丶 | 来源:发表于2018-08-18 13:07 被阅读0次

Day3 css属性
css样式入门书目录
HTML标签类型
Day03_CSS属性组成和作用
day3 css核心属性
03-CSS核心属性
2018-09-19 css核心属性
css定位
整理常用CSS
jQuery内容整理——CSS

01.选择器的权重

02.浮动

03.文字环绕

04.清除浮动

05.display属性

06.定位

07.relative练习

08.盒子模型

09.居中

01.选择器的权重

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

02.浮动

标准流：块标签一个占一行，从上往下布局。
行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行

脱流：浮动、定位

1.浮动：就是让竖着显示的标签横着来
float：left 和 right
注意：

1.如果要使用浮动，那么同一级的所有标签都要浮动
2.如果父标签浮动，那么字标签的位置会跟着一起动
3.布局基本顺序：从上往下。从左往右

#top{
                float: left;
                background-color: red;
                height: 150px;
                width: 100%;
            }
            #m1{
                float: left;
                height: 300px;
                width: 30%;
                background-color: pink;
            }
            #m2{
                float: left;
                height: 300px;
                width: 50%;
                background-color: goldenrod;
            }
            #m3{
                float: right;
                height: 300px;
                width: 20%;
                background-color: gold;
            }
            #bottom{
                float: left;
                height: 100px;
                width: 100%;
                background-color: blue;
            }
            
            #top1{
                float: left;
                background-color: darkblue;
                height: 150px;
                width: 100%;
            }
            #mm1{
                float: left;
                background-color: deeppink;
                height: 300px;
                width: 25%;
            }
            #mm2{
                float: left;
                height: 100px;
                width: 75%;
                background-color: blueviolet;
            }
            #mm3{
                float: left;
                height: 200px;
                width: 50%;
                background-color: black;
            }
            #mm4{
                float: left;
                height: 100px;
                width: 25%;
                background-color: darkgreen;
            }
            #mm5{
                float: left;
                height: 200px;
                width: 25%;
                background-color: palegreen;
            }
        </style>
    </head>
    <body>
        
        
        <!--<div id="red" style="width: 100px; height: 80px; background-color: red;">
                <a href="">百度一下</a>
        </div>
        <div id="green" style="width: 200px; height: 180px; background-color: greenyellow;">
            
        </div>-->
        
        
        <div id="top" align="center" >壹</div>
        <div id="m1" align="center">贰</div>
        <div id="m2" align="center">叁</div>
        <div id="m3" align="center">肆</div>
        <div id="bottom" align="center">伍</div>
        
        <div id="top1"></div>
        <div id="mm1"></div>
        <div id="mm2"></div>
        <div id="mm3"></div>
        <div id="mm4"></div>
        <div id="mm5"></div>

03.文字环绕

文字环绕：被文字环绕的标签浮动，文字标签不浮动

/*被环绕的对象浮动*/
            #d1{
                float: left;
                width: 60px;
                height: 60px;
                background-color: royalblue;
            }
            #d2{
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
        </div>

04.清除浮动

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

2.怎么清除浮动？

a.添加空的div：
在父标签(高度塌陷的标签)的最后添加一个空的div，并且设置这个div的样式表：clear:both(可能会产生大量额外的代码)
b.设置overflow：
在父标签中设置样式表的overflow的值为hidden

/*清除浮动方案2*/
        .clear{
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <div style="height: 100px; background-color: red;"></div>
        <div style="background-color: aqua;"class="clear">
            <div style="width: 30%; background-color: black; height: 200px; float: left;"></div>
            <div style="width: 30%; background-color: brown; height: 200px; float: left;"></div>
            
            <!--1.清除浮动方案-->
            <!--<div id="" style="clear: both;"></div>-->
        </div>
        <div style="height: 100px; background-color: green;"></div>
    </body>
</html>

05.display属性

1.HTML中标签分为块和行内
2.css中标签分为三类：块、行内块、行内(display)

block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
inline-block：行内块（一行可以有多个，默认宽高是内容的宽高；直接设置宽高是有效的）
inline：行内（一行可以有多个，默认宽高是内容的高度，设置宽高无效）

通过改变标签的display值，可以让一个标签在块、行内块和行内之间任意切换
注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接(这个问题目前无法解决)

06.定位

1.距离：

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

2.position

想要设置标签的top，bottom，left，right的值有效，必须设置标签的参考方式
initial：(默认值) 没有参考对象
absolute：相对第一个position的值是非static的父标签进行定位
relative：正常位置定位(按标准流定位)
fixed：相对于浏览器定位
sticky：不滚动的时候按标准流定位，滚动的时候相对浏览器定位

#d1{
                position: relative;
                width: 500px;
                height: 500px;
                background-color: cadetblue;
                /*margin-top: 320px;*/
                top: 200px;
            }
            #d2{
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: gold;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            
        </div>

07.relative练习

div div{
                float: left;
                position: relative;
                height: 100px;
                width: 100px;
                background-color: green;
                margin-left: 20px;
                margin-top: 20px;
            }
            #d1{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="d1" style="width: 500px; background-color: gold;">
            <div background-color: gray></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

08.盒子模型

每一个标签都是由四个部分组成：

1.内容：显示标签内容的部分，可见的(设置宽和高的值，就是设置内容部分的大小)
2.内边距(padding)：可见的，不能显示内容(通过设置padding来改变其值，默认是0)
3.边框(border)：可见的，如果有内边距边框就显示在内边距上，否则就显示在内容上
4.外边距(margin)：不可见的，但是会占据浏览器的空间

/*注意：在写网页的时候，在样式表的最前面关闭自带的margin和padding*/
        *{
            margin: 0;
            padding: 0;
        }
            div{
                background-color: sandybrown;
                /*1.设置内容大小*/
                width: 100px;
                height: 100px;
                
                /*2.padding的值有四个
                 可以单独设
                 */
                /*padding-left: 20px;
                padding-top: 10px;*/
                padding: 10px 40px;  /*上下是20，左右是40*/
                
                /*3.边框
                    可以单独设，也可以一起设
                    格式：宽度 样式 颜色
                    a.样式 solid-实线  dotted-点状线 double-双线 dashed-虚线
                    */
                    /*同时设置4条边*/
                border: 3px solid black;
                
                 /*单独设置某一边*/    
                border-left-color: blue;
                
                /*4.外边距*/
                /*单独设置每个外边距*/
                margin-top: 100px;
                margin-left: 50px;
                margin-right: 100px;
                
                /*同时设置4个外边距*/
                /*margin: 上 右  下 左*/
                margin: 20px;
                
                /*5.设置圆角*/
                /*设置边框圆角的弧度*/
                border-top-left-radius: 50px;
                border-bottom-right-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div id="">
            Zzz
        </div>

09.居中

1.垂直居中

a.固定标签高度
b.设置line-height的值和高度一样

*{
            margin: 0;
            padding: 0;
        }
            div{
                height: 100px;
                width: 100%;
                line-height: 100px;
                background-color: gold;
                text-align: center;
                }
                p{
                    display: inline-block;
                    /*垂直居中*/
                    line-height: 50px;
                    height: 50px;
                    width: 200px;
                    background-color: hotpink;
                    /*水平居中*/
                    text-align: center;
                    
                }
        </style>
    </head>
    <body>
        <div>
            <p>你说你马呢？？？</p>
        </div>