CSS3-4

来源：互联网发布：oracle数据库实时复制编辑：程序博客网时间：2024/06/10 15:38

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

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

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin（外边距）-清除边框区域。没有背景颜色，它是完全透明
Border（边距）- 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距）- 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容）- 盒子的内容，显示文本和图像

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

eg:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Bxomodel(w3cschool.cn)</title><style>div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}</style></head><body><img src="/attachments/cover/cover_cssref.jpeg" width="250" height="250" /><div class="ex">The picture above is 250px wide.The total width of this element is also 250px.</div></body></html>

padding 内边距有上下左右四个方向：
padding-top ; padding-bottom ; padding-left ; padding-right;

准则：在使用css的时候，能够简写则简写
padding:10px 20px;
第一个值表示上下的padding
第二个值表示左右的padding
padding:10px 20px 30px; 上左右下
padding:10px 20px 30px 40px; 上右下左

border: 1px solid #ccc;

1px 边框的宽度solid 边框的线型#ccc 边框的颜色  英文单词 八进制表示 十六进制表示border-width:边框的宽度border-style:边框的线型border-color:边框的颜色margin  外边距margin:10px 20px 30px 40px;margin-top:margin-bottom:margin-left:margin-right:

在使用margin时需要注意的点：
1. 塌陷
margin塌陷存在于块级元素之间，如果元素变成了行内块元素或者行内元素则不会塌陷，如果元素脱离了标准文档流则也不会塌陷；
2. 通过margin让盒子居中。
让盒子左右居中

margin:0 auto；

使用margin:0 auto;让盒子居中需要注意的点:

盒子必须要有明确的width
盒子必须处于标准文档流中
margin:0 auto ;是让盒子居中，而不是让盒子里面的文字居中。如果让文字居中用text-align:center;
text-align:center / left /right

Tip:如果想要移动子元素的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border

Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。
img {
float: right;
}

浮动清除-使用clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

text_line {    clear: both;    }

阅读全文

0 0