从零吃透CSS（二）：CSS页面布局全套实战

一、前言想要实现卡片布局、导航栏、弹窗效果布局知识是重中之重。本篇学习盒子模型、边距居中、浮动塌陷、定位、层级透明度这些开发高频知识点也是面试常考的核心内容。二、盒子模型、边框圆角、背景渐变与阴影1、盒子模型所有HTML元素都是一个盒子由四部分组成·内容区 content·内边距 padding·边框 border·外边距 margin掌握盒子模型就掌握了页面留白和尺寸控制的根本。2、边框与圆角-通过border设置边框粗细、颜色、样式-通过border-radius实现圆角卡片顺时针方向、圆形头像效果3、背景样式backgroundbackground用来给盒子设置背景颜色、背景图片、图片平铺、位置、大小。① background-color背景纯色.box{ background-color: skyblue; }② background-image设置背景图片.box{ background-image: url(图片地址); }③ background-repeat图片平铺方式-repeat默认铺满整个盒子-no-repeat图片只显示一次最常用-repeat-x水平平铺-repeat-y垂直平铺④ background-position背景图位置可以写方位词center、left top也可以写像素20px 10pxbackground-position: center; /*图片居中*/⑤ background-size控制背景图片大小-cover图片铺满盒子超出部分裁剪做banner大图常用-contain完整显示整张图片不会裁剪4、CSS渐变不用图片直接生成渐变背景渐变属于背景图片的一种分为线性渐变、径向渐变① 线性渐变 linear-gradient从一个方向平滑过渡颜色语法linear-gradient方向颜色1颜色2……/*从上到下红色过渡到蓝色*/ .box{ background: linear-gradient(red, blue); } /*从左到右*/ background: linear-gradient(to right, pink, orange); /*斜向渐变*/ background: linear-gradient(45deg, #fff, #ccc);② 径向渐变 radial-gradient从中心向外扩散的圆形渐变适合做按钮、光斑效果background: radial-gradient(red, yellow);5、盒子阴影 box-shadow作用给盒子卡片、按钮添加投影让页面更立体不会占用页面空间语法box-shadow: 水平偏倚 垂直偏移 模糊距离 阴影大小 颜色 内阴影参数依次说明-水平偏移正数向右负数向左-垂直偏移正数向下负数向上-模糊值越大阴影越柔和不能是负数-阴影大小可选扩大/缩小阴影-阴影颜色-insert可选加上就是内阴影不加默认外阴影三、内外边距、div居中、display与浮动1、内外边距padding和margin一个盒子由内容、内边距、边框、外边距组成① padding 内边距/*四个方向统一*/ div{ padding: 10px; } /*上 右 下 左 顺时针*/ padding: 10px 20px 30px 40px;特点写背景时padding区域会带上背景② margin 外边距margin: 20px;常见问题·垂直方向margin会合并塌陷两个盒子上下间距取最大值不是相加·margin0 auto; 专门用来实现块级盒子水平居中区分padding自己内部留白margin和别人拉开距离2、元素居中① 文字/行内元素水平居中text-align: center;作用在父标签上文字、图片、行内块居中② 块级盒子整体居中盒子居中div{ width:300px; margin:0 auto; }注意❗必须设置宽度才生效③ 垂直居中简单了解单行文字line-height盒子高度3、display属性HTML标签默认分为两种-块级元素div p h1独占一行可以设置宽高-行内元素span a并排显示宽高设置无效display用来切换类型① displayblock 转为块级独占一行可以设置宽高② displayinline 转为行内不能设置宽高③ displayinline-block 行内块并排显示可以设置宽高做按钮、导航很常用④ displaynone 隐藏元素位置直接消失4、浮动作用让块级元素横向并排排列原本div都是独占一行浮动之后可以实现多列布局、横向导航栏。float:left; /*向左靠齐排列*/ float:right; /*向右靠齐排列*/浮动特点① 元素脱离标准文档流原本的位置空出来后面的元素会往上挤② 浮动只会在父盒子内部横向排列不会跑到父盒子外面③ 经典问题高度塌陷如果父盒子不写高度子元素全部浮动后父盒子高度变为0布局乱掉需要清除浮动四、overflow溢出处理、清楚浮动塌陷1、overflow属性当盒子里面内容的宽高大于盒子本身宽高就会发生内容溢出overflow用来控制溢出内容怎么显示4个常用值① visible 默认值溢出内容直接显示在盒子外面② hidden溢出部分直接裁剪隐藏看不见③ scroll永远显示滚动条内容可滚动查看④ auto内容溢出才出现滚动条不溢出就没有滚动条2、浮动塌陷高度塌陷父盒子没有设置固定高度子元素全部设置了float浮动。浮动元素脱离标准文档流父盒子检测不到子元素高度父盒子高度变为0后面的布局全部乱掉这就是浮动塌陷。四种清除浮动塌陷的方案① 给父盒子设置固定高度简单粗暴但不适合高度适应的页面实际开发很少用.father{ height:100px; }② 父元素开启BFC给父盒子加上overflowhidden触发BFC父盒子可以识别浮动子元素高度.father{ border:2px red solid; overflow:hidden; }缺点盒子内部如果有需要溢出显示的内容会被裁剪掉③ 伪元素清除浮动推荐给父类加一个类名例如clearfix写公共css不会裁剪内容.clearfix::after{ content:; display:block; clear:both: /*清除左右两侧浮动影响*/ visibility:hidden; height:0; }④ 额外空div标签在父盒子最后新增一个空div设置clearbothdiv classfather div classson/div div classson/div div styleclear:both;/div /divclear属性简单说明-clearboth清除左右两边浮动带来的影响-clearleft清除左边浮动-clearright清除右边浮动五、相对/绝对/固定定位与z-index层级透明度1、相对定位positionrelative不脱离标准流相对于自己原本位置偏移常用于微调元素位置2、绝对定位positionabsolute脱离标准流相对于最近的定位父级常用于弹窗、角标、悬浮小图标3、固定定位positionfixed相对于浏览器窗口固定页面滚动位置不变常用于固定顶部导航、返回顶部按钮4、z-index层级与透明度多个定位元素重叠时通过z-index控制上下层级通过opacity设置元素透明效果实现遮罩层、淡入效果六、结语至此整套CSS基础内容全部学习完毕。我们从简单的文字美化一步步掌握了网页主流布局方案现在已经可以独立编写静态页面后续可以结合HTML表单完成完整的网页实战项目。