4.1盒子模型
4.1.1概念:
container:容器
header:页眉
navbar:导航条
main:主要内容
menu:菜单
content:主要内容
sidebar:边条
footer:页脚
4.1.2组成:
4.1.2.1组成:
盒子壁border
内边距padding
盒子内容width + height
margin + border + padding + (conent = width + height)
4.1.2.2内容content:
margin属性:(外边距)顺序:top right bottom left (第二个值设置为auto,表示居中)
padding属性:(内边距)
padding: 100px 200px 150px;/*上右下左 三个值的时间代表;上,左右,下 */
border属性:(框)
{
width:px、thin(粗)、medium(中)、thick(细)
style:dashed(横线)、dotted(点)、solid(实线)、double(双实线)
color:颜色
}
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding: 10px 20px 30px;
margin: 10px 20px;
}
/*真实宽度 realWidth:160px = width + border*2 +padding
真实高度realHeight:160px = height + border*2 + padding*/
overflow属性:
{
hidden:超出部分不可见
scroll:显示滚动条
auto:如果有超出部分,显示滚动条
}
4.2文档流定位
(与css杂中的块级元素等一样)
4.2.1block元素
特点:(块级元素)
独占一行,元素的height、width、margin、padding都可以设置。
常见元素:<div>、<p>、<h1>..<h6>、<ol>、<ul>、<table>、<form>
其他类型的元素可以显示为block元素,display:block(display设置为block)
4.2.2inline元素
特点:(行级元素)
不但独占一行
width、height不可设置,就是它包含的文字或图片的宽度,不可改变。
常见元素:<span><a>
其他元素显示为inline元素,需要将display设置为inline。
inline元素之间有一个间距问题
4.2.3inline-block元素
特点:(块级行元素)
不但独占一行
元素的height、weight、margin、padding都可设置
常见元素:
其他元素转换为inline-block元素,只需要把display改为inline-block即可。
4.2.4display总共四种
分别为none、block、inline、inline-block
4.3浮动定位
4.3.1float属性(用来设定浮动)
div标签实现横向多列布局
可以向左float:left,右right,不浮动none
浮动元素产生了浮动流
所有产生了浮动流的元素,块级元素看不见他们
触发了了bfc规则的元素和文本类属性(inline)的元素以及文本,都可以看见透明的浮动元素
4.3.1.1块级父元素包不住浮动的子元素
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
.wrapper{
border: 1px solid red;
}
.content{
float: left;
color: #fff;
background-color: black;
width: 100px;
height: 100px;
}
4.3.1.2解决方案
法1.将父级元素也改为浮动元素
法2.采用伪元素
.wrapper::after{
content: "";
clear: both;/*clear只对块级元素生效*/
display: block;
}
4.3.2clear属性
clear可以用来清除浮动。
clear只对块级元素生效。
一般写代码前先清除格式
*{
margin: 0;
padding: 0;
}
4.4层定位
主要为position属性
static默认值
4.4.1fixed固定定位:
相对于浏览器窗口直接定位
4.4.2relative相对定位:
保留原来位置进行定位 相对于自己原来的位置进行定位
position:relative
文档流原位置保留
定位参照物为直接父元素(不管父元素是什么定位)
4.4.3absolute绝对定位:
脱离原来位置进行定位
最近的有定位的父级元素进行定位,如果没有,那么相对于文档定位对后续元素有影响
position:absolute
文档流中的原位置不保留
定位参照物为非static的父元素
top上、left左、bottom下、right右
4.4.4操作
一般用relative作为参照物,用absolute进行定位具体样例见奥运五环。
5.z-index属性
z-index用来设置层数,默认值为零,1的话就在零的外面
bfc规则
margin塌陷问题,可以用bfc规则来解决。
bfc规则:block format context
块级格式化上下文
原因:css把每一个元素都当成一个盒子,每个盒子都有渲染规则,
操作:需要通过几种方法来触发bfc规则,从而解决margin塌陷规则。
position:absilute;
display:inline-block;
float:left/right;
overflow:hidden;
这是4个可以触发bfc规则的方法,选择对产品影响最小的来完成。