【无标题】

最新推荐文章于 2024-09-09 20:11:58 发布

zj2062826469

最新推荐文章于 2024-09-09 20:11:58 发布

阅读量153

点赞数 3

文章标签： css css3 前端

本文链接：https://blog.csdn.net/zj2062826469/article/details/140359414

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次作业</title>
    <style>
        div{
            border: 1px;
            background-color: aqua;
            border-radius: 100px;
            box-shadow: 10px 10px 10px rgb(195, 255, 0);
            text-align: center;
            height: 30px;
            width: 600px;
        }

        span{
            border: 1px;
            width: 200px;
            height: 200px;
            color: red;
            box-shadow: 5px 5px 5px rgb(116, 96, 96);
            border-radius: 100px;
            border-style: none;


        }
    </style>

</head>
<body>
    <div>
        <span>影视1</span>
        <span>影视2</span>
        <span>影视3</span>
        <span>影视4</span>
        <span>影视5</span>
        <span>影视6</span>
        <span>影视7</span>
        <span>影视8</span>
        <span>影视9</span>
    </div>
</body>
</html>

css盒子模型包括边距(外边距 margin 内边距padding) 边框(border) 填充实际内容(content)

使用width和height属性设置内容的大小

width:数字+px；

height:数字+px;

版心居中:

margin:auto;

使用border设置边框

border:数字+px solid(实线)/dashed(虚线) 颜色;

border也可以给指定的方向设置边框

border-left/right/top/bottom(左右上下)

设置内/外边距 padding/margin

padding/margin:数字+px;

外边距的合并：外边距合并时会取两个margin的最大值

解决办法：一般设置一个外边距就好

外边距的塌陷：互相嵌套的块级元素，子元素的margin-top 会作用在父级元素上面

解决办法：给父元素设置border-top或padding-top或设置浮动或转为行内元素

zj2062826469

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

css盒子模型包括边距(外边距 margin 内边距padding) 边框(border) 填充实际内容(content)解决办法：给父元素设置border-top或padding-top或设置浮动或转为行内元素。外边距的塌陷：互相嵌套的块级元素，子元素的margin-top 会作用在父级元素上面。border:数字+px solid(实线)/dashed(虚线) 颜色;border-left/right/top/bottom(左右上下)外边距的合并：外边距合并时会取两个margin的最大值。
复制链接

扫一扫