[19/05/20-星期一] CSS_css的盒子模型
一、盒子模型
<!DOCTYPE html> <html> <!-- div 标签 块级标签 主要用来网页布局， 会将其中的子元素内容作为一个独立的整体存在 默认宽度是页面宽度，可以设置 没有默认高度，但可以设置，可以顶开 如果子元素设置百分比的高或宽，占据的是div的百分比，不是页面的 盒子模型： 把每个元素都想象成盒子，那么对网页的模型就相当于摆放盒子 分成几个部分： 内容区(content)：元素 内边距(padding): 电视机与纸箱中间塞的泡沫的长度 边框(border): 纸箱的外边缘 外边距(margin):距离其它盒子的距离 --> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> .box1{ /*盒子的大小=内容区+内边距+边框*/ width: 300px;/*使用width和height来设置内容区的宽度和高度 整个盒子的大小肯定比它大*/ height: 300px; background-color: #98FB98; /*设置背景颜色 豆沙绿*/ /*为元素设置边框 3个样式缺一不可 但是只写一个,浏览器会采用默认值, 但是3个都不写,边框的默认值是none * border-width ：边框的宽度 border-color：边框的颜色 border-style：边框的样式 * color和style都适用于如同宽度这样四个边的设置 * 除了这样设置，还可以： * border-XX-width xx可能为top right bottom left 专门设置指定边的宽度 * border-XX-color * border-XX-style */ border-width:10px 20px 30px 40px ; /*上→右→下→左 顺时针顺序 设置边框的宽度*/ border-width:10px 20px 30px ; /*上=10px 左右=20px 下=30px 这样设置*/ border-width:10px 20px ; /*上和下=10px 左右=20px 这样设置*/ border-width:10px ;/*如果只有一个值，则上下左右=10px*/ border-color:red ; /*style的可选择： solid 实线 dotted 点状边框 dashed 虚线 double 双线 none 没有边框 * */ border-style:solid ; /*边框的简写 同时写3个 没有先后顺序 但是他们指定的都是4个边 border-XX ：20px green solid; 可以单独设置每个边的样式 border：20px green solid; border-top:none;除了上边其余3个边都是这样设置 */ border: 20px green solid; /*内边距(padding) 4个方向 内边距会影响盒子可见框的大小 元素的背景会延伸到内边距 * padding-XX 设置上下左右 */ padding: 20px; /*外部距(margin) 4个方向 不会影响可见框的大小 只是影响盒子的位置 它扩大了元素的所占区域 由于页面的元素都是靠上和靠左,会导致盒子自身位置的改变 因为默认是贴左边 社会右和下，会导致其他盒子的位置的改变 自己不变 设置为负数，元素会向反方向移动 margin-top:100px ; 正数是向下移动 负数向上 还可以设置为auto 一般只设置为水平方向 ，如果只指定左外边距或右外边距 设置为auto 则其为最大值 垂直方向设置为auto 默认值为0 不会变化 left和right同时设置auto 则两侧外边距为相同的值 就可以使这个元素在父元素中水平居中 简写 margin：10px 20px 30px 40px margin:0 auto; 上下0 左右居中 * */ margin-top:100px ; margin-left:auto ; margin-right: auto; } .box2{ /*使用的子元素把父元素的内容区占满*/ width: 100%; height: 100%; background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <div class="box3"> </div> </body> </html>
二、定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ccs的定位</title> <style type="text/css"> #div01{ border: solid 2px orange; height: 200px; width: 800px; margin-bottom:10px ; margin-top:50px ; position: relative;/*给div01添加相对定位，成为其子元素绝对定位的参照元素*/ } #div01-01{ border: solid 3px ; height: 50px; width: 100px; position: absolute;/*使用绝对定位，可以使元素参照界面或父元素来进行移动*/ top: 10px; } #div02{ border: dashed 2px coral; height: 200px; width: 800px; margin-bottom:10px ; position: relative;/*使用相对定位： 相对于元素原有位置移动*/ left: 50px;/*相对于元素原来的位置移动50px 等于左边空出50px的位置 其它元素位置是不动的*/ top: 100px; background-color:coral ; z-index: 1; } #div03{ border: solid 2px #FF7F50; height: 200px; width: 800px; position: relative; background-color:rosybrown ; z-index: 2; /*优先显示div3*/ } #div04{ border: solid 2px brown; height: 50px; width: 100px; position: fixed;/*固定定位：不会随着滚动的移动而移动，不管其他div盒子如何移动 它就是不动 这里通常可以加个二维码*/ top: 270px; right: 10px; } </style> </head> <body> <div id="div01"> <div id="div01-01"></div> </div> <div id="div02">我是div2</div> <div id="div03"></div> <div id="div04"></div> </body> </html>
三、模拟百度首页
css文件
/*设置基础样式*/
*{
margin: 0;
padding: 0;
}
/*设置header部分 */
#header{/*实际中其属性设置可以在同一行*/
width: 100%;
height: 45px;
}
/*设置导航栏部分*/
#header_nav{
position: absolute;
right: 92px;
top: 26px;
}
#header_nav li{
float: left;
list-style-type: none ;
margin-left:24px ;
}
#header_nav li a{
color: #333;
font-size: 13px;
font-weight:700 ;
line-height: 24px;
}
/*设置main部分*/
#main{
width: 100%;
height: 384px;
text-align: center;
}
#img_logo{
margin-top:30px ;
margin-bottom: 21px;
}
input[type=text]{
height: 34px;
width: 539px;
border: solid 1px #4992ff;
background-image: url(../img/input.jpg);
background-repeat:no-repeat ;
background-position-x:500px ;
background-position-y:3px ;
}
input[type=submit]{
height: 34px;
width: 100px;
font-size:15px ;
color: #fff;
background-color: #2d78f4;
border: solid #2d78f4;
letter-spacing: 1px;
position: relative;
right: 5px;
top: 1px;
}
/*设置footer部分*/
#footer{
width: 100%;
height: 206px;
text-align: center;
}
/*使用伪类加样式* 当鼠标放在链接上变颜色/
#header_nav li a:hover{
color: #2D78F4;
}
html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--1、使用css+div来布局 css代码使用外链接 2、使用HTML进行每个块中页面的填充 --> <title>模拟百度首页</title> <link rel="stylesheet" type="text/css" href="baidu.css"/> <!--引入网页标题图片--> <link href="" rel="shortcut icon" /> </head> <body> <!--声明头部--> <div id="header"> <ul id="header_nav"> <li><a href=""> 新闻</a></li> <li><a href=""> hao123</a></li> <li><a href=""> 地图</a></li> <li><a href=""> 视频</a></li> <li><a href=""> 贴吧</a></li> <li><a href=""> 学术</a></li> <li><a href=""> 登录</a></li> <li><a href=""> 设置</a></li> </ul> </div> <!--声明主体--> <div id="main"> <!--引入网站logo--> <img id="img_logo" src="../img/logo.png" width="270px" height="129px"/> <br /> <form action="https://www.baidu.com/s" method="get"> <input type="text" name="wd" id="" value=""/> <input type="submit" value="百度一下"/> </form> <!--声明搜索框--> </div> <!--声明底部--> <div id="footer"> <img id="img_footer" src="../img/footer.jpg" /> </div> </body> </html>
浙公网安备 33010602011771号