CSS--常用属性

作者: GHope | 来源:发表于2018-08-15 17:36 被阅读6次

选择器的权重

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

布局

标准流:
块标签一个占一行,从上往下布局.
行内标签一行可以显示多个,从左往右布局,知道遇到边界就自动换行.

脱流:浮动、定位.

1.浮动：

让竖着显示的标签横着来,块的默认宽度是内容的宽度.
float：left和right.

注意：
a.如果要使用浮动，那么同一级全部浮动.
b.如果父标签浮动，那么子标签的位置会跟着一起动.
c.布局顺序：从上往下，从左往右.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*#red {
                float: left;
            }
            #green{
                float: left;
            }*/
            
            
            /*#top{
                float: left;
                background-color: red;
                height: 140px;
                width: 100%;
            }
            #m1{
                float: left;
                height: 500px;
                width: 20%;
                background-color: palegoldenrod;
            }
            #m2{
                float: left;
                height: 500px;
                width: 60%;
                background-color: yellowgreen;
            }
            #m3{
                float: left;
                height: 500px;
                width: 20%;
                background-color: gold;
            }
            #button{
                float: left;
                height: 140px;
                width: 100%;
                background-color: black;
            }*/
            
            #top{
                float: left;
                background-color: red;
                width: 100%;
                height: 99px;
            }
            #l1{
                float: left;
                background-color: black;
                width: 20%;
                height: 800px;
            }
            #lt2{
                float: left;
                background-color: gold;
                width: 80%;
                height: 200px;
            }
            #l2t3{
                float: left;
                background-color: skyblue;
                width: 60%;
                height: 600px;
            }
            #lt3{
                float: left;
                background-color: green;
                width: 20%;
                height: 200px;
            }
            #l3t4{
                float: left;
                background-color: aqua;
                width: 20%;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <!--<div id="red" style="width: 100px;height: 80px;background-color:red;">
            
        </div>
        <div id="green" style="width: 400px;height: 200px;background-color:yellowgreen;">
            
        </div>-->
        
        <!--<div id="top"></div>
        <div id="m1"></div>
        <div id="m2"></div>
        <div id="m3"></div>
        <div id="button"></div>-->
        
        <div id="top"></div>
        <div id="l1"></div>
        <div id="lt2"></div>
        <div id="l2t3"></div>
        <div id="lt3"></div>
        <div id="l3t4"></div>
        
    </body>
</html>

浮动练习

清除浮动：是指清楚因为浮动而产生的问题（高度塌陷） -- 问题不是什么时候都会产生

如何清除：
one----添加空盒子
在父标签（高度塌陷的标签）的最后添加一个空的div并且设置这个div的样式表：clear: both)
可能会产生大量代码

two----设置overflow: hidden
在父标签（高度塌陷的标签）的样式表中设置overflow: hidden

there----万能清除法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*清楚浮动*/
            /*.clear{
                overflow: hidden;
            }*/
            
            /*万能清楚*/
            .clear:after{
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
            .clear{
                zoom: 1;
            }
        </style>
    </head>
    <body>
        <div id="" style="height: 100px;background-color: red;"></div>
        <div id="" style="background-color: rosybrown;" class="clear">
            <div style="width: 30%;background-color: palegoldenrod;height: 200px;float: left;"></div>
            <div style="width: 30%;background-color: gold;height: 200px;float: right;"></div>
            
            <!--添加空盒子-->
            <!--<div id=""style="clear: both;"></div >-->
                
        </div>
        <div id="" style="height: 100px;background-color: black;"></div>
        
    </body>
</html>

未清除前

清除后
浮动小应用
文字环绕：被文字环绕的标签浮动，文字标签不浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #image{
                float: left;
                width: 80px;
                height: 60px;
            }
            .img{
                float: left;
                width: 80px;
                height: 60px;
            }
            #word{
                
            }
        </style>
    </head>
    <body>
        <div id="image">
            <img src="img/dx.jpg" class="img"/>
        </div>
        <div id="word">
            第一次工业革命，是标准化，以织布的珍妮纺织机为代表，所有人做同一个工作，生产同一种产品，满足同一种需求。<br />

            第二次工业革命，是流水线，以福特汽车工厂为代表，通过分工，生产复杂的产品，满足更高的需求。<br />
            
            第三次工业革命，是互联网化，以微软英特尔为代表，通过分工，生产复杂的模具，再通过大规模复制，满足更广泛的需求。<br />
            
            第四次工业革命，是智能化，通过分工，生产复杂的模具，再通过大规模复制，满足不同人各式各样的需求。<br />
        </div>
    </body>
</html>

文字环绕

2、定位

1、距离
top:标签顶部距离其它标签的位置
bottom:标签的底部距离其它标签的位置
left:标签的左边距离其它标签的位置
right:标签的右边距离其它标签的位置

2、position（参照物）
想要设置标签的top，bottom，left，right的值有效，必须设置标签的参考方法
----initial:（默认值）没有参考对象
absolute:相对第一个position值是非static的父标签进行定位
relative:正常位置定位（按标准流定位）
fixed:相对于浏览器定位
sticky:粘性定位(relative与fixed的结合体，一屏范围内relative,超出则为fixed)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #d1{
                position: relative;
                width: 500px;
                height: 500px;
                background-color: greenyellow;
                top: 120px;
            }
            #d2{
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: gold;
                right: 20px;
                bottom: 50px;
            }
            #d3{
                position: sticky;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                
            </div>
        </div>
        <div id="d3" style="height: 60px;background-color: plum;">
            
        </div>
        
        <div id="" style="height: 1000px;">
            
        </div>
    </body>
</html>

定位.gif

布局小练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div div{
                float: left;
                width: 100px;
                height: 100px;
                background-color: green;
                position: relative;
                margin-left: 20px;
                margin-top: 20px;
            }
            #d0{
                overflow: hidden;
            }
            
        </style>
    </head>
    <body>
        <div id="d0" style="width: 500px;background-color: skyblue;">
            
            <!--<div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
            <div id="d4"></div>
            <div id="d5"></div>
            <div id="d6"></div>
            <div id="d7"></div>
            <div id="d8"></div>-->
            
            <script type="text/javascript">
                for (var i = 0; i < 10; i++) {
                    document.write("<div></div>")
                }
            </script>

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

效果展示

display

1、HTML中标签分为块和行内

2、CSS中标签分为3类：块、行内块、行内（用display表示）
PS：在标准流中适用

block:块（一个占一行，默认宽是100%，高度视内容而定；直接设置宽高有效）

inline-block:行内块（N个占一行，默认宽，高度视内容而定；直接设置宽高有效）

inline:行内（N个占一行，默认宽，高度视内容而定；直接设置宽高无效）
通过改变标签的display的值，可以让一个标签在块、行内块和行之间切换

注意：inline-block右边默认有一个间隙，目前不能清除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 150px;
                height: 150px;
                background-color: lightcyan;
            }
        </style>
    </head>
    <body>
        <span id="" style="background-color: gold;display: inline;">
            呼儿将出换美酒
        </span>
        <span id="" style="background-color: red;display: block;">
            与尔同销万古愁
        </span>
        <div id="">
            古来圣贤皆寂寞<br />
            惟有饮者留其名<br />
        </div>
    </body>
</html>

diaplay

盒子模型

每一个标签都是由4个部分组成的：
1、内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2、内边距（padding):可见的，不能显示内容（通过设置padding来改变其值，默认是0）
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: red;
                
                /*设置内容大小*/
                width: 100px;
                height: 100px;
                
                /*padding的值有四个，可以单独设置，也可以一起设*/
                padding:20px ;
                /*四周设置*/
                padding: 20px,40px;
                /*设置上下，左右*/
                padding-left: 20px;
                /*左*/
                
                /*边框，
                 * 可以单独设置，也可以一起设
                 * 格式：宽度  样式  颜色
                 * a.样式 solid--实线   dotted--点状线   double--双线  dashed--虚线
                 * */
                border-left: 10px dashed green;
                
                border: 10px dashed green10px dashed green;
                
                /*外边距*/
                margin-left: 10px;
                margin: 10px;
                
            }
        </style>
    </head>
    <body>
        <div id="">
            abc
        </div>
    </body>
</html>

盒子模型

居中

设置居中：
1、垂直居中
a.固定标签高度
b.设置line-height的值和高度一样

2、水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                height: 100px;
                line-height: 100px;
                background-color: hotpink;
                text-align: center;
            }
            p{
                display: inline-block;
                height: 50px;
                line-height: 50px;
                width: 200px;
                background-color: lavender;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="">
            <p>花间一壶酒，独酌无相亲。</p>
        </div>
    </body>
</html>

居中

CSS--常用属性

选择器的权重

布局

1.浮动：

2、定位

display

盒子模型

居中

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Python

HTML