CSS二

发表于 | 分类于

margin,padding,postition,float

CSS 盒子模型(Box Model)

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

1
2
3
4
5
6
7
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

border边框

1
2
3
4
div {
  border: 1px dotted/solid/double/dashed #bbb;
  border-radious: 3px;               //圆角
}

隐藏元素

1
2
3
4
5
6
div {
  //隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
  visibility:hidden;    
  //隐藏的元素不会占用任何空间
  display:none;
}

块和内联元素

1
2
3
4
5
6
7
li {
  display:inline;  //把列表项显示为内联元素
}
span {
  display:block;  //span元素作为块元素
}

CSS Positioning(定位)

static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响

fixed 定位

元素的位置相对于浏览器窗口是固定位置。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
即使窗口是滚动的它也不会移动：

1
2
3
4
5
6
p {
  	position:fixed;
  	top:30px;
  	right:5px;
  }
</style>

relative 定位

相对定位元素的定位是相对其正常位置。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变
Fixed定位的元素和其他元素重叠。

1
2
3
4
p {
  	position:relative;
  	left:-20px;
  }

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

1
2
3
4
5
p {
	position:absolute;
	left:100px;
	top:150px;
}

CSS Float(浮动)

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

1
2
3
4
5
6
7
div{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>

清除浮动 - 使用 clear

1
2
3
4
5
6
7
8
9
.clearfix::before,
.clearfix::after{
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}

CSS 水平对齐(Horizontal Align)

块元素可以把左，右页边距设置为”自动”对齐。
如果宽度是100％，对齐是没有效果的

1
2
3
4
.center{
	margin:  0 auto;
	width:70%;
}