第五周 CSS——2

来源：互联网发布：创业方向知乎编辑：程序博客网时间：2024/06/18 10:28

盒子模型

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>

0 0