CSSday03 盒子
盒子模型
W3C盒子模型
-
标准盒子模型,width和height设定的是内容区的宽高
-
内容区的宽高:
宽:width
高:height -
盒子的宽高:
宽:内容区的宽+左右padding+左右border
宽:width+paddingLeft+paddingRight+borderRight+borderLeft
高:内容区的高+上下padding+上下border
高:height+paddingTop+paddingBottom+borderBottom+borderTop -
所占屏幕宽高:
宽:width+paddingLeft+paddingRight+borderRight+borderLeft+marginLeft+marginRight
高:height+paddingTop+paddingBottom+borderTop+borderBottom +marginTop+marginBottom
-
IE盒子模型
-
box-sizing:border-box;
*设定的宽高是盒子的宽高-
内容区的宽高:
宽:width-左右border-左右padding
高:height-上下border-上下padding -
盒子的宽高:
宽:width
高:height -
所占屏幕的宽高
宽:width+左右margin
高:height+上下margin
-
padding标签
/* 一个值:上下左右 */
padding: 10px;
/* 两个值: 上下 左右 */
padding: 10px 20px;
/* 三个值: 上 左右 下 */
padding: 10px 20px 30px;
/* 四个值:上 右 下 左 */
padding: 10px 20px 30px 40px;
背景样式
背景颜色
-
background-color: pink;
-
/* 背景,效率低 /
/ background: red; */
背景图片
- background-image: url("…/images/泳池.jpeg");
背景图片的重复设置
-
background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat;
背景图片的大小
-
/* 图片显示全,占满容器,但是比例会失调 */
background-size: 100% 100%; -
/* 可能导致图片显示不全,但是图片比例不变 */
background-size: cover; -
/* 可能导致容器有一部分没有背景,但是图片比例不变 */
background-size: contain;
设定背景图片的起始覆盖点background-origin
-
默认,背景图片从内边距的外边缘开始绘制
background-origin: padding-box; -
背景图片从边框的外边缘开始绘制background-origin: border-box;
-
背景图片绘制在内容区background-origin: content-box;
设定背景的覆盖/裁切范围 background-clip
-
默认,背景位于边框以内background-clip: border-box;
-
背景位于内边距以内background-clip: padding-box;
-
背景位于内容区background-clip: content-box;
设置为背景图像的固定点background-attachment
-
设置背景图片的固定点
-
/* 背景图片与元素绑定 背景图片随着页面的滚动而滚动 */
background-attachment: scroll; -
- 背景图片与元素内容绑定 背景图片随着页面的滚动而滚动*/
background-attachment: local;
- 背景图片与元素内容绑定 背景图片随着页面的滚动而滚动*/
-
- 背景图片与视口区绑定 背景图片不随着页面的滚动而滚动*/
background-attachment: fixed;
- 背景图片与视口区绑定 背景图片不随着页面的滚动而滚动*/
-
-
设置在div上的背景图片的固定点
-
/* 背景图片不动 */
background-attachment: scroll; -
背景图片绑定在元素内容上,背景图片动
/* background-attachment: local; */ -
背景绑定在视口区
/* background-attachment: fixed; */
-
背景图片的位置
- /* 调整背景图片位置 /
background-position: top center;
background-position: center bottom;
/ 图片精灵技术 css script /
/ background-position:-116px -126px; /
/ background-position: -290px -126px; */
background-position: 50px 50px;
盒子边框
border-width 为元素指定边框的宽度
border-style 为元素指定边框样式
border-color 为元素指定边框颜色
border-radius 为元素指定圆角边框的半径
表格样式
border-collapse 指定表格的边框是合并还是分开 caption-side 指定caption坐落在表格的哪个位置上
浮动布局
left 向左浮动元素
right 向右浮动元素
清除浮动 clear:both;
浮动:
浮动元素脱离文档流,原先位置不保留,
飘在文档流上方。
float:left/right;
清除浮动:
兄弟元素上使用clear:both;
或者
父级元素上使用overflow:hidden;
清除子元素浮动对父元素产生的影响。
如果块级元素没有设置宽度,浮动了该元素,那么该元素的宽度
不再是100%,而是内容区的宽度。