文章目录
CSS 盒模型
1. 内容尺寸
-
一般情况下,为元素设置width/height,指定的是内容框的大小
-
内容溢出:内容超出元素的尺寸范围,称为溢出。默认情况下溢出部分仍然可见,可以使用overflow调整溢出部分的显示,取值如下:
取值 作用 visible 默认值,溢出部分可见 hidden 溢出部分隐藏 scroll 强制在水平和垂直方向添加滚动条 auto 自动在溢出方向添加可用滚动条
2. 边框
1. 边框实现
语法:
border:width style color;
边框样式为必填项,分为:
样式取值 | 含义 |
---|---|
solid | 实线边框 |
dotted | 点线边框 |
dashed | 虚线边框 |
double | 双线边框 |
2. 单边框设置
分别设置某一方向的边框,取值:width style color;
属性 | 作用 |
---|---|
border-top | 设置上边框 |
border-bottom | 设置下边框 |
border-left | 设置左边框 |
border-right | 设置右边框 |
3. 网页三角标制作
- 元素设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向边框可见色
4. 圆角边框
- 属性:border-radius 指定圆角半径
- 取值:像素值或百分比
- 取值规律:
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下,左右保持一致
3. 内边距
【1】属性:padding
【2】 作用:调整元素内容框与边框之间的距离
【3】 取值:
20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下,左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左
- 单方向内边距,只能取一个值:
padding-top
padding-right
padding-bottom
padding-left
4. 外边距
【1】 属性:margin
【2】 作用:调整元素与元素之间的距离
【3】 特殊:
1)margin:0; 取消默认外边距
2)margin:0 auto;左右自动外边距,实现元素在父元素范围内水平居中
3)margin:-10px;元素位置的微调
【4】 单方向外边距:只取一个值
margin-top
margin-right
margin-bottom
margin-left
-
外边距合并:
1)垂直方向
1. 子元素的margin-top作用于父元素上
解决:
为父元素添加顶部边框;
或为父元素设置padding-top:0.1px;
2. 元素之间同时设置垂直方向的外边距,最终取较大的值
2)水平方向
块元素对盒模型相关属性(width,height,padding,border,margin)完全支持;
行内元素对盒模型相关属性不完全支持,不支持width/height,不支持上下边距
行内元素水平方向上的外边距会叠加显示 -
带有默认边距的元素:
body,h1,h2,h3,h4,h5,h6,p,ul,ol{ margin:0; padding:0; list-style:none; }
布局方式
1. 标准流/静态流
默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示
2. 浮动布局
主要用于设置块元素的水平排列
【1】属性
float
【2】取值
可取left或right,设置元素向左浮动或向右浮动
float:left/right;
【3】特点
- 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
- 元素设置浮动,就具有块元素的特征,可以手动调整宽高
- “文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示
【4】常见问题
子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局
【5】解决
- 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
- 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
- 为父元素设置overflow:hidden;解决高度为0
3. 定位布局
结合偏移属性调整元素的显示位置
【1】属性
position
【2】取值
可取relative(相对定位)/absolute(绝对定位)/fixed(固定定位)
postion:relative/absolute/fixed/static
【3】偏移属性
设置定位的元素可以使用偏移属性调整距离参照物的位置
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
【4】分类
- relative 相对定位
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
- absolute 绝对定位
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高
使用绝对定位 :
“父相子绝” : 父元素设置相对定位,子元素绝对定位,参照已定位的父元素偏移.
- fixed 固定定位
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流
【5】堆叠次序
元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置,值越大元素越靠上:
-
属性 : z-index
-
取值 : 无单位的数值,数值越大,越靠上
-
堆叠:
- 定位元素与文档中正常元素发生堆叠,永远是已定位元素在上
- 同为已定位元素发生堆叠,按照 HTML 代码的书写顺序,后来者居上