第五周 CSS——2

最新推荐文章于 2022-04-14 13:54:42 发布

snail131

最新推荐文章于 2022-04-14 13:54:42 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/qq_36807080/article/details/70348527

版权

盒子模型

1盒子模型基本属性

(1)magin padding border

margin 0 auto 实现居中显示
如果用复合属性margin则按照顺时针 上右下左（写四个方向）
可以缺写
 1个上右下左共有一个数据
 2个上下 左右
 3个上 左右 下
 4个上右下左

border-right: 20px ridge green;
border-left: 20px inset red;
border-top: 20px outset blue;
border-bottom: 20px inset purple;
padding: 30px 90px;

(2)盒子弧度
border-radius
当弧度设为正方形div宽高的一半时，div变为圆形
        #div2{
            width: 400px;
            height: 400px;
            background-color: darkgray;
            border-radius: 200px;
            /*下面的解决父div往下移
            原因因为存在默认外边距。故会有超出部分，会打乱布局
            把超出部分隐藏起来就可以了*/
 overflow: hidden可以解决页面显示的小bug

            overflow: hidden;
        }
        #div3{
            width: 200px;
            height: 200px;
            background-color: #E9DC51;
            border-radius: 100px;
            margin: 0 auto;
            margin-top: 100px;
        }
    </style>
    <title>盒子弧度</title>
</head>
<body>
<div>


</div>
<div id="div2">
    <div id="div3">

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

（3）盒子阴影

    div{
        width: 200px;
        height: 200px;
        background-color: #E9DC51;
            margin: 0 auto;
        /*1.x方向偏移
          2，y方向偏移
          3.模糊程度（值越大越模糊）
          4.模糊半径
          5.阴影颜色*/
        box-shadow: 0px 0px 0px 10px red;
    }
</style>

（4）outline————描边

有些类似于border的style。多用于表单的input中

    <style>
        input:focus{
            outline: none;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            outline: 2px dotted blue;
            margin: 0 auto;
        }
    </style>
    <title>outline</title>
</head>
<body>
<input type="text" placeholder="请输入密码"/>

2.div的基本布局

（1）子代div可以继承父div的属性


    <style>
        /*后代选择器  空格*/
       #container1 div{
           color: red;
       }
       /*子代选择器  箭头*/
        #container2>div{
            color: red;
        }
    </style>


    <title>后代选择器</title>
</head>
<body>
<div id="container2">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>
        <div>
            孙子元素div6
        </div>
    </div>
</div>
</body>
</html>

（2）CSS的标签选择器
a.id选择器
 
#price1{
    color: yellow;
    font-size: 20px;
    text-decoration: underline;
}
b.标签选择器：作用于当前页面所有匹配标签
li  { color: yellow}
c.类选择器 ：作用于class值为red的标签
.red{color: red}
b.为通配符选择器 * {
    padding: 0;
    margin: 0;
}
(3)浮动

变态盒模型




 
清除浮动的影响
清除浮动方式一
     在父元素中添加一个新的元素
     为新元素设置clear：both
#bottom {
    height: 10%;
    background-color: red;
    clear: both;
}
清除浮动方式二（伪类清除浮动）
.clearfix:after{
    content:"";
    display:table;

    clear:both;
}
意思是设置一个内容为空的元素，content:"";
然后此元素以块级元素的方式展现出来。类似于<table>,display:table;
 为新元素设置clear：both，clear:both;
<body>
<div id="header" class="clearfix"></div>
<div id="body">
    <div id="left">我是右侧div</div>
    <div id="center"></div>
    <div id="right"></div>
    <div id="bottom">
        我是底部div
    </div>
</div>

<div id="foot"></div>
</body>


（4）变态盒模型
例如我们在设置好div布局后其中一行上有三个div紧密贴在一起占满这一行
你在左边第一个div中打字，然后设置内边距，后发现会打乱原来的布局
这时可以在打字的div中设置变态盒模型的属性，就可以解决这个问题

变态盒模型 ( 保证布局不乱，让内容妥协)
添加padding好border不会影响页面布局，只会影响页面内容content
正常的是内容为王，就是内容不变，如果加边框就会挤走一部分容器（div）（可以
去掉box-sizing看看效果）

<body>
<!--h5的语义化标签可以当成起了别名的div-->
<header></header>
<section>
    <div id="child1">
        英雄联盟
    </div>
    <div id="child2"></div>
    <div id="child3"></div>
</section>
</body>

<style>
    header {
        height: 100px;
        background-color: darkseagreen;
    }

    section {
        background-color: darkgrey;
        height: 400px;
    }

    #child1 {
        width: 10%;
        height: 100%;
        background-color: orange;
        float: left;
        padding: 0px;
        border: 0px;
    }

    #child2 {
        width: 80%;
        height: 100%;
        background-color: salmon;
        float: left;

    }

    #child3 {
        width: 10%;
        height: 100%;
        background-color: darkmagenta;
        float: left;
    }
</style>