CSS教程 三个重点(盒模型、浮动、固定)

CSS教程 三个重点:
1、盒模型
box-model
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
注意:设置背景颜色的时候,边框是有颜色的
背景图常用的样式:
background-color:pink; 背景颜色
background-imager:url(url地址); 背景图片
overflow-x: hidden;
overflow-y: hidden;
background-repeat:no-repeat; 背景图片是否平铺
no-repeat:不平铺
repeat-x:x轴平铺
repeat-y:y轴平铺
repeat:平铺
background-size:auto 100%; 背景图片的大小
第一个参数是x轴
第二个参数是y轴
auto:
百分比/像素:
cover:覆盖下面的面积
background-position: 背景图片显示位置
left:左
center:中
right:右
top:上
bottom:下
行内元素和块元素的转化:
display:inline; 显示成行内元素
display:none; 不显示,完全释放空间
display:block; 显示成块元素
display:inline-block; 在一行中显示块元素,但是可以设置尺寸
注意事项:内联元素不能设置尺寸,尺寸是由内容决定的。
2、浮动:破坏默认的文档的布局 float
默认的文档的布局:
1、块元素垂直排列,从上向下
2、行内元素,从左向右排列
浮动元素遵守浮动布局规则:
1、需要定义尺寸
2、按照定义的顺序。left向左浮动;right向右浮动
3、浮动元素会释放原占有的空间。
清除浮动:
1、必须是块元素才能清楚浮动
2、必须是浮动的兄弟元素,在所有的浮动元素之后。
3、添加clear样式
3、定位:position
功能强大,破坏默认的文档流布局,可以让一个元素定位到页面的任意位置。
定位遵循的定义规则:
1、定义的位置
2、自定义定位的样式
1、绝对定位:absolute
参照物:从当前元素的父元素开始向上查找,第一个非static定位的元素为参照物,如果找不到,则以body为参照物。
2、相对定位:relative
参照物:以未偏移之前的位置,为参照物
3、固定定位:fixed
参照物:以视区(可视区域)为参照物。
小编是:刘广法,转载请注明出处,网站地址:https://liuguangfa.com/