CSS基础（三）个人笔记

最新推荐文章于 2024-06-17 09:00:23 发布

jredu1996

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量222

点赞数 1

分类专栏： html5 新手文章标签： css class

本文链接：https://blog.csdn.net/jredu1996/article/details/76534247

版权

新手同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

超链接的伪类

1.link: 未访问状态。
2.visited：已访问状态。
3.hover：鼠标悬浮状态。
4.active：鼠标激活选定状态。
事例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*未访问状态*/
        a:link{
            color:palevioletred;
        }
        /*已访问状态*/
        a:visited{
            color: darkgray;
        }
        /*鼠标悬浮状态*/
        a:hover{
            color: red;
        }
        /*鼠标激活选定状态*/
        a:active{
            color: yellow;
        }
    </style>
    <title>超链接的伪类样式</title>
</head>
<body>

</body>
<a href="http://www.baidu.com">百度</a>
</html>

结果如下：
这里写图片描述

盒子模型

margin:外边距影响当前盒子和其他盒子的距离
1个值：上右下左采用相同的值
2个值：上下采用第一个左右采用第二个
3个值：上左右下
4个值：按照上右下左的顺序添加值
padding：内边距内容与边框的距离
border:边框
contect:内容
外边距边框和内边框都会影响你内容的宽度。
overflow :规定内容溢出盒子模型
visible:会出现在框外
hidden:会隐藏溢出部分
auto:溢出部分会加一个滑动条
事例（一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #id1{
            width: 300px;
            height: 300px;
            background-color: darkgray;
            margin: 0px auto;
            overflow: hidden;/**/
        }
        #id2{
            width: 150px;
            height: 150px;
            background-color: yellow;
            margin: 0px auto;
            margin-top: 75px;
            border: 2px dashed red ;
        }
    </style>
    <title>LianXi</title>
</head>
<body>
<div id="id1">
    <div id="id2">

    </div>
</div>

</body>
</html>

结果如下：
这里写图片描述
事例（二）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            width:  100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            /*overflow :规定内容溢出盒子模型
            visible:会出现在框外
            hidden:会隐藏溢出部分
            auto:溢出部分会加一个滑动条*/

            overflow: auto ;
        }
    </style>
    <title>overflow</title>
</head>
<body>
<div id="div1">
    杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家
</div>
</body>
</html>

结果：
这里写图片描述

非标准流

float:属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
事例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #header{
            height: 150px;
            background-color: blue;
            /*border:1px solid red;*/
        }
        #main{
            /*height: 350px;*/
            background-color: black;
            /*border:1px solid red;*/
        }

        #footer{
            height: 150px;
            background-color: yellow;
            /*border:1px solid red;*/
        }
        #cat{
            /*float:是元素脱离正常的常规文档流，表现为向左或右浮动*/
            float: left;
            height: 300px;
            width: 20%;
            background-color:  bisque;

        }
        #content{
            float: left;
            height: 300px;
            width: 40%;
            background-color:palevioletred;

        }
        #sidebar{
            float: left;
            height: 300px;
            width: 20%;
            background-color: aquamarine;
        }
        /*通过伪类向main中添加一个块级标签，使用clear:both,清除浮动带来的影响（标准写法）*/
        .cleanfix:after{
            content: "";
            display: table;
            clear: both;
        }
        .cleanfix{
            zoom: 1;/*开启兼容模式可以使用低版本ie也可以完成清除浮动*/
        }
        /*#bottom{*/
            /*height: 50px;*/
            /*background-color: #ff6600;*/
            /*clear: both;!*清除浮动带来的影响*!*/
        /*}*/
    </style>
    <title>非标准流</title>
</head>
<body>
<div>
    <div id="header"></div>
    <div id="main" class="cleanfix">
        <div id="cat">左</div>
        <div id="content">中</div><!--父级盒子中的所有盒子都采用浮动形式，若父级盒子未指定高度，则父级盒子高度为0-->
        <div id="sidebar">右</div>
        <!--<div id="bottom">底部</div>&lt;!&ndash;内容受浮动盒子影响&ndash;&gt;-->
    </div>
    <div id="footer"></div>
</div>

</body>
</html>

结果：
这里写图片描述

jredu1996

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（三）个人笔记

超链接的伪类1.link: 未访问状态。 2.visited：已访问状态。 3.hover：鼠标悬浮状态。 4.active：鼠标激活选定状态。事例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> /*未访问状态*/ a:link{
复制链接

扫一扫