02 . 前端之CSS

发布时间：2020-12-15 02:15:18 所属栏目：C语言来源：网络整理

导读：CSS简介 CSS是 C ascading S tyle S heets（级联样式表）的缩写，也叫层叠样式表。定义如何显示HTML元素。 CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。当浏览器读到一个样式表，

CSS简介

CSS是Cascading Style Sheets（级联样式表）的缩写，也叫层叠样式表。定义如何显示HTML元素。

CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。当浏览器读到一个样式表，他就会按照这个样式表来进行文档如何进行格式化（渲染）。

CSS语法

CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/   
# 注释是代码之母

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式，不推荐大规模使用.

<p styple="color: red">Hello world.</p>

内部样式

<!-- 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下.   -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            background-color: #007fff;
            height: 46px;
        }
    </style>
</head>
<body>
<div id="i1">2</div>
<div>3</div>
</body>
</html>

外部样式

外部样式就是讲css写在一个单独的文件中，一般以.css结尾，就叫css文件，然后在html页面进行引入即可，推荐使用此方式:

<link href="mystyle.css" rel="stylesheet" type="textcss"/>

Example

/* commons.css */   
.c1 {   
background: red;   
color: white;   
}   
.c2 {   
 font-size: 40px;   
 color: black;   
}

stylesheet,href引入该css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
<div class="c1 c2" style="color: pink;">youmen</div>
</body>
</html>

CSS选择器

# css指层叠样式表  
# css样式表极大地提高了工作效率

ID选择器

id选择器可以为标有id的HTML元素指定特定的样式.
id选择器以"#" 来定义
目前比较常用的方式是id选择器常常用于建立派生选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divid {
            background-color: #2459a2;
            height: 48px;
        }

        #pid a {
            /*  只给i1下的a标签设置指定样式  */
            background-color: lavender;
        }
    </style>
</head>
<body>
<p id="pid">hello css<a href="http://www.baidu.com">百度一下</a></p>

<div id="divid">这是一个div</div>
</body>
</html>

Class选择器

类选择器以一个点显示

类选择器也可作派生选择器

Example1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pclass a {
            color: red;
        }

        .divclass {
            color: deepskyblue;
        }
    </style>
</head>
<body>
<p class="pclass">这是一个class选择器<a href="http://www.baidu.com">百度一下</a></p>

<div class="divclass">这是第二个class选择器</div>
</body>
</html>

.名称{
...
}
<标签 class=‘名称’></标签>

Example2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div {
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
<span class="c1">32143214   
 <div id="c2">dafadsf</div>   
 </span>
</body>
</html>
<!-- 让span只用span里面的样式.   -->

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--
        来访问链接

        -->
        a:link {
            color: green;
        }

        /* 已访问链接 */
        a:visited {
            color: yellow;
        }

        /*    鼠标悬浮*/
        a:hover {
            color: #7fb8f7;
        }

        /* 点击a标签颜色   */
        a:active {
            color: aqua;
        }

        div {
            background-color: red;
            height: 100px;
            width: 100px;
        }

        /* 鼠标悬浮在div标签上的颜色 */
        div:hover {
            background-color: darkorchid;
        }

        /*  input输入框获取聚焦点样式  */
        input:focus {
            background-color: #eee;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">京东</a>
<div>YouMen</div>
<input type="text">
</body>
</html>

标签选择器

div {
	...
}
<!-- 所有div设置上此样式 -->

层级选择器

.c1 .c2 div {

}

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .i1,.i2,.i3 {
            background: red;
            color: black;
        }
    </style>
</head>
<body>
<div class="i1">1</div>
<div class="i2">2</div>
<div class="i3">3</div>
</body>
</html>

属性选择器

在IE6及更低版本不支持
对带有指定属性的HTML元素设置样式
根据具体属性值选择,除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择特定属性值的元素.
属性和属性值必须完全匹配
根据部分属性值选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [title] {
            color: deepskyblue;
        }

        [title=te] {
            color: red;
        }
    </style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性选择器二</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="text"] {
            width: 100px;
            height: 200px;
        }
    </style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--
        首字母大写-- >
        div:first-letter {
            color: red;
            font-size: 20px;
        }

        /*content里面内容无法选中*/
        p:before {
            content: '?';
            color: green;
            font-size: 150px;
        }

        p:after {
            content: '大傻逼';
            color: pink;
        }
    </style>
</head>
<body>
<div>我是YouMen</div>
<p>ZHOU</p>
</body>
</html>

选择器优先级

# 标签上style优先，编写顺序，就近原则.   
# 选择器之间的优先级   
id > 属性 > 类 > 标签   
# 但是可以使用limportant指定某一类优先级最高   
# 相同类型的优先级: 就近原则，即谁在最后谁生效

类选择器和ID选择器区别

# ID选择器只能在文档中使用一次，而类可以多次使用  
# ID选择器不能结合使用  
# 当使用js时候，需要用到id

css的继承

css重用

<style>   
 .c1{   
 共有   
 }   
 .c2{   
 独有   
 }   
 .c3{   
 独有   
 }   
</style>   
<div class='c1 c2'></div>

自适应/改变大小变形

CSS属性

背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: darkgray;
        }

        p {
            width: 150px;
            height: 150px;
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
<div class="backcolor">1234</div>
<p class="p">YouMen</p>

</body>
</html>

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-image: url("1.jpg");
            background-repeat: no-repeat;
            height: 200px;
            width: 200px;
            /*   不允许图片重复*/

            /* 图片居中,从上到下显示图片 */
            background-position: center top;
        }

        p{
            background-image: url("1.jpg");
            height: 200px;
            background-attachment: fixed;  
            /* 就是这个属性，让你的背景图片固定住的意思，attachment是附属、依附的意思 */
        }

    </style>
</head>
<body>
<p>测试一下背景是否可以继承</p>
</body>
    
<!--
 背景重复
 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
-->
    
</html>

文本颜色和文本对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            color: aqua;
        }

        /*p{*/
        /*    color: red;*/
        /*    text-align: center;*/
        /*    !* 居中,right靠右 *!*/
        /*}*/


        /*缩进,也可以按百分比缩进*/
        h1 {
            text-indent: -2em;
            padding-left: 2em;
        }

        p {
            padding-left: 1em;
        }
    </style>
</head>
<body>
<!--    <p>查看颜色</p>-->
<!--    <h1>标题查看颜色</h1>-->
<!--    <p>hello </p>-->

<div>
    <h1>静夜思</h1>
    <p>窗前明月光,</p>
    <p>疑是地上霜.</p>
    <p>举头望明月,</p>
    <p>低头思故乡.</p>
</div>
</body>
</html>

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。（letter-spacing）

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

文本字母大小写转换和阴影、换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            text-transform: capitalize;
            /* 单词首字母大写 */
        }

        .p2 {
            text-transform: lowercase;
            /* 将字母全部变成小写 */
        }

        .p3 {
            text-transform: uppercase;
            /* 将字母变成大写 */
        }

        p {
            text-shadow: 5px 100px 2px #7e55ff;
            /* 字体背影,第一个值: 因为有前景，背景,背景距左的一个距离 */
            /* 第二个值: 距离上方的距离 */
            /* 第三个值: 清晰度 */
            /* 第四个值: 背景颜色 */

            text-wrap: normal;
            /*width: 50px;*/
            /* 换行规则,如果是英文可能为了单词不被拆开可能多一点点少一点点 */
        }
    </style>
</head>
<body>
<p class="p1">this IS my WEB paGe</p>
<p class="p2">this IS my WEB paGe</p>
<p class="p3">this IS my WEB paGe</p>
<p>sdaffffffaddddddddddddddddddsdfaassffffffdssssssssssss</p>
</body>
</html>

字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形

属性	描述
font-family	设置字体系列
font-size	设置字体尺寸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-size: 40px;
            font-family: fantasy;
        }

        /*@font-face {*/
        /*    font-family: fantasy;*/
        /*    src: url("");*/
        /*} 此种方式可以让用户使用你页面自动下载此url字体，不用担心用户电脑没有此字体   */
    </style>
</head>
<body>
<p>标题</p>
</body>
</html>

css链接

属性	描述
link	普通的、未被访问的链接
visited	用户已访问的链接
hover	鼠标指针位于链接的上方
active	链接被点击的片刻

text-decoration	去掉a标签链接中的下划线
background-color	设置a标签链接背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: #FF0000;
            /* 未被点击的链接 */
            text-decoration: none;

            background: violet;
            /* a标签的背景颜色 */
        }

        a:visited {
            color: #00FF00;
            /* 用户已访问的链接 */

            text-decoration: none;
            /* a标签下面的下划线如果不需要可以加上上面那条属性 */
        }

        a:hover {
            color: #0000FF;
            /* 鼠标位于链接上方的颜色 */
        }

        a:active {
            color: #7e55ff;
            /* 连接被点击片刻的颜色 */
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

css列表

属性	描述
list-style	简写列表项
list-style-image	列表项图像
list-style-position	列表标志位置
list-style-type	列表类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul li{*/
        /*list-style-type: decimal;*/
        /* 设置列表前缀为数字,默认为黑圆心，也可以设置为图片*/
        /*}*/

        /*ul li{*/
        /*    list-style-image: url("1.jpg");*/
        /*}*/

        ul.ul1 {
            list-style-position: inside;
            /* 输出结果往界面中间更靠近一点 */
        }

        ul.ul2 {
            list-style-position: outside;
            /* 输出结果往界面外边更靠近一点 */
        }
    </style>
</head>
<body>
<p>看一下效果</p>
<ul class="ul1">
    <li>苹果</li>
    <li>苹果</li>
</ul>

<p>看一下效果</p>
<ul class="ul2">
    <li>苹果</li>
    <li>苹果</li>
</ul>
</body>
</html>

css之表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tb {
            border-collapse: collapse;
            /* 折叠边框 */
            width: 200px;
            height: 200px;
        }

        .tb,tr,th,td {
            border: 1px solid bisque;
            /* 外边框设置为１像素并设置颜色 */
            padding: 5px;
            /* 内边距 */
        }

        .tb th {
            text-align: right;
            /* 表格居左 */
            background-color: aqua;
            color: #FFFFFF;
        }

        .tb tr.alt td {
            color: black;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<table class="tb">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>小周</td>
        <td>20</td>
        <td>男</td>
    </tr>

    <tr class="alt">
        <td>小兰</td>
        <td>18</td>
        <td>女</td>
    </tr>

    <tr>
        <td>小萌</td>
        <td>18</td>
        <td>女</td>
    </tr>

    <tr class="alt">
        <td>小萌</td>
        <td>18</td>
        <td>女</td>
    </tr>
    </tbody>
</table>

</body>
</html>

CSS轮廓

用来突出一些元素的作用，比如说一个元素需要一些强烈的视觉效果让用户去注意他.例如下面代码就是为了突出文字重点.

属性	描述
outline	设置轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            outline: groove;
            /* 双实线 */

            outline-color: #7e55ff;
            /* 实线颜色　*/

            outline-style: dotted;
            /* 虚线 */
        }
    </style>
</head>
<body>
<p>突出效果文字</p>
</body>
</html>

自适应/改变大小

# 左右滚动条的出现   
# 宽度，百分比   
# 页面最外层: 像素的宽度=>最外层设置绝对宽度，里面设置百分比.   
    
# 自适应   
# media

默认img的标签，有一个1px的边框

img{   
 border: 0;   
}

css盒子模型

盒子模型内容范围包括margin、border、padding、content组成
下图就是个盒子模型

CSS内边距

# 内边距在centent外，边框内  
# 内边距属性

属性	描述
padding	设置所有边距
padding-bottom	设置底边距
padding-left	设置左边距
padding-right	设置右边距
padding-top	设置上边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        td{
            padding: 100px;
            padding-left: 100px;
            padding-right: 200px;
            padding-bottom: 100px;
        }
    </style>
<body>
    <table border="1">
        <tr>
            <td>内边距</td>
        </tr>
    </table>
</body>
</html>

css外边距

围绕在内容边框的区域就是外边距，外边距默认为透明区域.
　外边距: 围绕在内容边框的区域就是外边距，外边距默认为透明区域,外边距接受任何长度单位,百分数值

属性	描述
margin	设置所有边距
margin-bottom	设置底边距
margin-left	设置左边距
margin-right	设置右边距
margin-top	设置上边距

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: auto;
        }

        .boxmode1 {
            margin: 100px;
        }

        .hd {
            border-style: dashed;
        }

        .pd {
            padding: 10px;
        }

        .content {
            background-color: bisque;
        }
    </style>
</head>
<body>
<div class="boxmode1"> 外边距
    <div class="hd"> 边框样式
        <div class="pd"> 内边距
            <div class="content">BoxModel_Demo</div>
        </div>

    </div>

</div>
</body>
</html>

注意

# 垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
# 水平方法,两个标签都设外边距,取两者的边距之和.

CSS边框

我们可以创建效果出色的边框，并且可以应用于任何元素.
边框的样式: border-style: 定义了10个不同的非继承样式,包括none.
边框的单边样式

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

Example1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 100px;
            height: 30px;

            /* 实线边框 */
            border-style: solid;

            /* 边框宽度 */
            border-width: 5px;

            /* 设置单边框宽度 */
            border-top-width: 10px;

            /* 设置边框颜色 */
            border-color: aquamarine;

            /* 圆角边框 */
            border-radius: 10px;

            /* 设置边框底色 */
            background-color: greenyellow;

            /* 设置边框文字居中 */
            text-align: center;
        }

        .cssid {
            background-color: darkorange;
            width: 100px;
            height: 100px;
            text-align: center;
            box-shadow: 10px 10px 5px darkorange;
            /* 向右向下移动了10个像素,透明度5px以及颜色*/
            /* 还可以设置边框图片border-img */
        }
    </style>
</head>
<body>
<p>CSS边框样式</p>
<div class="cssid">css阴影效果</div>
</body>
</html>

Example2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 48px;   /* height: 48px 内容高度 */
 width: 80%;                 /* 让此内容只占据80% */
 border: 3px solid #7e55ff;  /* 加上一个像素为1px的边框，并且为实体 */
 font-size: 16px;            /* 字体大小 */
 text-align: center;         /* text-align: center 水平居中 */
 line-height: 48px;          /* 根据标签高度自适应垂直居中 */
 font-weight: bolder;        /* 字体加粗 */
">YouMen
</div>
</body>
</html>

display属性

用于控制HTML元素的显示效果

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

Example1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px solid black;
            /*display: none;*/
            /*display: inline-block;*/
            display: block;
        }
    </style>
</head>
<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1" style="display: none"></div>

<!--  hidden标签看不到,但是位置还在  -->
<div class="c1" style="visibility: hidden"></div>
</body>
</html>

CSS之Float

在 CSS 中，任何元素都可以浮动。最开始出现浮动这个东西是为了什么呢，记不记得一个word文档里面，插入图片的时候，有一个文字环绕的效果啊

最开始浮动这个东西是想要做上面这种效果用的，现在多数用来做网页布局的。你记不记得很多的网站都是左边一个菜单栏，右边一堆的其他内容啊

Example1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: aqua;
            height: 100px;
            width: 100px;
            float: left;
        }

        .c2 {
            background-color: #eeeeee;
            height: 100px;
            width: 100px;
            float: right;
        }

        .c3 {
            background-color: pink;
            height: 300px;
            width: 300px;

            /*清除浮动*/
            /*clear: both;*/
        }

        .cc {
            height: 100px;
        }
    </style>
</head>
<body>
<div class="cc">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>

浮动有一个副作用,容易造成父级标签塌陷,影响页面整体布局.

# 解决方法
	# 1. 给父级标签设置高度
    # 2. 给父级标签加上 clear: both
    		/*清除浮动*/
            clear: both;
	# 3. 伪元素选择器清除浮动,给父级标签加上下面这个类值
            .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

clear属性

clear属性规定元素的哪一侧不允许其他浮动元素

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

overflow溢出属性

我们在一个标签里面写了一堆的文字，然后把标签的高度和宽度设置的比较小的时候，文字就溢出了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 70px;
            height: 70px;
            border: 4px solid chartreuse;
			/* 可以让多出来的文字不会跑到标签外,会出现滚动条 */
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="c1">讨厌自己明明不甘平凡,却又不好好努力</div>
</body>
</html>

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

# overflow（水平和垂直均设置）

# overflow-x（设置水平方向，只出现x轴的滚动条）

# overflow-y（设置垂直方向，只出现y轴的滚动条）

圆形图像示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
        }

        .header-img {
            /* 如果这个高度和宽度比图片的像素小怎么办，图片显示不全啊，
            因为用户上传的头像没准多大像素的，就需要设置下面哈格.header-mg>img，
            里面写上max-width:100%了 */
            width: 150px;
            height: 150px;
            border: 3px solid white;

            /* 圆形的边框 */
            border-radius: 50%;

            /* 溢出的内容隐藏 */
            overflow: hidden;
        }

        /*相当于将图片的大小设置为父级标签的大小来显示了，因为用户上传的头像的像素我们是不知道的，
        就让它按照父级标签的大小来，就能放下整个头像了，就不会出现头像显示不全的问题了
　　　　
        直接写width:100%就行，上面写max-width的意思是如果图片大于咱们设置的标签高宽的时候，
        就按照父级标签的大小来，比父级标签的高宽小的时候，就不需要按照父级标签的大小来了，了解一下就行了*/
        .header-img > img {
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="header-img">
    <img src="1.jpg">
</div>
</body>
</html>

CSS之定位

static（无定位，咱就不说了，主要看相对和绝对定位）

　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

1.relative（相对定位）

　　相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。往上移动
（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!