本文转载自https://blog.csdn.net/xiaogeldx/article/details/85169861
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
#div1{
350px;
height: 450px;
border: 1px solid red;
margin: into;
background: dimgray;
}
input{
330px;
height: 30px;
border-radius: 10px;
margin-left: 10px;
margin-top: 15px;
}
.a{
195px;
height:30px;
}
.b{
120px;
height: 30px;
}
</style>
</head>
<body>
<div id="div1">
<span style="margin-left: 5px;border-bottom: 5px solid red">请注册</span><a href="#" style="float: right">立即登陆></a>
<input type="text" placeholder="请输入手机号"><br>
<input class="a" type="text" placeholder="请输入短信验证码">
<input class="b" type="button" value="短信验证码"><br>
<input type="text" placeholder="请输入用户名"><br>
<input type="password" placeholder="请输入密码"><br>
<input type="password" placeholder="清再次输入密码"><br>
<input class="a" type="text" placeholder="请输入图形验证码">
<input class="b" type="button" value="此处为图形"><br>
<input type="submit" value="立即注册"><br>
</div>
</body>
</html>
盒子
- 盒子模型
-
可以把页面的每个元素看作一个盒子
-
盒子模型由内容，内边距，边框，外边距组成
-
盒子边框：
- border :复合样式
- border-color：边框颜色
- border-width：边框宽度
- border-style：边框样式
- dotted:点线
- solid:实线
- double:双线
- dashed:虚线
- border-left：左边框
- border-right：右边框
- border-top：上边框
- border-bottom：下边框
-
案例：
<link rel="stylesheet" href="css/test.css"> <div class="box"></div> .box{ 100px; height: 100px; /*边框样式*/ /*border-style:solid;*/ /*边框宽度*/ /*border- 5px;*/ /*边框颜色*/ /*border-color:skyblue;*/ /*复合样式*/ border:5px solid skyblue; /*上边框*/ border-top: 10px double blueviolet; /*右边框*/ border-right: 10px dotted deepskyblue; /*下边框*/ border-bottom: 10px dashed burlywood; /*左边框*/ border-left: 10px solid skyblue; }
-
- 盒子模型之内边距：
-
padding-top:上内边距
-
padding-right:右内边距
-
padding-bottom:下内边距
-
padding-left:左内边距
padding:30px 30px 30px 30px(顺序依次是上右下左，顺时针) -
案例：
<p class="content">life is short,u need python</p> .content{ 200px; height: 200px; border: 1px solid skyblue; /*上内边距*/ /*padding-top: 20px;*/ /*右内边距*/ /*padding-right: 10px;*/ /*下内边距*/ /*padding-bottom: 30px;*/ /*左内边距*/ /*padding-left: 10px;*/ /*复合属性*/ /*上下 左右*/ /*padding:10px 20px;*/ /*上 左右 下*/ /*padding:20px 10px 30px;*/ /*上 右 下 左*/ padding:20px 10px 30px 20px; }
-
- 盒子模型之外边距：
-
margin-top:上外边距
-
margin-right:右外边距
-
margin-bottom:下外边距
-
margin-left:左外边距
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/test.css"> <style> .top{ background: skyblue; border:1px solid red; margin-top:100px; margin-left:50px; margin-right: 50px; margin-bottom: 100px; } </style> </head> <body> <div class="top">hahahaha</div> <div style="height:100px; 100px;border:1px solid red;"></div> </body>
下图中hahahaha距离上下边框距离是100px，距离两边页面距离是50px
-
- 注意四点：
- margin调整内部div外边距；
- padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）；
- border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。
- 内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。
两个盒子都设置外边距，结果是取大的
reset css
- reset css就是重置css
- 浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致，所以需要先reset css，再写自己的样式
- 在css文件夹内新建文件reset.css，将代码复制到文件中
- reset.css要放在最上面，如图：
- reset样式
-
简单样式：
*{ padding:0; margin:0; } #*表示通配符 -
完全重置：
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
-
浮动
- 浮动就是让元素脱离正常的文档流
- 当正常文档布局不能解决的时候，则需要脱离正常的文档流
案例
<style type="text/css">
#div1{
height: 100px;
100px;
border: 2px solid red;
float: left;
{#float: right;#}
}
#div2{
height: 100px;
100px;
border: 2px solid red;
float:left;
{#float:right;#}
}
#div3{
height: 100px;
100px;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="div1">
1111
</div>
<div id="div2">
222222
</div>
<div id="div3">
33333333
</div>
浮动带来的问题
- 浮动会带来高度坍塌，一个父盒子包着两个子盒子，给两个子盒子设置浮动后，父盒子会包不住子盒子，父盒子没高度了
- 解决方法：
- 父元素设置overflow：hidden：没有使用position时使用不能和position配合使用，因为超出的尺寸的会被隐藏
- 添加一个空div：如果页面浮动布局多，就要增加很多空div，不推荐使用
- 使用伪元素：推荐使用，建议定义公共类，以减少CSS代码（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
-
父元素设置
.box{ overflow:hidden}
-
添加一个空div
.clear{ clear:both } <div class="box"> <div class="left"></div> <div class="right"></div> <div class="clear"></div> </div> -
使用伪元素(常用)
.clearfix::after{ display:block; clear:both; content:"" } <div class="box clearfix"> <div class="left"></div> <div class="right"></div> </div>
-
定位
- 定位就是将元素定在网页中的任意位置
- 定位属性值：
- 默认值（static）：不定位
- 相对定位：relative
- 绝对定位：absolute
- 固定定位：fixed
定位属性值分析
-
定位一定要找好参照物，找好了参照物，那你就成功一半了
-
默认值是静态定位，不会发生任何变化
-
相对定位，不会脱离文档流，以自身元素为参考，可以给 top/right/bottom/left
-
绝对定位，可以脱离文档流，默认以整个文档为参考，有定位父级则以父级为参考，可以给top/right/bottom/left
-
固定定位，脱离文档流，默认以窗口为参考，可以给top/right/bottom/left，窗口滚动，依然不会变，
-
父相子绝：父级是相对定位，子级就是绝对定位，如果父级不是相对定位，就找父级的父级，直到找到相对定位的或者网页
-
固定定位以网页为参照物，脱离文档流，始终固定于浏览器视图某个位置，且不随滚动条滚动而变化，应用重点：元素参照已定位父级绝对定位
-
代码1：
<div class="box1"></div> <div class="box2"></div> div{ 100px; height: 100px; } .box1{ background: skyblue; /*相对定位*/ position: relative; left:100px; top:30px; } .box2{ background: blueviolet; } -
代码2：
<div class="box1"></div> <div class="box2"></div> div{ 100px; height: 100px; } .box1{ background: skyblue; /*绝对定位*/ position: absolute; left:20px; top:20px; } .box2{ background: blueviolet; }
-
代码3：（固定定位，脱离文档流）
html,div{ height: 1000px; } div{ 100px; height:100px; } .box1{ background: skyblue; /*固对定位*/ position: fixed; bottom:40px; right:30px; } .box2{ background: blueviolet; }
box2始终固定于浏览器视图某个位置，且不随box1位置和滚动条滚动而变化
-
代码4：（应用重点：元素参照已定位父级绝对定位）
.parent{ 150px; height: 150px; border: 1px solid #000; margin: 50px auto; position: relative; } .child{ 50px; height: 50px; background: skyblue; position: absolute; top:10px; left:20px; }
z-index属性
- 定位补充
