您的位置：首页 > Web前端 > CSS

css中圣杯布局&双飞翼布局（以及css2零碎知识点）

2017-06-21 20:43 549 查看

css内容

定位

初始包含块：

一个元素和值的位置大小，最开始产生的区域；

在大多数浏览器中，初始包含块是一个视窗大小的矩形;

各个定位相对的参照物

相对定位：相对的是元素原本在文档流中的位置；

固定定位：固定定位的参照物是当前视窗（当前浏览器窗口）的位置；

绝对定位：（两种情况）

如果开启绝对定位的元素有开启定位（非默认值static）的最近父级元素，则参照物就是该父元素；

如果开启绝对定位的元素没有最近的定位父元素，则相对的就是初始包含块。

三列布局的情况：

定位实现

缺点：当出现滚动条时，内容区在滚动条后边显示，而且内容区仍旧被压缩(不推荐使用)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
/*最小宽度 = left *2 + right  */
min-width: 600px;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
height: 200px;
background: green;
}
#left{
position: absolute;
left: 0;
top:0;
/*透明度 0 - 1*/
/*opacity: 0.5;*/
}
#right{
position: absolute;
top:0;
right: 0;
}
#middle{
margin: 0 200px;
}
</style>
</head>
<body>

<div id="left">
left
</div>
<div id="middle">
middle
</div>
<div id="right">
right
</div>
</body>
</html>


浮动实现

缺点：如果有文字出现，布局就会错乱，导致扩展性不好。

浮动的本质，解决文字环绕图片。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动实现三列布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
/*最小宽度= left*2 + right*/
min-width: 600px;
}
#left,#right{
width: 200px;
height: 200px;
background-color:pink;
}
#middle{
height: 200px;
background-color: green;
}
#left{
float: left;
}
#right{
float: right;
}
</style>
</head>
<body>
<!--
如果添加的有文字，
1、middle未浮动，left和right浮动；
2、浮动的本质是文字环绕图片，所以添加的这个文字应该环绕着最近的那个浮动的元素围绕在周围排列；
3、将未浮动的middle挤了下去；。
-->
这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字
<div id="left">left</div>
<div id="right">3</div>
<div id="middle">2</div>
</body>
</html>


圣杯布局

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#header,#footer{
height: 50px;
width: 100%;
border: 1px solid;
background-color: grey;
}
body{
min-width: 600px;
}
#left,#right{
float: left;
width: 200px;
background-color: pink;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#middle{
float: left;
width: 100%;
background-color: green;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#contene{
overflow: hidden;
padding: 0 200px;
}
#left{
margin-left: -100%;
position: relative;
left: -200px;
}
#right{
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<!--
需求：
1.两边固定，中间自适应
2.先加载middle内容
3.等高布局（为实现）
步骤：
布局：有头 有尾 有内容        先加载middle内容
浮动让三者在一行，出现高度塌陷，清浮动
left上去：margin-left: -100%; right同理
middle内容未显示，container:margin: 0 200px;
此时用相对定位把left,right拉回来
最小宽度问题：min-width:600px
问题：内容过多，文字溢出未解决（等高布局解决）-->
<div id="header">header</div>
<div id="contene">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right
leftlef
<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left</div>
</div>
<div id="footer">footer</div>
</body>
</html>
```


双飞翼布局

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
min-width: 600px;
}
#header,#footer{
height: 50px;
width: 100%;
background-color: lightcoral;
}
#left,#right{
width: 200px;
float: left;
}
#middle{
background-color: lightskyblue;
width: 100%;
float: left;
}
#content{
overflow: hidden;
}
#content-add{

margin: 0 200px;
}
#left{
background-color: purple;
margin-left: -100%;
/*position: relative;*/
/*left: -200px;*/
}
#right{
background-color: blueviolet;
margin-left: -200px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">
<div id="middle">
<div id="content-add"> middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
```


等高布局

padding-bottom: 10000px;
margin-bottom: -10000px;


负外边距

<body>
<div id="box1">boxboxboxboxboxboxbox</div>
<div id="box2"></div>
</body>


box1不动，如果box2开启定位，就会飘到box1上面，并且遮住文字；

box2宽度小一点，然后box1与box2换位置，出现文字环绕浮动元素效果

box1不动，如果box2设置margin-top: -200px;（盒子宽高），那就会飘到box1上面，并且不会遮住文字。

overflow

overflow会作用在谁的上面：

1.html body中只有一个有overflow属性时,这个属性会传给document

2.html body都存在overflow属性时.body的overflow属性才能生效,

3.当html body都存在overflow属性时.body的overflow属性一直都会作用于body身上，html的overflow属性一直都会作用于document身上。

禁止滚动条的方法

html,body{
height: 100%;
overflow: hidden;
}


清除浮动的方法

1.方法一：给父级加高度（扩展性不好，兼容性极高）

2.方法二：给父级浮动，或者开启绝对定位，固定定位：

但是左右margin失效（本质开启BFC），而且ie6 7 下，没有BFC（开启haslayout）；

3.方法三：overflow: hidden；

正常浏览器底下开启BFC； 在ie7底下开启haslayout；在ie6底下不管用；

4.方法四：空标签清除浮动 clear: both;

多出dom结构，不利于后期维护

5.方法五：添加一个新的元素

br标签，不符合结构\样式\行为，分离的规法；

<br clear="all" />


伪元素

.clearfix:after{
content:'';
display: block;
clear: both;

ba3a
}
ie6底下不认伪元素
.clearfix{
*zoom:1;
}


文本

color——设置文本颜色

英文单词描述颜色；

十六进制颜色：#ff0000

rgb颜色：rgb(255,0,0)

透明色：rgba(255,0,0,0.5),最后一位数是0~1

常见颜色：

黑色——rgb（0，0，0）；

白色——rgb（255，255，255）

红色——rgb（255，0，0）

绿色——rgb（0，255，0）

蓝色——rgb（0，0，255）

黄色——rgb（255，255，0）

青色——rgb（0，255，255）

direction——设置文本方向

对应元素是块元素时，direction并不是改变书写顺序，而是仅仅让块元素靠右排列而已；

对应元素是行内元素时，也不是改变书写顺序；

对应元素是行内块元素（代表元素是《img》）时，改变的是文字排列的顺序；

text-align——向文本添加修饰；

取消a标签的默认下划线；

text-indent——缩进元素中文本的首行；

首行缩进两个字符：text-indent:2em;

text-transfrom——控制元素中的字母；

none默认值，标准文本；

capitalize文本中的每个单词首字母大写；

uppercase将文本中的小写字母全部转变成大写字母；

lowercase将文本中的大写字母全部转换成小写字母；

letter-spacing——设置字符间距；其实是字母之间的间距；也是文字之间的间距；

word-spacing——设置字间距；

white-space——设置元素中空白的处理方式；

文字换行：white-space:nowrap;

每行超出范围文字，省略号的处理方式：

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;


text-overflow设置当文本溢出包含元素时发生的事情；

clip修剪文本；

ellipsis显示省略符号来代表被修建的文本；

string使用给定的字符串来代表被修剪的文本。

行高

行高 = 字体大小 + 行间距；

默认行高：字体大小的1.2倍；

文字垂直居中方法
：line-height高度设置等于height；

垂直对齐

默认值：基线位于一行中父元素小写字母X的底部；

vertical-align:middle;文字与图片的垂直居中

字体

font-family字体簇，字体系列；

font-size：字体大小

单位：px、em、rem；

**==消除图片缝隙的问题==**
：

方法一：父元素  font-size: 0;
方法二：<img src="img/1.jpg"><!--
--><img src="img/1.jpg">
图片表情之间写注释符
方法三：img{float: left;}


font-style字体样式，斜体\倾斜

italic一个斜体的字体样式；

oblique一个倾斜的字体样式；

italic&oblique的区别
区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。

font-variant小型大写字母；

font-weight设置字体的粗细：

bold/bolder/lighter/100~900；

font简写：font：字体样式 小型大写字母 字体粗细 字体大小/行高 字体族(多个)

font:italic bold 22px/33px ‘微软雅黑’；

背景

background-color背景颜色；

background-image设置背景图片；

background-repeat设置图像是否平铺；

repeat-x 背景图像将在水平方向重复；

repeat-y 背景图像将在垂直方向重复

no-repeat 背景图像将仅显示一次。

background-position背景图片的位置：

top left \top center \top right \center left \center center \center right \bottom left \bottom center \bottom right

x% y%：第一个值是水平位置，第二个值是垂直位置；左上角是 0% 0%。右下角是 100% 100%；如果仅规定了一个值，另一个值将是 50%。

xpos ypos ：第一个值是水平位置，第二个值是垂直位置；左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位；如果仅规定了一个值，另一个值将是50%；可以混合使用 % 和 position 值。

**雪碧图**


优点：减少加载网页图片时对服务器的请求次数

1.提高页面的加载速度；

2.减少鼠标滑过的一些bug；

缺点：

1.雪碧图制作麻烦；

2.网页中雪碧图呈现的图象无法被打印；

3.用CSS编写比较麻烦；

background-attachment背景图像是否固定或者随着页面部分滚动；

scroll 默认值。背景图像会随着页面其余部分的滚动而移动；

fixed 当页面的其余部分滚动时，背景图像不会移动。

backgroun简写：

background: 颜色 背景图 是否平铺 是否随页面滚动 背景图位置

例：background: #00FF00 url(bgimage.gif) no-repeat fixed top;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航