布局的方式(浮动)

一.关于上篇博客的内容回顾:

1.标签的嵌套

　　行内标签和块标签

　　行内标签不可以嵌套块级标签,但不是绝对

　　块标签嵌套块标签,行内标签

　　　　但是P标签的子标签只能是行内元素,表单元素,图片

2.table

<tr>
    <td></td>
</tr>

3.form action行为methods:get||post enctype=""一定要提交文件到服务器,一定是post情求

　　lable

　　　　for:与input的id有很大关系
　　input 重要

　　　　type
　　　　　　text: 普通文本*
　　　　　　password: 密码本*
　　　　　　submit: *
　　　　　　radio: 单选框
　　　　　　checkbox: 多选
　　　　name
　　　　value
　　select
　　　　option
　　textarea
　　　　rows
　　　　cols

View Code

4.CSS

(1).三种引入方式:

　　行内样式>内接样式和外接样式

(2).基本选择器

选择器的作用:选中标签,设置属性

　　①.标签选择器:

　　选择是"共性",不管标签嵌套多少层

<div id="box" class="box">娃哈哈</div>
div{
     color: red;          
}
div
    div
        div
            div

View Code

　　②.id选择器

　　选择的是"特性",id是唯一的,未来与JS有很大关联

#box{
         color: yellow;  
}

View Code

　　③.class选择器

　　选择的是共性,类选择器可以设置多个,一个标签也可以设置多个

.box{
       color: green
}

.active{
     color: red
}

View Code

　　④.通配符选择器,重置样式　

*{
        padding: 0;
        margin: 0;    
}

ul{
        list-style: none
}

a{
        text-decoration: none
}

View Code

4.class的使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class的使用</title>
        <style type="text/css">
                .lg{
                    font-size: 30px;
                }
                .lv{
                    color: green;
                }
                .un{
                    /*text-decoration:设置文本修饰;underline:下划线*/
                    text-decoration: underline;
                }
        </style>
    </head>
    <body>
        <p id="p1" class="lg lv">娃哈哈</p>
        <p id="p2" class="lv un">乳娃娃</p>
        <p id="p3" class="lg un">爽歪歪</p>
    </body>
</html>

View Code

二.高级选择器

1.后代选择器

儿子,孙子,重孙子

div ul li p{
    color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>
        <style type="text/css">
            .father p{
                color: red;
            }
            /*.father .sww{
                color: blue;
            }*/
        </style>
    </head>
    <body>
        <div class="father">
            <p>娃哈哈</p>
            <ul>
                <li>
                    <p class="sww">爽歪歪</p>
                </li>
            </ul>
        </div>
        <p class="rww">乳娃娃</p>
    </body>
</html>

示例

2.子代选择器

只能是亲儿子

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p

div>p{
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子代选择器</title>
        <style type="text/css">
            .father>ul>li{
                background-color: blue;
            }
            .content{
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <p>娃哈哈</p>
            <p>娃哈哈</p>
            <div class="content">
                <p>乳娃娃</p>
            </div>
            <ul>
                <li>
                    爽歪歪
                    <ul>
                        <li>优酸乳</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

示例

3.组和选择器

多个选择器组和到一起共同设置样式

div,p,a,li,span{
      font-size:14px
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组和选择器</title>
        <style type="text/css">
            div,p,a,span{
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div>我的天</div>
        <p>我的地</p>
        <a href="#">我的人民币</a>
        <span>嘿嘿嘿</span>
    </body>
</html>

示例

4.交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.active

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>交集选择器</title>
        <style type="text/css">
            div{
                color: red;
            }
            
            div.active{
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="active">娃哈哈</div>
    </body>
</html>

示例

5.属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

input[type="text"]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            form input[type="text"]{
                background-color: red;
            }
            form input[type="password"]{
                background-color: blue;
            }
            form #user{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <form action="">
            <input type="text" id="user" />
            <input type="password" />
        </form>
    </body>
</html>

示例

6.伪类选择器: LoVe HAte

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte

a:link　　没有被访问的

a:visited　　访问过后的

a:hover　　鼠标悬停的时候

a:active　　摁住的是时候

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /*没有被访问时的a标签的颜色*/
            a:link{
                color: aquamarine;
            }
            /*鼠标悬停的时候的a标签的颜色*/
            a:hover{
                color: red;
            }
            /*鼠标摁住时的a标签的颜色*/
            a:active{
                color: blue;
            }
            /*访问过后的a标签的颜色*/
            a:visited{
                color: darkgray;
            }
            span:hover{
                color: red;
                font-size: 24px;
                text-decoration: underline;
            }
            .child{
                display: none;
            }
            .father:hover .child{
                color: red;
                display: block;
            }
        </style>
    </head>
    <body>
        <a href="#">百度一下</a>
    
        <span>娃哈哈</span>
    
        <div class="father">
            乳娃娃
            <p class="child">爽歪歪</p>
        </div>
    </body>
</html>

示例

7.伪元素选择器

p:before 在...的前面添加内容一定要结合content

p:after 在...的后面添加内容与后面的布局有很大关系

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style type="text/css">
            p:first-letter{
                color: red;
                font-size: 23px;
            }
            /*用伪元素属性一定是content*/
            /*伪元素选择器与后面的布局有很大的关系*/
            p:before{
                content: "$";
            }
            p:after{
                content: ".";
            }
            .box2{
                /*需求:这个盒子一定是块级标签, span->块,且不再在页面中占位置,以后与布局有很大的关系*/
                
                /*隐藏元素不占位置*/
                /*display: none;*/
                display: block;
                
                /*隐藏元素不占位置*/
                /*display: none;*/
                visibility: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <p class="box">
            <span>娃哈哈</span>
        </p>
        <span class="box2">爽歪歪</span>
        <div>乳娃娃</div>
    </body>
</html>

示例

三.CSS的继承性和层叠性(坑)

1.继承性

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承

记住：有一些属性是可以继承下来： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素

盒模型的属性是不可继承下来的

a标签有特殊情况,设置a标签的字体颜色一定要选中a,不要使用继承性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS的继承性</title>
        <style type="text/css">
            .box{
                color: red;
            }
            .box a{
                color: blue;
            }
            .box p{
                color: royalblue;
                font-size: 30px;
                background-color: aquamarine;
                /*文本的对齐方式*/
                text-align: right;
            }
            span{
                background-color: darkgray;
            }
        </style>
    </head>
    <body>
        <div class="box">
            娃哈哈
            <a href="#">百度</a>
            <p>
                乳娃娃
                <span>爽歪歪</span>
            </p>
        </div>
    </body>
</html>

示例

2.层叠性

层叠性：权重的标签覆盖掉了权重小的标签，说白了，就是被干掉了

权重：谁的权重大，浏览器就会显示谁的属性

数：id的数量 class的数量标签的数量，顺序不能乱

(1).行内> id > class > 标签****

　　1000>100>10>1

(2).数数,数id,class标签

(3).先选中标签,权重一样,以后设置为主

(4).继承来的属性,它的权重为0,与选中的标签没有可比性

(5).如果都是继承来的属性,保证就近原则

(6).都是继承来的属性,选择的标签一样近,再去数权重

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

    /*css层叠性  权重 谁的权重大就会显示谁的样式*/

    /*如何看权重  数数选择器  id  class 标签*/
        
        /*1 0 0*/
        #box{
            color: yellow;
        }
        /*0 1 0*/
        .box{
            color: green;
        }
        /*0 0 1*/
        div{
            color: red;
        }

        /*  id > 类 > 标签*/


    </style>
</head>
<body>
    <div class="box" id="box">猜猜我是什么颜色</div>
</body>
</html>

行内>id>class>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
        /*1 3 0 */
        #father1 .box2 #father3 p{
            color: yellow;
        }
        
        /*0 4 0*/
        .box1 .box2 .box3 .box4{
            color: red;
        }
        /*2 1 1*/
        #father1 #father2 .box3 p{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

数数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
    /*继承来的属性 它的权重为0，跟选中的标签没有可比性*/
        #father1 #father2 #father3{
            color: red;
        }
        #father1 .box2 .box3 p{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

都是继承来的属性,权重为0,跟选择的标签没有可比性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
    /*继承来的属性 权重为0*/

    /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/
        #father1 .box2{
            color: red;
        }
        .box1{
            color: green;
        }
    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

继承来的属性,就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
        /*都是继承来的 ，都一样深*/
        #father1 #father2 .box3{
            color: red;
        }
        #father1 .box2 .box3{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

继承来的属性,都一样深,比较权重

四.盒模型

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

1.盒模型示意图

2.盒模型的属性:

width: 内容的宽度

height: 内容的高度

padding: 内边距, 边框到内容的距离

border: 边框, 就是指盒子的宽度

margin: 外边距, 盒子边框到附加盒子的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <!-- 
    width:内容的宽度
    height:内容的高度
    padding:内边距
    border:边框
    margin:外边距
     -->
     <div class="box"></div>
</body>
</html>

示例

3.盒模型的计算:

如果保证盒模型的大小不变,加padding就一定要减width或者减height

前提是:在标准文档流中

　　padding: 父子之间调整位置

　　margin: 兄弟之间调整位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 180px;
            height: 180px;
            /*padding-left: 100px;*/
            /*padding-left: 100px;*/
            padding-left: 20px;
            padding-top: 20px;
            border: 1px solid red;
        }
        span{
            background-color: green;
        }
        .ttt{
            margin-left: 30px;
        }
    </style>
</head>
<body>

    <!-- 202*202 -->
    <div class="box">
        <span>alex</span>
        <span class="ttt">alex</span>

    </div>
    <div class="box">
        <span>alex</span>
    </div>
</body>
</html>

示例

五.浮动

浮动能实现元素并排

盒子一浮动,就脱离了标准文档流,不占位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 100%;
                height: 40px;
                background-color: #333;
            }
            .box_suoj{
                width: 1226px;
                height: 40px;
                margin-left: auto;
                margin-right: auto;
            }
            .box .box_l{
                width: 550px;
                height: 40px;
                background-color: green;
                float: left;
            }
            .box .box_shopp{
                width: 100px;
                height: 40px;
                background-color: yellow;
                float: right;
            }
            .box .box_info{
                width: 200px;
                height: 40px;
                background-color: purple;
                float: right;
                margin-right: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box_suoj">
                <div class="box_l"></div>
                <div class="box_shopp"></div>
                <div class="box_info"></div>
            </div>
        </div>
    </body>
</html>

示例

posted @ 2018-09-20 17:56 骑驴老神仙阅读(416) 评论(0) 收藏举报

刷新页面返回顶部

骑驴老神仙

高级选择器/CSS的继承性和层叠性(坑)/模型/布局的方式(浮动)

一.关于上篇博客的内容回顾:

1.标签的嵌套

2.table

3.form action行为methods:get||post enctype=""一定要提交文件到服务器,一定是post情求

4.CSS

(1).三种引入方式:

(2).基本选择器

①.标签选择器:

②.id选择器

③.class选择器

④.通配符选择器,重置样式

4.class的使用

二.高级选择器

1.后代选择器

2.子代选择器

3.组和选择器

4.交集选择器

5.属性选择器

6.伪类选择器: LoVe HAte

7.伪元素选择器

三.CSS的继承性和层叠性(坑)

1.继承性

2.层叠性

(1).行内> id > class > 标签****

1000>100>10>1

(2).数数,数id,class标签

(3).先选中标签,权重一样,以后设置为主

(4).继承来的属性,它的权重为0,与选中的标签没有可比性

(5).如果都是继承来的属性,保证就近原则

(6).都是继承来的属性,选择的标签一样近,再去数权重

四.盒模型

1.盒模型示意图

2.盒模型的属性:

3.盒模型的计算:

五.浮动

公告

　　①.标签选择器:

　　②.id选择器

　　③.class选择器

　　④.通配符选择器,重置样式　

　　1000>100>10>1