css-210205-01-CSDN博客

css - 210205 - 01

CSS美化

背景
渐变
盒子模型
圆角边框
盒子阴影
浮动

背景

背景颜色

background
背景图片

渐变

一个css网站，里面有很过css样式：https://www.grabient.com/

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

    <style>
        div{
            height: 500px;
        }
        #div1{
            background-color: #0093E9;
            background-image: linear-gradient(206deg, #0093E9 0%, #80D0C7 100%);
        }
        #div2{
            /*background-color: #FBAB7E;*/
            background: linear-gradient(135deg, #FBAB7E 0%, #F7CE68 100%);

        }
    </style>
</head>
<body>

<div id="div1">白光一</div>
<div id="div2">白光一</div>

</body>
</html>

盒子模型

margin 外边距
padding 内边距
border 边框

盒子计算：margin + border + padding + 内容宽度

border

边框粗细
边框大小
边框颜色

h1-h6,ul,li,a,body 等都会有默认边距

margin

margin:0				上下左右都是0
margin:0 1px			上下0，左右1px
margin:0 1px 2px 3px	 上0，右1px，下2px，左3px
margin:0 auto			居中
margin-top:
margin-bottom:
margin-right:
margin-left:

圆角边框

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

<!--    border-radius:0px       全部-->
<!--    border-radius:10px 10px 10px 10px       左上，右上，右下，左下（顺时针来的）10px-->

    <style>
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 50px;
        }
        .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 0px 10px 20px 50px;
        }
        .div3{
            width: 100px;
            height: 50px;
            background-color: red;
            border: 1px solid red;
            border-radius: 50px 50px 0 0;
        }
        .div4{
            width: 50px;
            height: 100px;
            background-color: red;
            border: 1px solid red;
            border-radius: 50px 0 0 50px;
        }
        .div5{
            width: 50px;
            height: 100px;
            background-color: red;
            border: 1px solid red;
            border-radius:  0 50px 50px 0;
        }
        .div6{
            width: 100px;
            height: 50px;
            background-color: red;
            border: 1px solid red;
            border-radius:  0 0 50px 50px;
        }
        img{
            border-radius: 100px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<img src="../images/a.PNG">

</body>
</html>

盒子阴影

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

    <style>
        .div1{
            width: 100px;
            height: 100px;
            border: 5px solid red;
            box-shadow: 10px 10px 10px yellow;
        }
        img{
            border-radius: 100px;
            box-shadow: 10px 10px 10px yellow;;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<img src="../images/a.PNG" alt="">

</body>
</html>

浮动

块级元素：独占一行
	h1-h6, p , div, 列表.....
	
行内元素：不独占一行（行内元素，可以被包含在块级元素中，反之，不可以）
	span, a , img, strong..........

display

<!--
	display:
		block	块元素
		inline  行内元素
		inline-block	块元素，可以在一行
-->

float

父级边框塌陷问题

clear

<!--
	clear:
		right		右侧不允许有浮动元素
		left		左侧不允许有浮动元素
		both		两侧不允许有浮动元素
		none		
-->

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

    <link href="css/test01.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="father">
    <div class="layer01"><img src="image/01.jpeg" alt=""></div>
    <div class="layer02"><img src="image/02.jpeg" alt=""></div>
    <div class="layer03"><img src="image/03.jpeg" alt=""></div>
    <div class="layer04">
        哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或
    </div>
</div>

</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid black;
}
.layer01{
    border: 1px red dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px green dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px deepskyblue dashed;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px yellow dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}

解决1 （增加父级元素高度）

#father{
    border: 1px solid black;
    height:500px;
}

解决2 （加一个空的div）

<div id="father">
    <div class="layer01"><img src="image/01.jpeg" alt=""></div>
    <div class="layer02"><img src="image/02.jpeg" alt=""></div>
    <div class="layer03"><img src="image/03.jpeg" alt=""></div>
    <div class="layer04">
        哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或
    </div>
    <div style="clear:both; margin:0; padding:0;"></div>
</div>

解决3 （overflow）(父类元素中添加)

#father{
    border: 1px solid black;
    overflow: hidden;
}

解决4 （添加伪类）

#father{
    border: 1px solid black;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}

 </div>
  <div style="clear:both; margin:0; padding:0;"></div>

```

解决3 （overflow）(父类元素中添加)

#father{
    border: 1px solid black;
    overflow: hidden;
}

解决4 （添加伪类）

#father{
    border: 1px solid black;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}