CSS详细介绍（其二）_定义域的宽度和高度分别为400px、250px,边框:大小为“3”,颜色自定义。文本居中对-CSDN博客

本文链接：https://blog.csdn.net/weixin_61855876/article/details/131985564

12 清除与浮动

12.1 float 属性

float 属性规定元素如何浮动。属性值有三种，左浮动（left）、右浮动（right）和默认浮动（none），比如报纸和一些新闻的排版。

<head>
    <style>
        nav{
            width: 400px;
            height: 200px;
            background-color: #df9494;
            display: inline-block;
            font-size: 1.7pc;
        }
        nav div{
            border: 2px solid black;
        }
        /* 左浮动 */
        .nav_left{
            float: left;
        }
        /* 右浮动 */
        .nav_right{
            float: right;
        }
        /* 默认(没有)浮动 */
        .nav_none{
            float: none;
        }
    </style>
</head>
<body>
    <nav>
        <div class="nav_left">
            左浮动
        </div>
        <div class="nav_right">
            右浮动
        </div>
        <div class="nav_none">
            默认浮动默认浮动默认浮动默认浮动默认浮动默认浮动默认浮动
        </div>
    </nav>
</body>

12.2 clear属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。clear 的属性有：

none - 允许两侧都有浮动元素（默认值）
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素

12.3 clearfix属性

如果一个元素比包含它的元素高，并且它是浮动的，会“溢出”到其容器之外，那咱可以这样写：

.clearfix {
	overflow: auto;
}

12.4 浮动实例

12.4.1 导航菜单和web布局

<head>
    <style>
        * {
            margin: 0;padding: 0;
        }
        /* 头部开始 */
        header {
            background-color: #ccc;
        }
        header h1 {
            height: 70px;
            font-size: 30px;
            line-height: 70px;
            color: white;
            margin-left: 2pc;
        }
        /* 头部结束 */
        /*中间部分开始*/
        nav {
            width: 1300px;
            margin: 0 auto;
        }
        /* 中间部分结束 */
        /* 中间左部分开始 */
        section {
            min-width: 20%;
            float: left;
        }
        section ul li {
            background-color: #1e57c2;
            list-style-type: none;
            height: 70px;
            line-height: 70px;
            margin-top: 10px;
            color: white;text-align: center;
        }
        /* 中间左部分结束 */
        /* 中间右部分开始*/
        aside {
            width: 75%;
            float: left;
            height: 350px;
            margin-left: 30px;
        }
        /* 中间右部分结束 */
        /* 尾部部分开始 */
        footer {
            clear: both;
            color: white;
            background-color: #ccc;
            height: 60px;
            line-height: 60px;
            font-size: 25px;
            padding-left: 40px;
        }
        /* 尾部部分结束 */
    </style>
</head>
<body>
    <header>
        <h1>北京市</h1>
    </header>
    <nav>
        <section>
            <ul>
                <li>历史沿革</li>
                <li>行政区划</li>
                <li>地理环境</li>
                <li>自然环境</li>
            </ul>
        </section>
        <aside>
            <h2>简介</h2>
            <p>北京（Beijing），简称“京”，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心，截至2020年，全市下辖16个区，总面积16410.54平方千米。2021年末，北京市常住人口2188.6万人，比上年末减少0.4万人。2021年，北京市全年实现地区生产总值40269.6亿元，按不变价格计算，比上年增长8.5％。全市人均地区生产总值为18.4万元。</p>
        </aside>
    </nav>
    <footer>
        <p>版权所有</p>
    </footer>
</body>
</html>

12.5 CSS清除浮动

清除浮动是每一个 web前端设计师必须掌握的技能，而清除浮动有五种解决办法（给父元素定义高度、在标签结尾处加空的div标签—clear:both、给父元素定义伪类—after和zoom、给父级元素定义—overflow:hidden和overflow:auto），最常用的只有前两种。

12.5.1 在标签结尾处(前)加空div标签 clear:both

<head>
    <style>
        nav {
            border: 1px solid rgb(0, 0, 0);
            width: 200px;
            height: 250px;
        }
        section {
            width: 50px;
            height: 50px;
            background-color: rgb(221, 5, 5);
            float: left;
        }
        aside {
            width:50px;
            height: 50px;
            background-color: rgb(16, 221, 5);
            float: right;
        }
        footer {
            width: 100%;
            /* clear: both清除浮动的解决代码，可以说是让前面的浮动消失
            	当父元素的子元素有浮动且没有高度时，子元素会从父元素的框架中移到外面，也可以在nav父元素中增加一个height，来解决子元素的浮动。
            */
            clear: both;
            height: 200px;
            background-color: #2078e4;
        }
    </style>
</head>
<body>
    <nav>
        <section></section>
        <aside></aside>
        <footer></footer>
    </nav>
</body>
</html>

12.5.2 父级div定义伪元素:after 和 zoom

<head>
    <style>
        nav {
            border: 1px solid rgb(0, 0, 0);
            width: 800px;
        }
        section {
            width: 20%;
            height: 200px;
            background-color: rgb(221, 5, 5);
            float: left;
        }
        aside {
            width: 30%;
            height: 200px;
            background-color: rgb(16, 221, 5);
            float: right;
        }
        footer {
            width: 800px;
            height: 100px;
            border: 1px solid rgb(0, 0, 0);
        }
        .icon {
            width: 10pc;
            height: 10pc;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        /*清除浮动 */
        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            /* 让一个元素消失，但框架还在，和dispaly有所不同 */
            visibility: hidden;
            height: 0
        }
        .clearfloat {
            /* zoom(IE专有属性)可解决i6,i7的浮动问题 */
            zoom: 1
        }
    </style>
    </style>
</head>
<body>
    <nav class="clearfloat">
        <section>left</section>
        <aside>right</aside>
    </nav>
    <footer>footer</footer>
</body>
</html>

12.5.3 父级div定义 overflow:hidden 或 overflow:auto

<head>
    <style>
        nav {
            border: 1px solid rgb(0, 0, 0);
            width: 800px;
            /* overflow:hidden让自动浏览器自动检查浮动的区域，但不能配合position使用;
               overflow:auto也可以自动浏览器自动检查浮动的区域，如果父元素之下子元素的宽超过父元素时，会出现滚动条，一般不常用。
            */
            overflow:hidden;
        }
        section {
            width: 20%;
            height: 200px;
            background-color: rgb(221, 5, 5);
            float: left;
        }
        aside {
            width: 30%;
            height: 200px;
            background-color: rgb(16, 221, 5);
            float: right;
        }
        footer {
            width: 800px;
            height: 100px;
            border: 1px solid rgb(0, 0, 0);
        }
    </style>
    </style>
</head>
<body>
    <nav>
        <section>left</section>
        <aside>right</aside>
    </nav>
    <footer>footer</footer>
</body>
</html>

13 CSS对齐方式

13.1 元素居中对齐

nav {
    /* 如果让一个元素水平居中，就可以使用margin: auto或者 margin:0 auto */
	margin: auto;
	width: 500px;
    /* 加上边框，可以清除的看到此元素 */
	border: 1px solid green;
}

13.2 文本居中

nav{
    /* 让文本居中，使用text-align: center */
    text-align: center;
}

13.3 水平居中—使用定位的方式

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        nav {
            position: relative;
            width: 100%;
            margin: auto;
            background-color: #ff0000;
        }
        section {
            /* 把section定位到右边
               也可以使用float左右浮动来写
            */
            position: absolute;
            right: 0px;
            width: 300px;
            background-color: #b0e0e6;
        }
    </style>
</head>
<body>
    <nav>
        nav
        <section>section</section>
    </nav>
</body>
</html>

13.4 文本垂直水平居中对齐

通常用padding、line-height来进行垂直水平居中，但还有一个不常用的position和transform。

<head>
    <style>
       aside{
           width: 200px;
           /* 文本左右居中 */
           text-align: center;
           /* 文本上下居中 */
           padding: 70px 0;
           border: 1px solid rgb(41, 153, 110);
       }
       h1{
            width: 300px;
            height: 200px;
            font-size: 30px;
            line-height: 200px;
            background-color: #13a7c1;
        }
        h1 p{
            /* 这种方法要计算文字的宽度及对应父元素的宽度 */
            padding: 0 20px;
        }
        .center {
            /* position和transform是配合使用 */
            width: 800px;
            height: 200px;
            position: relative;
            border: 3px solid green;
        }

        .center p {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <aside>
        垂直居中
    </aside>
    <h1>
        <p>文字水平垂直居中</p>
    </h1>
    <div class="center">
        <p>水平居中和垂直居中</p>
    </div>
</body>
</html>

14 display属性

14.1 隐藏元素

在本12.5.3中有提到过visibility:hidden，作用是让内容消失，但框架还在。display: none是直接让内容隐藏，该元素占用的空间也会消失，后续可以用JavaScript让其显现。

nav {
    visibility: hidden;
}
aside{
    display: none;
}

14.2 块元素、内联元素和display: inline-block

nav {
    /* 把nav元素显示为内联元素，设置宽高无效 */
   display: inline;
}
aside{
    /* 把aside元素作为块元素 */
    display: block;
}
section{
    /* 把section元素显示为内联元素，可以设置宽高 */
	display: inline-block;
}

15 伪类

伪类用于定于元素的特殊状态，可以和类选择器结合使用，也可以在元素上使用。

<head>
    <style>
        /* 未访问的链接 */
        a:link {
            color: #bd3838;
        }
        /* 已访问的链接 */
        a:visited {
            color: #079e07;
        }
        /* 鼠标悬停链接,常用*/
        a:hover {
            color: #e064e0;
        }
        /* 链接被鼠标点击时 */
        a:active {
            color: #8e8ede;
        }
        /*
           如果为多个链接状态设置样式，请遵循如下顺序规则：
		   a:hover 必须 a:link 和 a:visited 之后
		   a:active 必须在 a:hover 之后
        */
    </style>
</head>
<body>
    <a href="#">伪类</a>
</body>

16 伪元素

伪元素是设置指定部分的样式，可以设置元素的首字母、首行的样式，也可以在元素的内容之前或之后插入内容

/* 在nav元素的内容之后插入内容 */
nav::before {
    /* content后的值默认为空，必须得有。后面可跟图片 */
	content: " ";
	vertical-align: middle;
	margin-right: 12px;
}

17 超链接

17.1 文本装饰

a{
    /* 给超链接去掉下划线 */
    text-decoration: none;
}
a:hover {
    /*在鼠标经过时增加下划线 */
	text-decoration: underline;
}

17.2 背景色

/* 当鼠标点击时，背景颜色为黄色 */
a:active {
     background-color: yellow;
}

17.3 链接按钮

我们可以组合多个 CSS 属性，将链接显示为框/按钮。

<head>
    <style>
        a {
            color: white;
            width: 200px;
            height: 150px;
            text-align: center;
            padding-top:80px;
            text-decoration: none;
            display: inline-block;
            background-color: red;
        }
        a:link,a:visited {
            background-color: red;
        }
        a:hover,a:active {
            background-color: rgb(165, 100, 100);
        }
    </style>
</head>
<body>
    <a href="#">链接按钮</a>
</body>
</html>

18 有序列表和无序列表

无序列表（ul）列表项用的是项目符号标记，有序列表（ol）- 列表项用的是数字或字母标记。

18.1 不同的列表项目标记

list-style-type 属性指定列表项标记的类型。list-style-image 属性将图像指定为列表项标记：

<head>
    <style>
        ul li{
            /* 每个li前面显示圆心 */
            list-style-type: circle;
            /* 每个li前面显示黑色小正方形 */
            /* list-style-type: square; */
        }
        ol li{
            /* 每个li前面用罗马数学排列 */
            list-style-type: upper-roman;
            /* 每个li前面用字母排列 */
            /* list-style-type: lower-alpha; */
            /* 图像作为列表项标记 */
            /* list-style-image: url('img的链接'); */
        }
    </style>
</head>
<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
    </ul>
    <ol>
        <li>0</li>
        <li>1</li>
        <li>2</li>
    </ol>
</body>
</html>

18.2 删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号:

ul li{
    /* 去掉li前面的标记或项目符号 */
    list-style-type: none;
}

18.3 设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。

<head>
    <style>
        *{
           margin: 0;padding: 0;
        }
    	ol{
            background-color: pink;
            padding: 10px 30px;
        }
        ol li{
            background-color: rgba(218, 131, 240,0.4);
            margin: 10px 0;
            height: 45px;
            font-size: 20px;
            line-height: 45px;
        }
    </style>
</head>
<body>
    <ol>
        <li>唱</li>
        <li>跳</li>
        <li>rap</li>
    </ol>
</body>

19 css表格

19.1 边框

<head>
    <style>
        table{
            /* 给表格加上边框 */
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>三原色</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>红绿蓝</td>
            <td>七种颜色</td>
        </tr>
    </table>
</body>
</html>

19.2 宽度和高度

表格的宽度和高度由 width 和 height 属性定义，伪类也可以用在表格中。

<head>
    <style>
        table{
            width: 800px;
            border-collapse:collapse;
            /* 让文本水平居中对齐 */
            text-align: center;
            /* 在这里使用vertical-align:bottom;可以让文本下对齐
               同时也可以用padding控制表格之间的间距
            */
        }
        th,td{
            /* 这里是让表格有边框，注意th自带居中对齐
               用border-bottom: 1px solid #ccc;可以实现水平分割线的效果
               可以给th，td给个统一的背景颜色
            */
            border: 1px solid black;
            height: 100px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>三原色</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>红绿蓝</td>
            <td>七种颜色</td>
        </tr>
    </table>
</body>
</html>

19.3 条纹表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color ：

/* 选择奇数行，颜色为灰色*/
tr:nth-child(odd) {
      background-color: #ccc;
}
/* 选择偶数行，颜色为灰色*/
tr:nth-child(even) {
      background-color: #ccc;
}

20 表单—input输入元素

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间，下面是具体代码

<head>
    <style>
        /* 选择有text的input */
        input[type="text"] {
            /* 宽度和窗口同等 */
            width: 100%;
            /* input的内边距，上下为12px，左右为20px */
            padding: 12px 20px;
            /* input的内边距，上下为8px */
            margin: 8px 0;
            /* 让input成为怪异盒模型 */
            box-sizing: border-box;
            /* 加个边框2px 实线 红色
               如果只需要下边框，使用border-bottom: 2px solid red;就能实现
            */
            border: 2px solid red;
            /* 圆角边框10px */
            border-radius: 10px;
            /* input背景颜色是绿的 */
            background-color: green;
            /*字体为白色 */
            color: white;
            /* 背景图片 */
            background-image: url('img的链接');
            /* 背景定位   上右下左10px */
			background-position: 10px;
            /* 背景不重复 */
			background-repeat: no-repeat;
            /* 左内边距40px */
			padding-left: 40px;
        }
        input[type="text"]:focus {
            /* 在input被选中时，背景变成天蓝色 */
            background-color: skyblue;
            /* 边框为2px  实线  灰色 */
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <form>
        姓名: <input type="text">
    </form>
</body>
</html>

21 CSS轮廓

css轮廓分为轮廓样式、轮廓宽度、轮廓颜色和轮廓偏移。

<head>
    <style>
        header,nav{
            /* header和nav的上右下左外边框80px */
            margin: 80px;
        }
        header{
            /* 宽300px  高100px 更直观的看 */
            width: 300px;
            height: 100px;
            /* 背景红颜色 */
            background-color: red;
            /* 
               常用的就是solid实线边框
               其它还有点状(dotted)、虚线(dashed)、双线(double)、凹槽(groove)、凸槽(ridge)、凹边(inset)和凸边(outset)
            */
            outline-style: solid;
            /* 
               边框大小为thick通常为5px，值也可以直接用特定尺寸(px、pt、em和cm)
               thin(1px)、medium(3px)、thick(5px)
            */
            outline-width: thick;
            /* 值为blue绿色，也可以用rbg(0,0,0) 、#ccc*/
            outline-color: blue;
            /* 指定边框边缘外 25px 的轮廓 */ 
            outline-offset: 25px;
        }
        nav{
            width: 300px;
            height: 100px;
            /* outline 属性是用于设置以下各个轮廓属性的简写属性 */
            outline: thick solid blue;
            background-color: red;
            outline-offset: 25px;
        }
    </style>
</head>
<body>
    <header></header>
    <nav></nav>
</body>
</html>

22 max-width和min-width

max-width 属性用于设置元素的最大宽度。可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。min-width 属性用于设置元素的最小宽度。

nav{
	max-width: 500px;
	height: 100px;
	background-color: blue;
}
header{
	min-width: 500px;
	height: 100px;
	background-color: blue;
}

23 媒体类型

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

23.1 媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
    CSS-Code;
}

23.2 菜单的媒体查询

使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同

<head>
    <style>
        *{
            margin: 0;padding: 0;
        }
        /* 900px屏幕 */
    	aside ul{
            width: 900px;
            height: 100px;
        }
        aside ul li{
            width: 150px;
            height: 100px;
            line-height: 100px;
            list-style-type: none;
            padding: 0 75px;
            color: white;
            text-decoration: none;
            background-color: #fc5d5d;
            float: left;
        }
        /* 当鼠标经过时发生的变化 */
        aside ul li:hover{
            background-color: #dea9a9;
        }
        /* 当屏幕小于600px时进行改变 */
        @media screen and (max-width: 600px) {
            aside ul{
                width: 200px;
                height: 300px;
            }
            aside ul li{
                height: 100px;
                line-height: 100px;
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <aside>
        <ul>
            <li>网站首页</li>
            <li>联系我们</li>
            <li>注册/登录</li>
        </ul>
    </aside>
</body>

23.3 列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

<head>
    <style>
        /* 这里用有序列表实现 */
    	ol{
            width: 900px;
            height: 100px;
            margin: auto;
        }

        ol li {
            /* 每个li占20%,减去左右边框10px */
            width: calc(20% - 10px);
            float: left;
            color: black;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            background-color: #ccc;
            margin: 0 10px;
            list-style-type: none;
        }
        ol li:hover{
            background-color: #c5bebe;
        }
        /* 当屏幕小于700px的效果 */
        @media screen and (max-width: 700px) {
            ol{
                width: 600px;
            }
            ol li {
                width: calc(50% - 20px);
            }
        }
        /* 当屏幕小于500px的效果 */
        @media screen and (max-width: 500px) {
            ol{
                width: 400px;
            }
            ol li {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</body>

24 css变量

24.1 css变量的用途

构建大型站点时，在这些网页中，有大量的CSS样式，并且会在许多场合大量重复的使用。变量目前有两种方式：

变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用函数var(–main-size) 会返回–main-size对应的值。
自定义属性，这些属性使用–where的特殊格式作为名字–main-size:30px; 即声明一个CSS语句，意思是：将30px赋值给–main-size变量。

注意：自定义属性在没有父级元素的情况下，只能用于当前层。

24. 2 局部变量和全局变量

CSS自定义属性（CSS custom properties）之所以选用两根连字符（–）表示CSS变量，是因为$foo 被Sass占用

了，@foo被Less占用了，为了产生冲突，所以就改用（–）表示CSS变量了。

注意：在写自定义变量时，区分大小写。比如–Head和–head就是两个不同的变量。

/* 局部变量 */
element{
    --main-bg-color:red;
}
/* 全局变量 */
:root{
    --pane-padding:10px;
}

24. 3 var( )函数

定义一个var（）函数

nav{
    /* 定义一个属性为red */
	--color:red;
    /* var( ) 函数用以读取变量，var（变量名） */
    background-color: var(--color);
    /* var()函数还可以使用第二个参数，表示变量的默认值。如果这个变量不存在，就会使用这个默认值 */
	background-color: var(--color , green);
}

注意：第二个参数不处理内部的逗号或是空格，都视为参数的一部分

var( ) 函数可以用在变量的声明

nav{
	/* 定义一个属性名为--color */
	--color:red;
	--bacolor: var(--color);
}

如果把var( ) 函数写在父元素中，其父元素的所有子元素都可以引用

<head>
    <style>
    	section{
            --bgcolor:red;
            --color:white;
            --hovercolor:skyblue;
            width: 300px;
            height: 300px;
        }
        section p{
            /* 给文字引用--color */
            color: var(--color);
            /* 给背景引用--bgcolor */
            background-color: var(--bgcolor);
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        section p:hover{
            /* 当鼠标经过时，背景颜色改变--hovercolor */
            background-color: var(--hovercolor);
        }
    </style>
</head>
<body>
    <section>
        <p>wenzi</p>
        <p>文字</p>
    </section>
</body>