目录
盒模型
在CSS中，盒子模型这个术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括边距、边框、填充和实际内容。
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色这三个边框的属性。
/*边框粗细1px、样式为实心、颜色蓝色*/
div{
/*border的缩写形式*/
border:1px solid blue;
}
div{
/*border的完整形式*/
border-width:1px;
border-style:solid;
border-color:blue;
}border-style是边框样式：虚线(dashed)、点线（dotted）、实线(solid)
border-color是边框颜色，可设置为十六进制颜色：border-color:#FFF；
border-width是边框宽度，边框宽度可以设置为：thin、medium、thick，最常用的还是像素px。
CSS样式中允许只为一个方向的边框设置样式，同样也可以为其他三个方向的边框设置样式，根据实际需求自己设计
/*为下边框设置样式*/
div{border-bottom:1px solid red;}
/*为左上右三个方向边框设置样式*/
div{
border-top:1px solid red;
border-left:1px solid black;
border-right:1px solid blue;
}CSS内定义的宽(width)和高(height)，指的是填充以内的的内容范围。
因此一个元素实际宽度(盒子的宽度)=左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界
Width = MarginLeft + Border + PaddingLeft + ContentWidth + PaddingRight + Border + MarginRight；
那么元素的高度与宽度同理。
元素内容于边框之间是可以设置距离，称之为"填充(padding)"。填充可以分为上、右、下、左。
div{
padding-top:10ox;
padding_right:20px;
padding_bottom:30px;
padding_left:40px;
}
/*如果上右下左的填充都为20px*/
div{ padding:20px; }
/* 如果上下填充一样为20px,左右填充都为10px */
div{ padding:20px 10px; }元素与其他元素之间的距离可以使用边界(margin)来设置。边界也可分为上右下左
/* 写一起 */
div{ margin:10px 20px 30px 40px; }
/* 分开写 */
div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
/* 当上右下左的填充都为20px */
div{
margin:20px;
}
/* 上下填充为20px,左右填充为30px */
div{
margin:20px 30px;
}padding和margin的区别，padding在边框里，margin在边框外。
布局模型
布局模型是建立在盒模型的基础之上，又不同于我们常说的CSS布局样式或CSS布局模板。CSS布局模板是外在的表现形式而已。CSS包含三种基本的布局模型，分别是Flow（流动模型）、Layer（层模型）和Float（浮动模型）。
流动模型（Flow）是默认的网页布局模型。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型具有两个比较典型的特征：第一点是块级元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块级元素的宽度都为100%。实际上块级元素都会以行的形式占据位置；第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型（Float），任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
/* div元素向左浮动 */
div{
width:100px;
height:100px;
float:left;
}
/* div元素向右浮动 */
div{
width:100px;
height:100px;
float:right;
}
/* div元素一左一右浮动 */
div{
width:100px;
height:100px;
}
#div1{float:left;}
#div2{float:right}CSS定义了一组定位（position）属性来支持层模型（Layer）。
层模型有三种形式，分别是绝对定位（position:absolute）、相对定位（position:relative）、固定定位（position:fixed）。
如果想为元素设置层模型中的绝对定位，需要设置position:absolute，这条语句的作用是将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{
width:100px;
height:100px;
position:absolute;
left:50px;
top:50px;
}如果想为元素设置层模型中的相对定位，需要设置相对定位（position:relative），它通过left、top、right、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按float方式生成一个元素，并且元素像层一样浮动了起来，然后相对于以前的位置移动，移动的方向和幅度由left、top、right、bottom属性确定，偏移前的位置保留不动。
#div{
width:100px;
height:100px;
border:1px solid blue;
position:relative;
left:50px;
top:10px;
}position:fixed表示固定定位，与absolute定位类型相似，但它的相对移动的坐标是视图本身（屏幕内的网页窗口）。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此，固定定位的元素会始终位于浏览器窗口的内视图的某个位置，不会受文档流动影响。
Relative与Absolute组合使用
相对于其他元素进行定位，需要遵守以下规范：
1.参照定位的元素必须是相对定位的前辈元素(外层的元素)；
2.参照定位的元素必须加入position:relative；
3.定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位。
<div id = "box1"> /*参照定位元素*/
<div id="box2">相对参照元素进行定位</div>
</div>
#box{
width:100px;
height:100px;
position:relative;
}
#box2{
top:10px;
left:10px;
position:absolute;
}
/*这样box2就可以相对于父元素box1定位*/
盒模型简写
盒模型的代码是可以简写的，例如top、right、bottom、left的值相同：
margin:10px 10px 10px 10px；可以缩写为：margin:10px；
如果top和bottom值相同，left和right的值相同：
margin:10px 50px 10px 50px；可以缩写为：margin：10px 50px；
如果left和right的值相同：
margin：10px 20px 30px 20px；可缩写为：margin：10px 20px 30px；
padding的缩写方法和margin的缩写方法是一样的。
颜色简写
颜色CSS样式也是可以缩写的，当我们去设置的颜色是十六进制的色彩值的时候，如果每两位的值相同，可以缩写一半。
p{color:#00000000;}
/* 缩写 */
p{color:#0000}
p{color:#11223344;}
/* 缩写 */
p{color:#1234}
字体样式简写
CSS样式代码也可以把字体部分的代码进行简写，字体简写需要注意的是使用这一简写方法至少要指定font-size和font-family属性，其他的属性如未指定将自动使用默认值；在简写的时候font-size与line-height中间要加斜杠。
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:10px;
line-height:1.2em;
font-family:"宋体",sans-serif;
}
/* 缩写后 */
body{
font:italic small-caps bold 12px/1.2em "宋体",sans-serif;
}
颜色值设置
设置颜色的方法有英文命令颜色，RGB颜色设置(三基色，每一项的值可以是0-255之间的整数，也可以是0%-100%的百分比)，十六进制颜色。
p{color:red;}
p{color:rgb(136,136,136);}
p{color:#FFFFFF;}
长度单位
Web前端开发中长度单位用的比较多的是px、em、%百分比，这三种单位都是相对单位。
像素(px)是相对单位是因为像素指的是显示器上的小点。实际情况的时候浏览器会使用显示器的实际像素值有关，px也是我们使用最广泛的长度单位。CSS规范中假设 90像素=1英寸。
em是本元素给定字体的font-size值，如果元素的font-size为20px，那么1em=20px;如果font-size为30px，那么1em为30px。
百分比设置行高
p{font-size:12px;line-height:150%;}
/* 行高为字体的150% */
扫一扫
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
