初始包含块
浮动元素的包含块是离他最近的块级祖先元素}(浮动提升半级)
定位元素
包含块-根元素(html)的包含块成为初始包含块(由用户代理创建，她是一个视窗大小的矩形)
对于一个非根元素，其position值为relative或static包含块由最近块父及构成
对于一个非根元素,其position值为absolute，包含块设置为最近的position值不是static的祖先元素，
1.如果这个元素是块级元素包含块设置为标准盒模型的内容区（浏览器厂商规范为div+css，而不是行内元素，行元素）
各属性默认值
left top right bottom width height默认值为auto
margin padding 为零
border-width默认值为中等大小
百分比参照与margin
嵌套元素margin padding 参照的是父元素的width
三列布局
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
4.不要用定位来布局框架（他会脱离文档流，给后面布局带来影响）
body{
/*2*left+right*/
min-width: 600px;
}
div{
height: 100px;
}
#left,#right{
width: 200px;
background: pink;
}
#left{
float: left;
}
#right{
float: right;
}
#middle{
background: deeppink;
}
//*中间列优先显示*/
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
圣杯布局无固定高宽
body{
min-width: 600px;
}
#content{
padding: 0 200px;
}
#header,#footer{
height: 20px;
text-align: center;
border: 1px solid deeppink;
background: gray;
}
#content .middle{
float: left;
width: 100%;
background: pink;
/*padding: 0 200px;*/
}
#content .left{
position: relative;
left: -200px;//根据前端坐标系，往外为负值
margin-left: -100%;//margin决定元素之间边界，负值史元素镂空
float: left;
width: 200px;
background: yellow;
}
#content .right{
position: relative;
right: -200px;
margin-left: -200px;
float: left;
width: 200px;
background: yellow;
}
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content" class="clearfix">
<div class="middle">
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div id="footer">footer</div>
</body>
圣杯布局的技术要点
浮动：搭建完整的布局框架
margin为负值：调整旁边两列的位置，（使三列布局到一行上）
使用相对定位：调整旁边两列的位置，（是两列调整到两头）
注意的知识点float，absolute下margin左右auto会失效，浮动定位不能撑开父元素
伪等高圣杯布局
#wrap{
width: 750px;
border: 1px solid;
margin: 0 auto;
overflow: hidden;/*溢出隐藏*/
}
#wrap .left{
float: left;
width: 200px;
background: pink;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#wrap .right{
float: left;
width: 500px;
background: deeppink;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="wrap" class="clearfix">
<div class="left">
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
</div>
<div class="right">
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
</div>
</div>
双飞翼布局
<head>
<meta charset="UTF-8">
<title></title>
<!--两组实现的对比:
1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
3.两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
/*头部 脚部样式*/
#header,#footer{
border: 1px solid;
background: gray;
text-align: center;
}
/*三列的伪等高布局*/
#content .middle,#content .left,#content .right{
/*padding-bottom:10000px ;
margin-bottom: -10000px;*/
height: 50px;
line-height: 50px;
float: left;
}
技术要点：将元素用padding往外扩，margin往里收
/*双飞翼布局*/
#content{
overflow: hidden;
}
#content .middle{
width: 100%;
background: deeppink;
}
#content .middle .m_inner{
padding: 0 200px;
}
#content .left,#content .right{
background: pink;
width: 200px;
text-align: center;
}
#content .left{
margin-left: -100%;
}
#content .right{
margin-left: -200px;
}
</style>
</head>
<body>
<div id="header">
<h4>header</h4>
</div>
<div id="content">
<div class="middle">
<div class="m_inner">
middle
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div id="footer">
<h4>footer</h4>
</div>
</body>
```
技术要点：margin为负值（不影响元素的位置）
负值往里收
正直往外扩
**绝对定位模拟固定定位（两个只有在出现滚动条的时候不一样）**
禁止默认滚动条
将滚动条加给body
让body的尺寸变成视口的尺寸
<style type="text/css">
html,body{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: auto;
}
.inner{
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
background: darkgreen;
}
</style>
</head>
<body>
<div id="wrap" style="height: 1000px;">
<div class="inner"></div>
</div>
</body>
绝对定位参照于包含块
固定定位参照视口
**粘连布局**
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#wrap{
min-height: 100%;
background: chartreuse;
text-align:center;
overflow: hidden;
}
#wrap .main{
padding-bottom:50px ;
}
#footer{
height: 50px;
line-height: 50px;
background: green;
text-align: center;
margin-top: -50px;
}
/*粘连布局
stickFooter是什么
当<main>足够长的时候，footer跟紧在<main>后面
当<mian>小于屏幕的宽度的时候，footer在最底部
* */
</style>
</head>
<body>
<div id="wrap" >
<div class="main">
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
main <br />
</div>
</div>
<div id="footer">
footer
</div>
**BFC**
box是css布局的对象和基本单位
box的类型由元素的类型和display决定
display为block，会生成块级盒子
display为inline,会生成行级盒子
BFC决定了内部的块级盒子怎么布局，并且这个区域与外部没有关系
**BFC布局规则**
内部的box会垂直的一个一个放置
BFC区域不会与浮动盒子重叠
内部的Box垂直方向距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
计算BFC的高度式，浮动元素也要参与浮动（清除浮动 haslayout）
BFC就是页面上一个隔离的容器，容器里的元素不会影响外面的元素，反之也是
**BFC什么时候出现（元素生成BFC）**
根元素
float不为none
position为absolute或fixed
display为inline-block table-cell table-caption flex inline-flex
两列布局
#wrap{
width: 300px;
border: 1px solid;
margin: 0 auto;
}
#left{
float: left;
width: 80px;
height: 80px;
background: url(img/xfz.png) no-repeat;
background-position: -50px -50px;
}
#des{
padding-left:10px ;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;//形成BFC,margin重叠
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"></div>
<div id="des">
此产品贱卖 买一送三 此产品贱卖 买一送三此产品贱卖 买一送三 此产品贱卖 买一送三<br />
此产品贱卖 买一送三 此产品贱卖 买一送三<br />
此产品贱卖 买一送三 此产品贱卖 买一送三<br />
此产品贱卖 买一送三 此产品贱卖 买一送三<br />
此产品贱卖 买一送三 此产品贱卖 买一送三<br />
此产品贱卖 买一送三 此产品贱卖 买一送三<br />
此产品贱卖 买一送三 此产品贱卖 买一送三<br />
</div>
</div>
在同一个BFC下，margin会重叠
css hack
条件注释表达式
自定义低版本函数检测
</body>
<script type="text/javascript">
console.log(isIE(8));
//js中的作用域都是函数作用域
function isIE(version){
var b = document.createElement("b");
b.innerHTML="<!--[if IE "+version+"]><i></i><![endif]-->";
return b.getElementsByTagName("i").length == 1 ;
}
//伪数组: 具有length属性的js对象
console.log(document.body.getElementsByTagName("i").length);
</script>
<script type="text/javascript">
左右查询
//左查询 对等号左侧的变量进行查询 在作用域链中进行查找 没找到在全局var 一个
test()
function test(){
var a=8;
b=a;
console.log(b);//8
}
console.log(b)//8
console.log(a)//undefined
//右查询 等号的非左侧 作用域链中进行查找，没找到报错
// console.log(b);
</script>
清除浮动
··1.给父级加高度
扩展性不好
2.开启BFC
overflow:hidden
定位
浮动（都是加给父级）
ie 6 7底下不支持BFC
3.br标签
ie6 不支持
违反了结构 行为 样式相分离的原则
4.空标签
违反了结构 行为 样式相分离的原则
ie6下元素的最小高度为19px
可以尝试给元素的fontsize设为0---> 2px
5.伪元素 + 开启haslayout
因为ie6 7 下不支持伪元素
所以要额外的去开启haslayout
元素垂直水平居中
方式一
*{
margin: 0;
padding: 0;
}
#test{
width: 200px;
height: 200px;
line-height: 200px;
background: pink;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="test">
test
</div>
方式二
已知高度的元素水平垂直居中方案
#wrap{
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
#inner{
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
test
</div>
</div>
</body>
方式三
<!--
绝对定位盒子的特性
高宽有内容撑开
水平方向上： left + right + width + padding + margin = 包含块padding区域的尺寸
0 0 100 0 0 400
垂直方向上： top + bottom + height + padding + margin = 包含块padding区域的尺寸
0 0 100 0 0 600
-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
#inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
test<br />
test<br />
test<br />
test<br />
</div>
</div>
</body>
方式四
<!--未知高度的元素水平垂直居中方案-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
#inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
testtesttesttesttesttesttest<br />
testtesttesttesttesttesttest<br />
testtesttesttesttesttesttest<br />
testtesttesttesttesttesttest<br />
testtesttesttesttesttesttest<br />
testtesttesttesttesttesttest<br />
</div>
</div>
</body>
字体
font-size css属性指定字体大小，该属性被用于计算em的长度单位
默认值为medium chrome下是16px 可继承 最小为12px
px
em是动态的 当定义font-size属性的时候 1em等于父元素的字体大小
font-style 默认值normal Italic与oblique表示斜体
font-weight normal blod常规使用
font-family：指定字体 能管理一类字体
简写属性：font:font-style font-weight font-size/line-height font-family
文本属性
line-height:由顶线 中线 基线 底线
行高（上一个基线到下一行基线），行距（底线到顶线 计算行高减去字体大小），半行距
内容区（一行顶线到底线） 行内框（（行高-font-size大小）/2） 行框 （一行上垂直垂直对齐时以行高最大行内框为基准）
字体总结
在web前端开发中，line-height要大于font-size的1.5
行高 ：行高因子1设置代表父元素fontsize的1倍（行高一般用于垂直居中）
其他文本属性
color
text-align(只对行内元素与内联元素有作用，浮动元素没用)
text-indent:首行缩进（两格2em）
word-spacing：单词空格之间的距离
text-decoration：下划线等
letter-spacing:字母之间的间距
white-space控制换不换行
vertical-align(只对内联元素起作用垂直方向)
垂直居中
<body>
<div style="background-color:deeppink; margin-top:50px ;">
<span style="font-size:30px;background-color:pink;line-height:1.5;vertical-align: bottom;">中文English</span>
<span style="font-size:40px;background-color:pink;line-height:1.5;">中文English</span>
<span style="font-size:50px;background-color:pink;line-height:3;">中文English</span>
</div>
</body>
史图片垂直水平居中
#wrap{
height: 400px;
width: 400px;
border: 1px solid ;
margin: 0 auto;
text-align: center;
}
#wrap:after{
content: "";/*利用伪元素来设置*/
display: inline-block;
height: 100%;/*创建一个参满行的元素,记住设置为inline-block*/
width: 0px;
background: pink;
vertical-align: middle;
}
#wrap img{
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrap">
<img src="img/img2.jpg" width="150"/>
</div>
</body>
扫一扫
9890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
