CSS属性

作者: 她即我命 | 来源:发表于2018-08-15 17:53 被阅读141次

1.选择器的权重

类型选择(元素选择器)：0001
class选择器：0010
id选择器：0100
伪类选择器:0001
层级(包含)选择器：多个选择器的权重之和
群组选择器: 分开看每个选择器的权重

谁的权重的值大，谁的优先级就高

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body #d1{
                color: peru;
            }
            .c1{
                color: deepskyblue;
            }
            #d1{
                color: green;
            }
            a{
                color: red;
            }
            
        </style>
    </head>
    <body>
        <a href=""  id="d1" class="c1">百度一下</a>
    </body>
</html>

image.png

2.浮动

标准流：
1.块标签一个占一行，从上往下布局,默认宽度是100%
2.行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行

脱流：浮动、定位
1.浮动：就是让竖着现实的标签横着来，块的默认宽度是内容的宽度
float： left和right

注意：
1.如果要使用浮动，同一级的全部标签都要一起全部浮动
2.如果父标签浮动，子标签的位置也会跟着一起动
3.布局的基本顺序：从上往下，从左往右

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            #top{
                float: left;
                background-color: red;
                width: 100%;
                height: 100px;
            }
            #m1{
                float: left;
                background-color: deeppink;
                height: 400px;
                width: 20%;
            }
            #m2{
                float: left;
                background-color: aqua;
                height: 400px;
                width: 70%;
            }
            #m3{
                float: right;
                background-color: black;
                height: 400px;
                width: 10%;
            }
            #button{
                float: right;
                background-color: green;
                height: 100px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="top"></div>
        <div id="m1"></div>
        <div id="m2"></div>
        <div id="m3"></div>
        <div id="button"></div>
    </body>
</html>

image.png

3.文字环绕

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            #d1{
                float: left;
                width: 60px;
                height: 100px;
                background-color: #FFFF00;
            }
            #d2{
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            wqheioqwueiou <br>wqaoiasbrdfaslfdjasjdopawujndj<br>xzfhasnfasjdoasioiawio<br>ujaoisuejaweeodaioepiaopsejaj<br>dajldajpdoiaq<br>wewewqioasdajkdlahweqowiuaoeqweqweqweqweqwr<br>wqrqwrqwrqwrdfhgjsrtyfdasfaservraeghasdfcrw
        </div>
        
    </body>
</html>

image.png

4.清除浮动

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
             /*2.清除浮动的方案二 */
            /* .clear{
                overflow: hidden; */
                 
                 /*3.清楚浮动方案三  万能清除法 */
                /* .clear:after{
                    display: block;
                    clear: both;
                    content: "";
                    visibility: hidden;
                    height: 0;
                }
                .clear{
                    zoom: 1;
                } */
            
        </style>
    </head>
    <body>
        
        <div style="height: 100px;background-color: #FF0000;"></div>
        <div style="background-color: #FF1493;" class="clear">
            <div style="width: 30%;background-color: peru;height: 20opx;float: left;"></div>
            <div style="width: 30%; background: #008000;height: 200px;float: left"></div>
        
         <!--1.清除浮动方案一 -->
         <div style="clear: both;"></div>
        </div>
        <div style="height: 100px;background-color: #FFFF00;"></div>
            
    </body>
</html>

image.png

5.disply

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

2.CSS中中标签分为3类：块，行内快，行内（display）
（在标准流中）
inline-block标签（行内块）：在右边会有一个空隙，目前没有办法清除），不能和其他标签无缝连接
block：块（一个占一行，默认宽度是100%，高度根据内容来确定；直接设置宽高有效）
inline-block：行内块(一行可以有多个，默认高度是内容的宽高；直接设置宽高有效)
inline：行内（一行可以有多个，默认高度是内容的宽高；直接设置宽高无效）

转换就直接在标签的样式表中直接设置disply的值为相应的值（改变标签的性质）块、行内块、行内之间切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            div{
                display: block;
                background-color: #DB7093;
                width: 100px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <span id="a" style="background-color: #00FFFF;">
            wyeiqohj
        </span>
        <span id="a" style="background-color: darkgoldenrod; ">
            wqewr
        </span>
        <div id="">
            aaa <br>bbb
        </div>
    </body>
</html>

image.png

6.定位

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            #d1{
                position: relative;
                width: 500px;
                height: 500px;
                background-color: #DB7093;
                /* top: =120px; */
                top: 200px;
                }
            #d2{
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: #FF0000;
                top: 100px;
            
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                
            </div>
            
        </div>
        <div id="" style="height: 300px;width: 300px;background-color: #FFFF00;">
            
        </div>
        
    </body>
</html>

image.png

7.relative练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            div div{
                float: left;
                background-color: green;
                width: 100px;
                height: 100px;
                position: relative;
                margin-left: 20px;
                margin-top: 20px;
            }
            #d1{
                overflow: hidden;
            }
            
        </style>
    </head>
    <body>
        <div id="d1" style="width: 500px;background-color: black;">
            
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        
        <!-- <div id="d2" style="height: 200px;background-color: #000000;"> -->
            
        </div>
        
    </body>
</html>

image.png

8.盒子模型

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
             /*写网页的时候首先在样式表的最前面关闭自带的所有的margin值和padding值 */
            *{
                margin: 0;
                padding: 0;
            }
            
            div{
                
                background-color: green;
                 /*1.设置内容的大小 */
                width: 100px;
                height: 100px;
                
                 /*2.padding的值有四个
                  可以单独设,也可以一起设
                  */
                 padding: 20px;   /* 上下左右的内边距都是20 */
                 padding: 20px 40px;   /* 上下内边距都是20,左右的内边距都是40 */
                 
                 /* 3.边框
                 可以单独设，也可以一起设
                 格式：宽度  样式  颜色
                 a.样式：solid -实线   dotted -点状线  double -双线 dashed -虚线
                 */
                 /*同时设置4条边的颜色和样式，宽度等 */
                border: 3px solid black;
                /*单独设置某条边的颜色和样式，宽度等 */
                /* border-left: 10px solid red;
                border-bottom: 5px solid greenyellow; */
                
                 /*4.外边距 */
                 /* 同时设置外边距一样的值*/
                 /* margin：上 左 下 右
                 margin：上/下 左/右*/
                 margin: 100px;
                 /* 单独设置外边距*/
                 margin-top: 100px;
                 margin-left: 100px;
                 
                 /* 5.设置圆角幅度
                 在可见的地方添加*/
                 
                 /* 设置所有的角*/
                 border-radius: 10px;
                 /* 设置左上角*/
                 /* border-top-left-radius: 10; */
                 
            }
        </style>
    </head>
    <body>
        <div>
            abc
        </div>
        <div>
            123
        </div>
        
    </body>
</html>

image.png

9.居中

1.垂直居中
a.固定标签高度
b.设置属性line-height的值和高度一样
2.水平居中
text-align: center;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            div{
                height: 100px;
                background: hotpink;
                line-height: 100px;
                text-align: center;
            }
            p{
                 /*垂直居中 */
                display: inline-block;
                height: 50px;
                line-height: 50px;
                width: 200px;
                background-color: green;
                
                 /*水平居中 */
                 text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <p id="p1">坚持比努力更可拍</p>
        </div>
        
    </body>
</html>

image.png

CSS属性

1.选择器的权重

谁的权重的值大，谁的优先级就高

2.浮动

3.文字环绕

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

4.清除浮动

5.disply

6.定位

7.relative练习

8.盒子模型

9.居中

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读