css中的盒子模型 css处理网页时，他认为每个元素都包含在一个不可见的矩形盒子 盒子是由 内容区，内边距(padding)，边框，外边距(margin)组成
在浏览器中，其默认样式中存在一些body等元素存在的默认样式，比如一些外边距，内边距等,它的这些默认样式
所以在编写样式之前我们需要将默认样式取消掉，在书写代码时在style中引入下面的reset.css文件即可，下面的效果不好的话，可以百度reset.css粘贴进去。
内联元素的盒模型，设置width和height无效，水平方向的内边距可以用，内联元素可以设置 垂直方向的外边距，不会影响页面的布局，即不影响其他元素的位置，仅仅是其显示效果发生变化 可以使用边框，外边距，两个内联元素的相邻外边距会相加，垂直外边距不支持！
css中的display，通过display可修改元素类型，比如块元素转化为内联元素，内联元素转化为块元素，还可以设置为内联块元素，拥有他们的共性，可以设置宽高，但又
不独占一行，比如img标签。display：none 元素不显示，也不在页面占有位置。
visiblity visiblity：none 元素不显示，但在页面占有位置。
css盒子模型中的overflow 如果子元素大小超过父元素的大小，超出父元素的内容
会在超过父元素的区域显示，父元素默认是将溢出的内容，在父元素外边显示，通过overflow可以处理溢出的内容。比如overflow：scroll/auto，添加滚动条，来查看所有内容。
文档流 文档指的是HTML的页面，每个页面都是一个文档，文档流就是处在网页中的底层表示一个页面的位置，我们创建的元素默认处在文档流中
元素在文档流中的特点。
1.块元素在文档流中会默认独占一行，默认自上往下排列，默认宽度是父元素的100%
块元素的高度默认被内容撑开。
2.内联元素在文档流中只占自身的大小，默认从左向右排列，如果一行内容纳不了所有元素则会另起一行，接着自左向右。
在内联元素，宽度和高度默认被内容撑开。
浮动（float）
块元素在文档流中默认垂直排列，如果希望块元素水平排列，可以使其脱离文档流。
<!-- 编译器使用小技巧，在开头空白处输入在英文输入法的前提下，输入!然后按下tab键，就可以快速生成下面的html模板，其余编译器也有相同操作 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.box1 {
/*使用width来设置内容区的宽度
使用height来设置盒子内容区的高度
*/
width: 100px;
height: 100px;
/*
设置背景颜色
*/
background-color: #bfa;
/*为元素设置边框，为元素设置边框，必须制定三个样式
缺一不可(如果不写会采用默认值)！！！！盒子的整个大小，是盒子内容区的大小
加上边框的大小以及内边距大小。可见框的宽度也要这样考虑计算！！！
*/
border-width: 10px;
/*
使用border-width可以设置将边框设置不同的宽度
下面的规则可应用于颜色，padding，margin等等样式。
是按顺时针 上右下左 的添加边框的宽度
如果设置三个值：则为 上 （左右） 下
如果两个值则为上下，左右。
border-width：10px 20px 30px 40px；
*/
border-color: blueviolet;
border-style: solid;
/*
以上border的样式可以简写，
这个样式是同时指定四个边，不能分别指定
使用border-top border-left等可以分别指定各边的样式
且没有顺序要求：border：10px red solid;
*/
/*
内边距，指的是盒子内容区与盒子边框之间的距离
会影响可见框的大小，元素的背景颜色会延伸到内边距中
*/
padding-top: 10px;
/*外边距是当前盒子与其他盒子的距离,且可以设置为负值，设置负值，向反方向移动，可以用来调整盒子位置
由于浏览器的盒子是靠左靠上摆放的，设置左上外边距，改变自身位置，
当设置外边距的右和下的外边距，会改变其他盒子的位置，挤动其他元素的位置
在网页中垂直方向的兄弟元素相邻外边距会发生重叠，会取两个外边距的最大值
如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素 当两元素隔开时
就可以解决父子元素的外边距影响。
*/
margin-left: 10px;
/* 设置元素居中
margin-left和margin-right设为auto，即可实现居中
快捷写法，margin:0 auto;
*/
}
.box2 {
width: 100%;
height: 100%;
background-color: aquamarine;
}
.box3 {
width: 100px;
height: 100px;
background-color: red;
float: right;
/* 当一个 元素设置浮动以后，元素会立即脱离文档流
它下面的元素会向上移动，浮动的元素会尽量向左上右上飘，直到遇到父元素的边框或者其他的浮动元素
浮动元素会在非浮动元素上一层，如果浮动元素上是一个没有浮动的块元素，那浮动不会超过块元素的位置，且不会超过上一个的兄弟浮动元素
最多并列
浮动的元素不会覆盖文字，文字会环绕在浮动元素的周围，可以实现文字环绕图片的效果。
块元素脱离文档流后，宽度和高度默认由内容决定，和父元素无关
因为内联元素不能设置宽高，脱离文档流后，内联元素会变成块元素
浮动后 脱离文档流后，块元素和内联元素，宽高都可以设置，且有内容决定
*/
}
.box4 {
width: 100px;
height: 100px;
background-color: blue;
}
.box5 {
width: 100px;
height: 100px;
background-color: green;
}
/*
*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3">1</div>
<div class="box4">2</div>
<div class="box5">3</div>
</body>
</html>
-->
reset.css
reset.css @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0} body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino
Sans GB",simsun,sans-serif} h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%} h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif} h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal} address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left} caption,th{text-align:inherit} ul,ol,menu{list-style:none} fieldset,img{border:0} img,object,input,textarea,button,select{vertical-align:middle} article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1} blockquote:before,blockquote:after,q:before,q:after{content:"\0020"} textarea{overflow:auto;resize:vertical} input,textarea,button,select,a{outline:0 none;border: none;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent} a,ins,s,u,del{text-decoration:none} sup,sub{vertical-align:baseline} html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;} body {font-family: Arial, "Microsoft Yahei", "Helvetica
Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;} hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;} a {color: #25a4bb;text-decoration: none;}
经典页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局练习</title>
<style type="text/css">
html,
body {
height: 100%;
/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/
}
.pin1 {
width: 50%;
height: 50%;
background-color: yellow;
margin: 10px auto;
}
.pin {
height: 50%;
width: 100%;
}
.pin2 {
background-color: green;
height: 100%;
width: 45%;
margin: 10px;
float: left;
}
.pin3 {
background-color: red;
height: 100%;
width: 45%;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="pin1"></div>
<div class="pin">
<div class="pin2">2</div>
<div class="pin3">3</div>
</div>
</body>
</html>
全屏品字布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局练习</title>
<style type="text/css">
html,
body {
height: 100%;
/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/
}
.pin1 {
width: 50%;
height: 50%;
background-color: yellow;
margin: 10px auto;
}
.pin {
height: 50%;
width: 100%;
}
.pin2 {
background-color: green;
height: 100%;
width: 45%;
margin: 10px;
float: left;
}
.pin3 {
background-color: red;
height: 100%;
width: 45%;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="pin1"></div>
<div class="pin">
<div class="pin2">2</div>
<div class="pin3">3</div>
</div>
</body>
</html>
更多前端资料请关注公众号：前端从入门到SP
微信扫描二维码获取更多资料
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
