Day5:html和css

Day5:htmlcss

如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义。然后数值为auto即可。

.dashu {
 width: 100px;
 margin: 0 auto;
}

盒子的水平居中为

margin: auto;

而文字的水平居中为:

text-align: center;
text-align: center; // 文字水平居中
margin: auto; // 盒子的水平居中

盒子水平居中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div {
        text-align: center; /*居中对齐*/
        width: 100px;
        height: 100px;
        background-color: blue;
         /* margin: 0 auto; 自动  水平居中对齐 */
         /* margin: auto; 上下左右都是auto*/
    }
    </style>
</head>
<body>
    <div>
        达叔小生
    </div>
</body>
</html>
margin: 0 auto; // 通俗
// margin: auto; 上下不显示

清除内外边距

* {
 padding: 0;
 margin: 0;
}

外边距合并:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .da{
        margin-bottom: 100px;
    }
    .shu{
        background-color: red;
        margin-top: 150px;
    }
    </style>
</head>
<body>
    <div class="da">1</div>
    <div class="shu">2</div>
</body>
</html>

外边距合并以合并的最大值为准.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    .father {
        width: 500px;
        height: 500px;
                border: 1px solid red;
        background-color: red;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: blue;
        margin-top: 50px;
        margin-left: 50px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

content宽度和高度

padding不会影响盒子的大小.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    .father {
        height: 200px;
        background-color: pink;
        width: 300px;
        /* padding-left: 30px; 给定了宽度,所以padding会撑开*/
    }
    .son {
        padding-left: 30px;
        /*没有宽度不会撑开*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">dashu</div>
    </div>
</body>
</html>

padding内边距

圆角

border-radius: 50%;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div {
        width: 300px;
        height: 300px;
        background-color: red;
        margin: 100px auto;  
        border-radius: 50%; 
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    body {
        background-color: #ccc;
    }
    .radius a {
       width: 170px;
       height: 170px;
       background-color: #fff;
       display: inline-block;
       margin: 30px;
       border-radius: 50%;
       text-align: center;
       line-height: 170px;
       color: red;
       text-decoration: none;
       font-weight: 700; 
    }
    .radius a:hover {
        background-color: red;
        color: #fff;
    }
    </style>
</head>
<body>
    <div class="radius">
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
    </div>
</body>
</html>

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影

属性

说明

h-shadow

水平阴影的位置

v-shadow

垂直阴影的位置

blur

模糊距离

spread

阴影的尺寸

color

阴影的颜色

inset

将外部阴影改为内部阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div {
        width: 200px;
        height: 200px;
    }
    div:hover {
        box-shadow: 0 15px 15px rgba(0,0,0,0.1);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浮动

float浮动:标准流,浮动,定位.

float可以让多个div在同一行显示.

属性值

说明

left

元素向左浮动

right

元素向右浮动

none

元素不浮动

选择器 {float: 属性值;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    .up {
        width: 200px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .down {
        width: 220px;
        height: 120px;
        background-color: purple;
    }
    </style>
</head>
<body>
    <div class="up"></div>
    <div class="down"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    .father {
        width: 600px;
        height: 600px;
        background-color: blue;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: red;
        float: right;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div {
        width: 100px;
        height: 100px;
    }
    .one {
        background-color: red;
        float: left;

    }
    .two {
        background-color: purple;
        
    }
    .three {
        background-color: blue;
        float: left;
    }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

盒子模型布局稳定性

width >  padding  >   margin 

浮动(float)

普通流(标准流)、浮动和定位

属性值

描述

left

元素向左浮动

right

元素向右浮动

none

元素不浮动(默认值)

推荐

Day1:html和css

Day2:html和css

Day3:html和css

Day4:html和css

如果看了觉得不错

点赞!转发!

达叔小生:往后余生,唯独有你 You and me, we are family ! 90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通 简书博客: 达叔小生 https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券