一.盒子模型
1.组成
(1)作用:布局网页,摆放盒子和内容.
(2)组成部分:
- 内容区域-width&height
- 内边距-padding(出现在内容与盒子边缘之间,会撑大盒子)
- 边框线-border
- 外边距-margin(出现在盒子外面)
border
属性名:border(bd)
属性值:边框线粗细 线条样式 颜色(空格隔开,不区分顺序)
| 属性值 | 线条样式 |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
<style>
div {
width: 20px;
height: 20px;
background-color: pink;
border: 1px solid #000;
margin: 50px;
padding: 20px;
}
</style>边框线
属性名:border-方位名词(bd+方位名词首字母,例:bdl)
属性值:边框线粗细 线条样式 颜色(空格隔开,不分先后顺序)
内边距
属性名:padding/padding-方位名词(p/p+方位名词首字母)
属性值:同上
多值写法:
| 取值个数 | 含义 |
| 一个值 | 四个方向相同 |
| 四个值 | 上右下左 |
| 三个值 | 上;左右;下 |
| 两个值 | 上下;左右 |
怪异盒模型
width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）
盒子尺寸:内容尺寸+border尺寸+内边距尺寸(盒子变大的原因)
解决:(1)手动做减法(2)内减模式:box-sizing:border-box;(在后面加上即可)
外边距
两盒之间的距离.
属性名:margin
属性值:与padding属性值写法含义相同.
合并现象
场景:垂直排列的兄弟元素,上下margin会合并
现象:取两个margin中较大值生效
<style>
.one {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.two {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;
}
</style>塌陷问题
场景:父子级的标签,子级加上外边距会产生塌陷问题
现象:导致父级一起向下移动
<style>
.son{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
</style>解决方法:
- 取消子级margin,父级设置padding(规避问题) 加box-sizing:border-box;(防止撑大盒子,因为子级是内容)
- 父级设置overflow:hidden(修改问题)
- 父级设置border-top (修改问题)
行内元素-内外边距问题
场景:行内元素添加margin和padding,无法改变元素垂直位置
解决方法:给行内元素添加line-height可以改变垂直位置(因为行内元素:不换行没有空格,垂直位置受行高的限制)
2.版心居中
margin:0 auto(左右相等,浏览器自动计算取值);
3.清除默认样式
例:清除默认的内外边距.
通配符选择器设置margin,padding为0
并集选择器设置
4.元素溢出
控制溢出元素的内容的显示方式.
属性名:overflow
| 属性值 | 效果 |
| hidden | 溢出隐藏 |
| scroll | 溢出滚动(无论是否溢出,都显示滚动条位置) |
| auto | 溢出滚动(溢出才显示滚动条位置) |
| visible | 默认值 |
div {
width: 20px;
height: 20px;
background-color: pink;
/* overflow: hidden; */
/* overflow: visible; 上下都有滚动条*/
/* overflow: auto;有垂直滚动条,没有水平滚动条 */
}其他可以处理溢出的CSS属性:
word-wrap:用于控制文本的折行
text-overfiow:用于定义当文本溢出其容器时如何显示
| 属性值 | 效果 |
| clip | 默认值:当文本溢出容器时,溢出的部分会被剪掉,不显示任何内容 |
| ellipsis | 当文本溢出容器时,在溢出的地方会显示一个省略号(...)标记 |
| string | 允许指定一个自定义的字符串来代表被剪切的文本(并不是所有浏览器都支持) |
注:在使用text-overflow属性时，通常需要配合其他CSS属性以确保文本能够正确显示。例如，white-space: nowrap;确保文本不会换行，而overflow: hidden;则确保溢出的内容被隐藏。同时，你也需要给容器定义一个明确的宽度，否则text-overflow属性将不会生效，因为文本只会撑开容器而不会溢出。
需要注意的是，text-overflow属性主要用于单行文本的溢出处理。对于多行文本的溢出处理，通常需要借助其他CSS技巧或JavaScript来实现。
5.圆角
作用:设置元素外边框为圆角
属性名:border-radius
属性值:数字+px/百分比(圆角半径)
注:属性值写多个:从左上顺时针赋值,没有取值的角与对角赋值相同
(1)正圆
正方形盒子设置圆角属性值为宽高的一半/50%
(2)胶囊形状
给长方形盒子设置圆角属性值为盒子高度的一半
6.阴影
作用:给元素设置阴影效果
属性名:box-shadow
属性值:X轴偏移量 Y轴偏移量 模糊半径 扩散半径(阴影大小) 颜色 内外阴影
注:X轴偏移量和Y轴偏移量必须书写
默认是外阴影,内阴影需要在最后添加inset
二.布局
1.标准流
标准流也叫文档流,是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个.
2.浮动
作用:让块元素水平排列(实现图文混排的效果)
属性名:float
属性值:
- left:左对齐
- right:右对齐
浮动后的盒子特点:
(1)顶对齐(2)具备行内块特点(3)脱标(4)父级宽度不够,浮动的子级会换行
浮动盒子的脱标现象(脱离标准流的控制)
清除浮动
场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局混乱)
解决方法:清除浮动(的影响)
方法一:额外标签法
在父元素内容的最后加一个块级元素,设置CSS属性clear:both(left,right)
习惯class名为.clearfix
方法二:单伪元素法
<style>
.clearfix::after {
content:"";
/* 伪元素要有content才能生效 */
display: block;
/* 块级元素 */
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<!-- 给父级元素最后加标签:after -->
<div>
wenben
</div>
<div>
wenben
</div>
</div>方法三:双伪元素法(推荐)
.clearfix::after,
.clearfix::before {
content:"";
display: table;
}
.clearfix::after {
clear: both;
}before:解决外边距塌陷问题
方法四:overflow
父元素添加CSS属性:overflow:hidden(因为父级元素无法被撑开,overflow检查父级范围)
3.Flex布局(弹性布局)
是浏览器提倡的布局模式,适合结构化布局,提供了强大的空间分布和对齐能力.
Flex模型不会产生浮动布局中的脱标现象,布局网页更简单,灵活.
格式:display:flex;(父级样式中添加)
(1)组成
设置方式:给父元素设置display:flex;(df) 子元素可以自动挤压或拉伸.
组成部分:
- 弹性容器
- 弹性盒子
- 主轴:默认在水平方向
- 侧轴/交叉轴:默认在垂直方向
(2)主轴对齐方式
属性名:justify-content
| 属性值 | 效果 |
| flex-start | 默认值,弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-between | 沿主轴均匀排列,空白间距分在盒子之间 |
| space-around | 沿主轴均匀排列,空白间距分在盒子两侧 |
| space-evenly | 沿主轴均匀排列,盒子与容器之间间距相等 |
(3)侧轴对其方式(与主轴垂直)
align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置,有display:fix)
align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
(4)改变主轴方向
主轴默认在水平方向,侧轴默认在垂直方向.
属性名:flex-direction
改变主轴方向为垂直方向,则侧轴自动变为水平方向.
(5)弹性伸缩比
作用:控制弹性盒子的主轴方向的尺寸.
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数.
注:默认情况下,侧轴无高度则拉伸与父级同高,主轴方向无宽度由内容撑开.
(6)弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示.
属性名:flex-wrap
属性值:
- wrap:换行
- nowrap:不换行(默认)
(7)行对齐
属性名:align-content
注:对单行弹性盒子不生效,可以用换行使效果生效.
三.网页制作思路
1.布局思路
先整体再局部,从外到内,从上到下,从左到右.
2.CSS实现思路
(1)画盒子,调整盒子范围:宽高背景色
(2)调整盒子位置:flex布局,内外边框
(3)控制图片,文字内容样式
四.定位
1.作用:
灵活的改变盒子在网页中的位置.
2.实现:
(1)定位模式:position
1.相对定位
position:relative;+边偏移属性
注:边偏移属性是以原来位置为参照(top等代表原来位置在上),来确定改变后的位置
不脱标,原来的位置还属于该标签.
标签显示模式特点不变.
2.绝对定位
position:absolute;(poa)
使用场景:子级设置绝对定位,父级设置相对定位.
特点:脱标,不占位.
参照物:先找最近的已经定位的祖先元素,如果所有祖先元素都没有定位,参照浏览器可视区改位置.
显示模式特点改变:宽高生效(具备了行内块的特点)
(2)边偏移:设置盒子的位置
- left
- right
- top
- bottom
3.定位居中
实现步骤:1.绝对定位(父级居中:子绝父相;浏览器居中:绝对定位)
2.水平,垂直边偏移为50%
3.子级向左,上移动自身尺寸的一半
left:50%;(盒子最左边缘居中)
- 左上外边距为 -(负号)尺寸的一半
- transform:translate(-50%,-50%);
4.固定定位
position:fixed;
场景:元素位置在网页滚动时不会改变.
特点:(1)脱标不占位
(2)改变位置的参照物是浏览器的窗口.
(3)显示模式特点:具备行内块的特点(宽高有内容撑开,可以加宽高)
5.堆叠层级
属性名:z-index
默认效果:按照标签书写顺序,后来者居上.
作用:设置定位元素的层级顺序,改变定位元素的显示顺序.
取值:整数.默认是0,取值越大显示顺序越靠上.
CSS精灵
实现步骤:
1.创建盒子,盒子尺寸和小图尺寸相同
2.设置盒子背景图为精灵图(大图)
3.添加background-position属性,改变背景图位置
使用PxCook测量小图片左上角坐标
取负数坐标为background-position属性值(向左上移动图片位置)
background-position:right 0;(right表示取到精灵图右边的图片)
五.字体图标
展示的是图标,本质是字体.
作用:在网页中添加简单的,颜色单一的小图标.
1.引入字体样式表(iconfont.css)
<link rel="stylesheet" herf="./iconfont/iconfont.css>
</head>
<body>
<span class="iconfont icon-xxx"></span>
</body>2.标签使用字体图标类名
(1)iconfont:字体图标基本样式(字体名,字体大小等)
(2)icon-xxx:图标对应的类名
用(.iconfont)类选择器进行修改,标签选择器会被覆盖,如果要调整字体大小,注意选择器的优先级要大于iconfont类选择器.
3.上传矢量图
作用:项目特有的图标上传到iconfont图标库,生成字体.(图标后缀名为.svg)
扫一扫
2075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
