CSS选择器、盒子模型、浮动与定位等详解

别说谁变了你拦得住时间么 提交于 2020-02-09 15:14:18

一、CSS

1、学习目标

  1. CSS的作用及简单使用(入门)
  2. CSS选择器(重难点)
  3. 美化网页
  4. 盒子模型
  5. 浮动与定位
  6. 网页动画

1.1、什么是CSS

  • CSS:层叠级联样式表(Cascading Style Sheet),作用是为了美化网页,给网页增添样式,包括字体、颜色、位置、背景图、定位与浮动等

  • CSS发展史:

    • CSS1.0
    • CSS2.0:DIV(块) + CSS,产生了HTML 与 CSS 结构分离的思想,让网页变得简单
    • CSS2.1:增添浮动,定位
    • CSS3.0:增添圆角,阴影,动画…. 浏览器兼容性更好

1.2、CSS样式的两种写的方法

  1. 使用style标签在HTML代码中添加CSS样式(不推荐使用,要求CSS样式与HTML代码分开写)
<!--规范,在HTML代码中可以在<style>标签中可以编写css的代码 ,每一行CSS代码之间,最好使用分号结尾
    语法:
        选择器 {
            声明1;
            声明2;
            声明3;
        }
-->

举例:给h1标签中的字设置颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
    
<body>
<h1>我是标题</h1>
</body>
    
</html>
  1. 单独在一个CSS文件中编写样式(推荐使用)
h1{
     color: red;
}
  1. 使用CSS的优势
    1. 内容与样式分离
    2. 网页结构表现统一,可以实现复用
    3. 使用SEO,容易被搜索引擎收录,扩大影响
    4. 建议CSS样式与HTML文件独立

1.3、CSS的3种导入方式

  1. 内部样式(在HTML文件中,不推荐)

     <!--内部样式-->
        <style>
            h1{
                color: green;
            }
        </style>
    
  2. 外部样式-链接式(CSS与HTML分离,推荐使用)

    <!--链接式-->
    <link rel="stylesheet" href="css/style.css">
  3. 外部样式-导入式(CSS与HTML分离,推荐使用,是CSS2.1才有的)

    <!--导入式-->
    <style>
        @import url("css/style.css");
    </style>
  4. 行内样式(在HTML文件中,不推荐)

    <!--行内样式:在标签元素中,编写一个style属性,编写样式-->
    <h1 style="color:red;">我是标题</h1>
  5. 几种样式的优先级

    就近原则,哪个近哪个生效

2、选择器(重要)

作用:选择页面上的某一个或某一类元素

2.1、基本选择器

  1. 标签选择器(选择一类元素,使用 {}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器,会选择到页面上所有的这个标签的元素*/
        /*使用标签选择器对所有的h1标签进行样式的设置*/
        h1{
            color: #a13d30;
            background: #3cbda6;
            border-radius: 24px;
        }
        /*使用标签选择器对所有的p标签进行样式的设置*/
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>
    
<h1>好好学习</h1>
<h1>天天向上</h1>
<p>开开心心</p>
    
</body>
</html>
  1. 类选择器(选择所有class属性相同的元素,用 .class属性名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器格式: .class的名称{}
        只要class属性的值相同,都可以选择上
        */
        .class1{
            color: #3748ff;
        }
        .class2{
            color: #a24fff;
        }
    </style>

</head>
<body>

<h1 class="class1">标题1</h1>
<h1 class="class2">标题2</h1>
<h1 class="class1">标题3</h1>
<p class="class2">P标签</p>
    
</body>
</html>
  1. ID选择器(选择指定ID属性值的元素,ID属性值全局唯一,用 #ID名称{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器   : id必须保证全局唯一
           格式:#id名称{}
        */
        #id1{
            color: #ff008a;
        }
    </style>
    
</head>
<body>

<h1 id="id1">标题1</h1>

</body>
</html>
  1. 基本选择器的优先级
    不遵循就近原则,固定的:ID选择器> class 选择器 > 标签选择器

2.2、层次选择器

  1. 后代选择器(从当前元素开始,后面的所有代元素,用 body 标签名称{}
/*后代选则器*/
body p{
    background: red;
}
  1. 子代选择器(从当前的元素开始,后面的一代元素,用 body>标签名{}
/*子选择器*/
body>p{
    background: #3cbda6;
}
  1. 相邻兄弟选择器(当前元素的同代向下的第一个元素,用.active+标签名{}
/*相邻弟选择器: 只有一个,相邻(向下) */
.active + p{
	background: #a13d30;
}
  1. 通用选择器(当前元素的同代向下的所有元素,用 .active~标签名{}
/*通用兄弟选则器,当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #02ff00;
}

2.3、结构伪类选择器

后面带有冒号

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

    <!--避免使用,class,id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #02ff00;
        }

        /*ul的最后一子元素*/
        ul li:last-child{
            background: #ff4832;
        }

        /* 选中 p1 : 定位到父元素,选择当前的第一个元素
        选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效! ,顺序
        */
        p:nth-child(1){
            background: #2700ff;
        }

        /*选中父元素下的p元素的第二个,类型 */
        p:nth-of-type(2){
            background: yellow;
        }

        /*a:hover{*/
            /*background: #000b3e;*/
        /*}*/

    </style>

</head>
<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bKHYQse7-1581226642321)(assets/1580986110536.png)]

2.4、属性选择器

格式:标签名[条件]{},条件可以是ID属性,也可以是class属性

条件连接符 含义
= 完全相等
*= 包含这个元素
^= 以这个元素开头
$= 以这个元素结尾
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*存在id属性的元素        a[]{}*/
        /*a[id]{
            background: yellow;
        }*/
        
        /*id=first的元素*/
        /*a[id=first]{
           background: #63ff23;
        }*/

        /*class 中有 links的元素*/
        /*a[class*="links"]{
            background: yellow;
        }*/

        /*!*选中href中以http开头的元素*!*/
        /*a[href^=http]{
            background: yellow;
        }*/

        a[href$=jpg]{
            background: yellow;
        }

    </style>

</head>
<body>

<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XY42d3xa-1581226642322)(assets/1580987733016.png)]

3、美化网页元素

3.1、为什么美化网页

  1. 有效传递页面信息
  2. 凸显页面主题
  3. 提高用户的体验,吸引用户

span标签,将要重点突出的字,使用span标签套起来(相当于h标签)

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

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习 <span id="title1">CSS</span>

</body>
</html>

3.2、字体样式

属性 含义
font-family 字体
font-size 字体大小
font-weight 字体粗细
color 字体颜色
<style>
    body{
        font-family: "Arial Black", 楷体;
        color: #a13d30;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bolder;
    }
</style>

3.3、文本样式

样式 属性
颜色 color(rgb/rgba)
文本对齐方式 text-align(居中center)
首行缩进 text-indent(2em)
行高 line-height
装饰(下划线) text-decoration
文本图片水平对齐 vertical-align(middle)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色:
        单词
        RGB 0~F
        RGBA  A:0~1

    text-align : 排版,居中,
    text-indent: 2em;  段落首行缩进
    height: 300px;
    line-height: 300px;
        行高,和 块的高度一致,就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }

        /*<!--
        水平对齐 参照物,  a,b
        -->*/
        img,span{
            vertical-align: middle;
        }

    </style>
    
</head>
<body>

<a href="">123</a>

<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>

<h1>故事介绍</h1>

<p class="p1">
    平静安详的元泱境界,每隔333年,总会有一个神秘而恐怖的异常生物重生,它就是魁拔!魁拔的每一次出现,都会给元泱境界带来巨大的灾难!
</p>

<p>
    在偏远的兽国窝窝乡,蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼,却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天,消灭魁拔的征兵令突然传到窝窝乡,村长趁机怂恿蛮大人和蛮吉从军参战。
</p>

<p class="p3">
    Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free.
</p>

<p>
    <img src="images/a.png" alt="">
    <span>asdasdajsldjalksdjalksd</span>
</p>

q
</body>
</html>

3.4、阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1XadN3h5-1581226642323)(assets/1580988647526.png)]

标签的 text-shadow属性,后面4个值分别是:阴影颜色、水平偏移、垂直偏移、阴影半径

/*text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
    text-shadow: #3cc7f5 10px -10px 2px;
}

3.5、超链接伪类

鼠标悬浮在元素上的事件:标签名:hover{颜色等属性设置}

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000;
}
/*鼠标悬浮的状态(只需要记住 :hover)*/
a:hover{
    color: orange;
    font-size: 50px;
}

3.6、列表

list-style:选择列表前的图案,none(去掉原点)、circle (空心圆)、decimal (数字)、square(正方形)

/*ul li
ul{
    background: #a0a0a0;
}*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7、背景

背景颜色:background

背景图片

<style>
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/tx.jpg");
    /*默认是全部平铺的 repeat*/
}
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}
</style>

3.8、渐变

background-color: #FFFFFF;
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)

4、盒子模型

4.1、什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZAZt9dkc-1581226642324)(assets/1580989269093.png)]

margin:外边距、padding: 内边距、border:边框

盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心,呈现盒子的主要信息内容;填充是内容区和边框之间的空间;边框是环绕内容区和填充的边界;空白边位于盒子的最外围,是添加在边框外周围的空间。

4.2、边框

使用border属性进行边框的设置,如边框粗细、样式、颜色,语法为: border:粗细 样式 颜色

默认的外边距margin=0,内边距padding=0,边框为none

4.3、内外边距

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

    <!--外边距的妙用:居中元素
     margin: 0 auto;
    -->
    <style>

        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        /*
        顺时针旋转
        margin:0
        margin:0 1px
        margin:0 1px  2px   3px
        */
        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
            margin:0 1px 2px 3px;
        }

        form{
            background: #3cbda6;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

盒子的计算方式,要包含内外边距与边框,margin + border + padding + 内容宽度

4.4、圆角边框

border-radius属性

<style>
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
}
</style>

4.5、盒子阴影

box-shadow属性

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

<!-- margin: 0 auto; 居中
要求: 块元素,块元素有固定的宽度
-->
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>

<body>

    <div style="width: 500px;display: block;text-align: center">
        <img src="images/tx.jpg" alt="">
    </div>

</body>
    
</html>

5、浮动

5.1、标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nPUVDTrM-1581226642324)(assets/1580990111949.png)]

块级元素:独自占用一行,比如:h1~h6 p div 列表…

行内元素:不独自占用一行,比如:span a img strong…

行内元素可以被包含在块级元素之间,但是块级元素不能被包含在块级元素之间

5.2、display

使用display属性解决元素间的排列问题,display属性的值: block(块元素)、inline (行内元素)、inline-block(块元素,但是可以内联在一行)、none,但是使用的不多,更多的使用float属性

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

5.3、float

  1. 左右浮动
div {
    margin:10px;
    padding:5px;
}
#father {
    border:1px #000 solid;
}
.layer01 {
    border:1px #F00 dashed;
    display: inline-block;
    float: right;
}
.layer02 {
    border:1px #00F dashed;
    display: inline-block;
    float: right;
}
.layer03 {
    border:1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    display: inline-block;
    float: right;
}

5.4、父级边框塌陷问题

使用clear属性解决

属性值 含义
clear: right 右侧不允许有浮动元素
clear: left 左侧不允许有浮动元素
clear: both 两侧不允许有浮动元素
clear: none 清除浮动

解决方案

  1. 增加父级元素的高度
#father {
    border:1px #000 solid;
    height: 800px;
}
  1. 增加一个空的div标签,清除浮动
<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}
  1. 在父级元素中增加一个overflow属性,overflow: hidden

  2. 父类添加一个伪类after

#father:after{
    content: '';
    display: block;
    clear: both;
}

几种解决方案比较

  1. 浮动元素后面增加空div,虽然简单,但是代码中尽量避免空div
  2. 设置父元素的高度,也简单,但元素假设有了固定的高度,就会被限制
  3. overflow,也简单,但在有下拉的一些场景避免使用
  4. 父类添加一个伪类:after,写法稍微复杂一点,但是没有副作用,推荐使用!

5.5、display与float对比

  1. display方向不可以控制
  2. float浮动起来会脱离标准文档流,需要解决父级边框塌陷问题

6、定位

6.1、相对定位

相对于自己原来的位置进行指定的偏移,任然在标准文档里,原来的位置会被保留。

相对定位:position: relative

方向 含义
top 距离原来的位置向上的距离
bottom 距离原来的位置向下的距离
left 距离原来的位置向左的距离
right 距离原来的位置向上右的距离
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 相对定位
    相对于自己原来的位置进行偏移~
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
            position: relative; /*相对定位:上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.2、绝对定位

基于某一个固定的位置定位,不在标准文档流中,原来的位置不会被保留

  1. 在没有父级元素定位的前提下,相对于浏览器进行定位
  2. 有父级元素,相对于父级元素定位
  3. 在父级元素的范围内进行偏移

绝对定位:position: absolute

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

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
            position: absolute;

            left: 100px;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.3、固定定位

相对于屏幕(浏览器边框)进行定位,不随页面的变化而变

固定定位:position: fixed

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

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){ /*绝对定位:相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

6.4、z-index

z-index 属性指定一个元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

默认是0,最高无限

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

        #content{
            width: 380px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px #000 solid;
        }
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        /*父级元素相对定位*/
        #content ul{
            position: relative;
        }
        .tipText, .tipBg{
            position: absolute;
            width: 380px;
            height: 25px;
            top: 216px;
        }
        .tipText{
            color: white;
            /*z-index: 0;*/
        }
        .tipBg{
            background: #000;
            opacity: 0.5; /*背景透明度*/
            filter: Alpha(opacity=50);
        }

    </style>
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""> </li>
        <li class="tipText">我要学习CSS</li>
        <li class="tipBg"></li>
        <li>时间:2019-01-01</li>
        <li>地点:中国陕西</li>
    </ul>
</div>

</body>
</html>
Title
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!