前端开发HTML&css入门——盒子模型以及部分CSS样式
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
盒子模型
一个盒子我们会分成几个部分：
– 内容区(content)
– 内边距(padding)
– 边框(border)
– 外边距(margin)
盒子和边框
| width和height | background-color | |
| 盒子 | 设置的盒子内容区的大小 | 设置背景颜色 |
| border-width | border-color | border-style | |
| 盒子边框 | 边框的宽度 | 边框颜色 |
边框的样式 可选值： |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
* 盒子可见框的大小由内容区，内边距和边框共同决定
*/
width: 300px;
height: 300px;
background-color: #bfa;
border-width:10px ;
/*
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的 如果指定三个值，
则三个值会分别设置给 上 左右 下 如果指定两个值，
则两个值会分别设置给 上下 左右 如果指定一个值，则四边全都是该值 除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
* */
/*border-width:10px 20px 30px 40px ;*/
/*border-width:10px 20px 30px ;*/
/*border-width: 10px 20px ;*/
border-width: 10px;
/*border-left-width:100px ;*/
/*
* 设置边框的颜色
* 和宽度一样，color也提供四个方向的样式，可以分别指定颜色
* border-xxx-color
*/
border-color: red;
/*border-color: red yellow orange blue;*/
/*border-color: red yellow orange;*/
/*border-color: red yellow;*/
/*
* style也可以分别指定四个边的边框样式，规则和width一致，
* 同时它也提供border-xxx-style四个样式，来分别设置四个边
*/
/*border-style: double;*/
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
边框的简写形式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/* border
* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
* - 而且没有任何的顺序要求
* - border一指定就是同时指定四个边不能分别指定
* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
*/
/*设置四个边框*/
border: red solid 10px ;
/* 设置上下左右*/
border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px;
border-right: red solid 10px;/*设置三边，属性为none一边无边框*/
border: red solid 10px;
border-right: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
需要注意的是，大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none。只写一个border-style: ，就会出现一个默认的边框。
内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*设置边框*/
border: 10px red solid;
/*设置上右下左内边距*/
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
/*使用padding可以同时设置四个边框的样式，规则和border-width一致*/
/*
* 使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
/*padding: 100px;*/ /*padding: 100px 200px;*/ /*padding: 100px 200px 300px;*/ padding: 100px 200px 300px 400px;
}
</style>
</head>
<body> <div class="box1">
<div class="box2"></div>
</div> </body>
</html>
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
* 盒子的大小由内容区、内边距和边框共同决定
* 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
* 盒子 可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
需要注意的是以下这种情况：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
padding: 100px 200px 300px 400px;
}
/*box2的百分比只与box1的宽度和高度产生比例关系。不与内边距成比例关系*/
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div> </body>
</html>
效果：
外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red
/*设置上右下左外边距*/
margin-top: 100px ;
margin-right: 100px;
margin-bottom: 100px;
margin-left: 100px;
/* 外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动 */
margin-left: -150px;
/*
margin还可以设置为auto，垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，以使子元素在父元素中水平居中，经常使用.
*/
margin-right: auto
/*
* 外边距同样可以使用简写属性 margin
*/
margin: 0 auto;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
} </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
垂直外边距的折叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠
* 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 为上边的元素设置一个下外边距
*/
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
/**
* 为下边的元素设置一个上外边距
*/
margin-top: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果:
* 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素（子元素同样也会继承父元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box3{
width: 200px;
height: 100px;
background-color: yellow;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin-top: 100px;
/*
* 为子元素设置一个上外边距，是子元素的位置下移
*/
}
</style>
</head>
<body> <div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
效果：
想要解决垂直外边距的折叠的问题，只要将两个元素设置不相邻即可
方法一：将两个元素相邻的元素隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box3{
width: 200px;
/*为了高度不变，减掉隔开元素的内边距px*/
height: 199px;
background-color: yellow;
/*设置一个上内边距，将两个元素隔开*/
padding-top:1px;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
方法二：使用垂直内边距将第二个元素挤下来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box3{
width: 200px;
height: 100px;
background-color: yellow;
/*设置一个内边框，将子元素挤下来*/
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
} </style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
浏览器默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
* 所以为很多的元素都设置了一些默认的margin和padding，
* 而它的这些默认样式，正常情况下我们是不需要使用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 清除浏览器的默认样式
*/
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
} p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div> <p>段落</p>
<p>段落</p>
<p>段落</p> <ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>
内联元素盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
/*
内容区、内边距 、边框 、外边距
* */
/*
* 内联元素不能设置width和height
*/
/*width: 200px;
height: 200px;*/
/*
* 设置水平内边距,内联元素可以设置水平方向的内边距
*/
padding-left: 100px ;
padding-right: 100px ;
/*
* 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
*/
/*padding-top: 50px;
padding-bottom: 50px;*/
/*
* 为元素设置边框,
* 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
*/
border: 1px blue solid;
/*
* 水平外边距
* 内联元素支持水平方向的外边距
*/
margin-left:100px ;
margin-right: 100px;
/*
* 内联元素不支持垂直外边距
*/
/*margin-top: 200px;
margin-bottom: 200px;*/
}
.s2{
/*
* 为右边的元素设置一个左外边距
* 水平方向的相邻外边距不会重叠，而是求和
*/
margin-left: 100px;
}
</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>
</html>
水平方向的内边距：
垂直方向内边距（虽然不影响页面，但是会挡住下面的元素）：
为元素设置边框（垂直不会影响页面，但是会挡住下面的元素。水平的边框会影响页面）：
水平方向外边距，且外边距不会重叠，而是求和
display样式
因为内联元素无法设置宽和高，所以可以用display样式将内联元素转换成宽元素
| inline | block | inline-block | none |
| 可以将一个元素作为内联元素显示 | 可以将一个元素设置块元素显示 |
将一个元素转换为行内块元素 可以使一个元素既有行内元素的特点又有块元素的特点 |
不显示元素，并且元素不会在页面中继续占有位置 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> a{
background-color: #bfa;
display: inline-block; /*为其设置一个宽和高*/
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<a href="#">我是一个大大的超链接</a>
<span>hello</span>
</body>
</html>
效果：
一、内联元素宽高的确定
宽度：不受width的限制，有文字内容决定的，padding 和 margin 可以改变宽度。
高度：不受height的限制，padding 和margin 也不能改变。可以通过line-height 和 font-size来改变。
二、块级元素宽高的确定
宽度：1、可以自行设置width的值；2、不设置宽度时的值为auto，默认宽度是父元素的宽度-自身的border-自身的margin。3、需要注意的是如果宽度写了100%，应该是元素内容的宽度（content）等于父元素的宽度，元素的宽度应该等于这个宽度加自身的border，会凸出来一部分。
高度：1、可以自行设置height的值；2、默认值为0；3、由元素内部的文档流中的元素的高度的总和决定的（里面元素的height+padding+margin有合并的可能），当元素脱离文档流时，不能用于父元素高度的计算；4、当块级元素里面是文字时，文字只有一行，高度由line-height决定，文字有多行，会自动换行，但是碰到长度很长的单词时需要手动添加连字符（-）换行，有一个属性与之相关，word-breaking: break all; 超出宽度，不管单词是否结束都换行。
三、inline-block元素宽高的确定
宽度：1、设置width的值，超出宽度部分的处理方式和div一样，多个inline-block元素处于一行中时和inline元素的效果一样，可以用white-space控制是否换行；2、内容决定宽度。
visibility样式
设置元素显示和隐藏
| visible | hidden |
| 默认值，元素默认会在页面显示 | 元素会隐藏不显示 |
visibility：hidden与display：none有什么区别那？
display: none;
使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
visibility:hidden
隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
display: none;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
visibility:hidden ;
} </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span>hello</span>
</body>
</html>
效果：
overflow样式
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容* 元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：
| visible | hidden | scroll | auto |
| 默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示 | 溢出的内容，会被修剪，不会显示 |
会为父元素添加滚动条，通过拖动滚动条来查看完整内容 |
会根据需求自动添加滚动条， |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
overflow: ;
} .box2{
width: 100px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"> </div>
</div>
</body>
</html>
visible：
hidden：
scroll（使文本滚动较多使用scroll）：
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，
继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
浮动样式
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，*如果希望块元素在页面中水平排列，可以使块元素脱离文档流。使用float来使元素浮动，从而脱离文档流。
| none | left | right |
| 默认值，元素默认在文档流中排列 | 元素会立即脱离文档流，向页面的左侧浮动 | 元素会立即脱离文档流，向页面的右侧浮动 |
当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动* 元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
float: right;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果：
box1,box2,box3同时向右浮动（向左同理）：
如果元素过长，而浏览器过窄就会换到第二行继续保持浮动：
浮动的元素不会超过他上边的兄弟元素，最多最多一边齐:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 500px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 300px;
height: 300px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
需要注意的是：
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围， 所以我们可以通过浮动来设置文字环绕图片的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
/*box1向左浮动*/
float: left;
}
.p1{
background-color: yellow;
} </style>
</head>
<body> <div class="box1"></div> <p class="p1">
一进大门，靠着大门洞子的东壁是三间破房子，靠着大门洞子的西壁仍是三间破房子。再加上一个大门洞，看起来是七间连着串，外表上似乎是很威武的，房子都很高大，架着很粗的木头的房架。柁头是很粗的，一个小孩抱不过来。都一律是瓦房盖，房脊上还有透窿的用瓦做的花，迎着太陽看去，是很好看的，房脊的两梢上，一边有一个鸽子，大概也是瓦做的。终年不动，停在那里。这房子的外表，似乎不坏。
</p> </body>
</html>
效果：
当元素设置浮动以后，会完全脱离文档流
块元素脱离文档流以后，高度和宽度都被内容撑开
内联元素脱离文档流以后会变成块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .box1{
background-color: #bfa;
/*float: left;*/
}
.s1{
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
效果：
前端开发HTML&css入门——盒子模型以及部分CSS样式的更多相关文章
- css进阶----盒子模型，Reset CSS，css浮动，css定位，z-index属性
盒子模型 把页面上的每一个元素当成一个盒子 由内容,内边距,边框,外边距组成 盒子模型举例 <!DOCTYPE html> <html lang="en"> ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
随机推荐
- 3，ActiveMQ-入门（基于JMS发布订阅模型）
一.Pub/Sub-发布/订阅消息传递模型 在发布/订阅消息模型中,发布者发布一个消息,该消息通过topic传递给所有的客户端.在这种模型中,发布者和订阅者彼此不知道对方,是匿名的且可以动态发布和订阅 ...
- maven打包的时候you are running on a JRE rather than a JDK?
解决方案.删除掉,然后重新添加. 然后remove掉 然后Add Library
- layer 弹出层不能居中
$("#btnAdd").button("loading"); parent.layer.open({ title: '添加菜单', type: 2, maxm ...
- UNR#3 Day1——[ 堆+ST表+复杂度分析 ][ 结论 ][ 线段树合并 ]
地址:http://uoj.ac/contest/45 第一题是鸽子固定器. 只会10分.按 s 从小到大排序,然后 dp[ i ][ j ][ k ] 表示前 i 个元素.已经选了 j 个.最小值所 ...
- Android-Studio：Cannot reload AVD list
Android-Studio:Cannot reload AVD list 今天用Android-Studio时点击"RUN"后出现如下错误,特此记录一下解决方案. Cannot ...
- [CSP-S模拟测试]:打扫卫生（暴力）
题目描述 有$N$头奶牛,每头那牛都有一个标号$P_i1\leqslant Pi\leqslant M\leqslant N\leqslant 40,000$.现在$Farmer\ John$要把这 ...
- SQL的一对多,多对一，一对一，多对多什么意思？
1.一对多:比如说一个班级有很多学生,可是这个班级只有一个班主任.在这个班级中随便找一个人,就会知道他们的班主任是谁:知道了这个班主任就会知道有哪几个学生.这里班主任和学生的关系就是一对多. 2.多对 ...
- C\C++语言中的宏多重展开和递归展开
宏定义中的#,## 1. 宏中的参数前面使用一个#,预处理器会把这个参数转换为一个字符数组 2.记号粘贴操作符(token paste operator): ## “## ...
- fedora23深度配置gnome系统环境, 如设置ibus的面板字体大小 以及gedit 自动探测文件字符编码fileencodings
除了系统桌面gnome, 以及gnome应用程序自带的preferences, 还有很多设置, 没有在preferences, 而是被深度地隐藏在系统中, 这时, 需要安装 dconf-tools: ...
- TC39 - 新特性
tc39/proposal-hashbang: #! for JS 某些奇怪的报错可能是因为系统不支持 Shebangs / Hashbang 导致的. 貌似 Node.js 已经支持这个新特性了,使 ...