css样式相关_css样式宽度-CSDN博客

本文链接：https://blog.csdn.net/qq_39787513/article/details/108342328

css样式相关

一、css高度宽度
二、字体相关
三、颜色相关
四、背景设置
五、边框设置
六、盒子模型
七、display属性
八、伪元素选择器
九、浮动
十、伪类选择器
十一、文字装饰
十二、定位

一、css高度宽度

width：50%，宽度高度可以设置百分比，会按照父级标签的高度宽度来计算，但是如果给高度设置百分比，那么必须要求父级标签有固定高度才行
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 50%;  /*定义子级标签高度为父级标签的50%*/
            width: 50%;
            background-color: red;
        }
        .c2{
            height:500px; /*定义父级标签高度为固定*/
        }
    </style>
</head>
<body>
<div class="c2">
    <div class="c1"></div>
</div>
</body>
</html>

页面效果：

二、字体相关

详见代码注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size:20px; /*字体大小*/
            color:blue; /*字体颜色*/
            font-family:"宋体",serif;
            font-weight:200; /*字重 字体粗细 100-900 默认是400*/
            height:200px;
            width:200px;
            border:1px solid red;
            text-align:center; /* left左对齐，center水平居中，right右对齐 */
            line-height:200px; /* 和height相等，文本内容就能垂直居中 */
        }
    </style>
</head>
<body>
<div>小王今天去了电影院</div>
</body>
</html>

页面效果：

三、颜色相关

字体及背景皆可用以下方法设置颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            /*background-color:red; !*英文单词表示*!*/
            /*background-color: #4e97e8 !*16进制数表示*!*/
            background-color: rgba(71, 71, 171, 0.5); /*rgb选取颜色，a表示透明度，取值范围(0-1)*/
            height:100px;
            width:200px;
            text-align:center;
            line-height:100px;
            color: #ff9c00;
            opacity:0.8; /*整个标签设置透明度*/
        }
    </style>
</head>
<body>
<div class="c1">小王今天去了电影院</div>
</body>
</html>

页面效果：

四、背景设置

可针对于背景做设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            height:600px;
            width:600px;
            /*background-color:orange;*/
            /*!*background-image:url("图片路径")*!*/
            /*background-image:url("timg.jpeg");*/
            /*background-repeat:no-repeat;!*是否平铺*!*/
            /*background-position:center center; !*图片水平垂直居中*!*/
            /*background-position:50px 100px;*/ /*可指定距离左边和上边的距离*/
            background: orange url("timg.jpeg") no-repeat center center; /*简写方式*/
        }
    </style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

页面效果：

五、边框设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:200px;
            /*border-width:10px; !*线宽*!*/
            /*border-style:solid; !*线样式*!*/
            /*border-color:blue; !*线颜色*!*/
            border:5px dashed blue; /*简写*/
            border-left:5px solid orange; /*左边框设置*/
            border-top:5px dashed green; /*上边框设置*/
            border-right:5px solid lightskyblue; /*右边框设置*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

页面效果：

六、盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:100px;
            height:100px;
            background-color:yellow;
            margin-bottom:20px;
        }
        .c2{
            width:100px;
            height:100px;
            background-color:red;
            padding:4px 5px 2px 8px; /*上右下左(顺时针)*/
            /*padding:15px 20px !*如果只有两个值，分别代表上下、左右*!*/
            border:2px solid purple;
            margin-top:30px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

如图，红框处为红色背景框的盒子模型：
占用空间大小为：内边距+边框+content
margin：外边距距离其他标签或父级标签的距离
padding：内边距内容和边框之间的距离
border：边框
content：内容部分设置的width和height

可通过对应属性调整盒子模型对应参数大小

注意：如果两个相邻的标签都设置了margin两者之间的距离，那么不会累加，而是选最大值作为两者之间的距离

七、display属性

display可更改标签种类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:100px;
            height:100px;
            background-color: red;
            /*display:inline; !*将块级标签改为内联标签*!*/
            /*display:inline-block; !*将标签改为具有内联标签和块级标签属性效果的标签，可以设置高度宽度，而且不独占一行*!*/
            display:none /*隐藏标签，常用*/
        }
        span{
            width:100px;
            height:100px;
            background-color:blue;
            display:block; /*将内联标签改为块级标签*/
        }
    </style>
</head>
<body>
<div class="c1">a1</div>
<span>a2</span>
</body>
</html>

页面效果：

八、伪元素选择器

写法：

元素:after/before{
		content:"后面或前面要跟的字符"
	}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid blue;
        }
        div:after{
            content: '?';
        }
        div:before{
            content: '*';
        }
    </style>
</head>
<body>
<div>小王今天去了电影院</div>
</body>
</html>

页面效果：

如图，由于伪元素选择器的特性，*和？无法被选中

九、浮动

float:left/right(向左或向右浮动)
浮动的元素会脱离正常文档流，会造成父级标签塌陷的问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main-left{
            height:100px;
            width:100px;
            background-color:red;
            float:left; /*浮动起来的元素，可以设置高度和宽度，并且不独占一行*/
        }
        .main-right{
            height:100px;
            width:100px;
            background-color:blue;
            float:right
        }
        .content{
            height:200px;
            width:100%;
            background-color:yellow;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="main-left"></div>
    <div class="main-right"></div>
</div>
<div class="content"></div>
</body>
</html>

页面效果：

解决塌陷问题的四种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main-left{
            height:100px;
            width:100px;
            background-color:red;
            float:left; /*浮动起来的元素，可以设置高度和宽度，并且不独占一行*/
        }
        .main-right{
            height:100px;
            width:100px;
            background-color:blue;
            float:right
        }
        .content{
            height:200px;
            width:100%;
            background-color:yellow;
        }
        /*方式一 给父级标签加高度 不常用*/
        /*.main{*/
            /*height:100px;*/
        /*}*/
        /*方式二 清除浮动*/
        /*.content{*/
            /*height:200px;*/
            /*width:100%;*/
            /*background-color:yellow;*/
            /*clear:both; !*标签上不能有浮动元素覆盖*!*/
        /*}*/
        /*方式三 常用*/
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
        }
        /*方式4 常用*/
        /*.main{*/
            /*overflow:hidden;*/
        /*}*/
    </style>
</head>
<body>
<div class="main clearfix">
    <div class="main-left"></div>
    <div class="main-right"></div>
</div>
<div class="content"></div>
</body>
</html>

页面效果：

十、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* a标签未访问时的样式 */
        a:link{
            color:gold;
        }
        /* 点击按下去之后，抬起之前的样式 */
        a:active{
            color:blue;
        }
        /* 网址被访问过之后，显示样式 */
        a:visited{
            color:red;
        }
        /* 鼠标悬浮时样式 */
        a:hover{
            color:green;
        }
        .c1{
            height:100px;
            width:100px;
            background-color:orange;
        }
        .c1:hover{
            background-color:blue;
            cursor:pointer; /*鼠标小手效果*/
        }
    </style>
</head>
<body>
<a href="http://www.4399.com" target="_blank">小游戏</a>
<div class="c1"></div>
</body>
</html>

页面效果：
已访问过链接

十一、文字装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
           /*text-decoration:line-through;*/
            /*text-decoration:overline;*/
            text-decoration:underline;
        }
        /*去除a标签下划线*/
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>
<span>日行一善</span>
<a href="">我是超链接</a>
</body>
</html>

页面效果：

十二、定位

postion:relative 相对位置
top\left\right\bottom 四个方向的值来控制标签位置
标签按照自己原来的位置进行移动
标签还占据自己原来的空间
脱离正常文档流，可以覆盖别的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .c1{
            height:100px;
            width:100px;
            background-color:yellow;
        }
        .c2{
            height:100px;
            width:100px;
            background-color:blue;
            position:relative;
            margin-left:100px;
            margin-bottom:100px; /*只相对于原来的位置移动*/
        }
        .c5{
            height:100px;
            width:100px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
    <div class="c3"></div>
    <div class="c4"></div>
</div>
<div class="c5"></div>
</body>
</html>

页面效果：

绝对定位：
脱离正常文档流，并且不占自己原来的空间
如果父级或者祖先辈没有设置相对定位，那么绝对定位的元素会按照整个html文档的位置进行移动，反之，绝对定位的元素会按照父级或祖先辈标签的位置进行移动
postion:absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .c1{
            height:100px;
            width:100px;
            background-color:yellow;
        }
        .c2{
            height:100px;
            width:100px;
            background-color:blue;
            /*position:relative;*/
            /*margin-left:100px;*/
            /*margin-bottom:100px; !*只相对于原来的位置移动*!*/
        }
        .c5{
            height:100px;
            width:100px;
            background-color:red;
        }
        .c3{
            width:100px;
            height:100px;
            background-color:pink;
            position:absolute;
            left:50px;
            top:50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
    <div class="c3"></div>
    <div class="c4"></div>
</div>
<div class="c5"></div>
</body>
</html>

页面效果：

固定定位：
position:fixed
按照浏览器的窗口位置进行移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:red;
            height:800px;
        }
        .c2{
            background-color:yellow;
            height:800px;
        }
        .c3{
            position:fixed;
            left:30px;
            bottom:60px;
            height:40px;
            width:80px;
            background-color:aqua;
            text-align:center;
            line-height:40px;
            border-radius:50%;
        }
        .c3 a{
            text-decoration:none;
            color:orange;
        }
    </style>
</head>
<body>
<div id="top">顶部位置</div>
<div class="c1"></div>
<div class="c2"></div>
<span class="c3">
    <a href="#top">回到顶部</a>
</span>
</body>
</html>

页面效果：