css源码笔记(四)【爱创课堂专业前端培训】
复习:
1.1 布局模型——前端培训机构
与盒子模型一样是最基础、最核心的东西,但是布局模型是从盒子模型基础上进行布局的。
流动模型flow、浮动模型float、层模型:绝对定位、固定定位
流动模型flow
流动模型其实就是一个标准流模型,按照我们书写的html结构顺序,依次按照元素默认的类型在浏览器进行渲染;块状元素独占一行,非块状元素从左到右依次排列。
元素类型分类:
块状元素block
行内元素inline
行内块元素inline-block
浮动模型float
使用float属性设置元素脱标;
元素可以通过属性值left、right进行左侧或者右侧的贴边显示;
浮动出现的初衷是为了解决文字环绕的文字;
现在多用浮动解决块状元素在同一行进行排列的问题;
浮动可以使元素紧密排列;
浮动使元素具有块状元素的特性,可以设置宽高
浮动后元素让出原来的位置,后面的元素会顶上去,形成一个压盖效果
1.2 解决浮动问题
浮动使元素脱离文档流,那么为了正常文档结构的显示,我们可以使用属性clear来清除浮动,属性值有left 、right 、both(常用)
Ø 给父元素设置高度
Ø 给后面的正常文档流的元素设置clear:both
Ø 外墙法:在父元素和后面正常的文档流之间设置一个空元素div,给这个div设置clear:both
Ø 内墙法:父元素的内部最后添加一个空元素div,给这个div设置clear:both
Ø 给父元素设置overflow:hidden || scroll || auto;
Ø overflow本身的意思是为了处给出文本溢出的处理方式,hidden溢出隐藏,scoll滚动条
Ø auto自适应;这里可以解决父元素塌陷问题,它可以强制去匹配子元素的大小,并根据匹配到子元素的宽高进行包裹。另外一方面,它还可以解决嵌套元素外边距合并问题。
Ø 利用伪元素:after
.clear:after{
display: block;/明确类型/
height: 0;
content: ‘’;/设置空内容/
clear: both;/清除浮动/
visibility: hidden;/消失占位/
}
zoom: 1;/兼容IE低版本/
}
1.3补充内容:
² 如何设置元素不可见
display:none 元素消失不占位
visibility:hidden; 元素消失占位
² 伪元素::after、伪类:hover、类class、元素element
元素:存在于html中的标签,是可见的结构
伪元素:通过css添加
类:标签元素的属性,存在于结构中
伪类:存在css中,需要用户或者浏览器一些操作才能实现的效果
² 浮动元素不存在上下外边距合并问题
一、 浮动应用:色块布局——前端培训机构
拿到效果图,先分析结构构成,从外层到内层进行分析;分析完成后,利用div + css进行布局,如果div块是水平排列,需要借助浮动改变默认的排列方式。最后往大块中填充小块,并在小块中填充内容,即完成效果。
二、 背景相关属性—前端培训机构
2.1 background-color 设置背景颜色
2.2 background-image 设置背景图片
属性值:url 统一资源定位符 加载图片的位置
2.3 background-size CSS3中属性,设置图片的大小
属性值:可以用像素值表示,也可以用百分比表示,还可以使用关键字cover contain
2.4 background-repeat 设置背景图片的平铺方式
属性值: repeat 默认。水平和垂直平铺(按照原图)
repeat-x 设置水平平铺
repeat-y 设置垂直平铺
no-repeat 设置图片不平铺
round 水平和垂直平铺(通过压缩的方式全部显示完整的图片)
space 完整显示平铺图片,剩余不能完整显示的部分不再平铺,将剩余空间平均分配到图片之间的距离
2.5 background-position 设置背景图片的位置
属性值: 英文单词表示、像素值、百分比
2.6 background-attachment 设置背景图片是否滚动
属性值 scroll 默认随页面滚动
fixed 不随页面滚动
.box{
height: 400px;
width: 400px;
margin: 100px auto;
padding: 100px;
border: solid 20px green;
/设置背景颜色为红色/
background-color: red;
/设置背景图片/
background-image: url(./images/meng.jpg);
/设置图片的大小/
background-size: 110px;
/设置背景图片的平铺方式/
background-repeat:no-repeat;
/设置 不平铺背景图片的位置/
/background-position: right bottom; 右下角/
/background-position: bottom; 下边居中,center一般省略/
/background-position: center;/
/background-position: 100% 0; 右上角/
/background-position: 50% 100%; 底部居中/
/background-position: 0px 490px; 左下角/
/background-position: 245px 245px; 居中/
background-position: -55px -55px;
}
背景是否随页面滚动 默认scroll 随页面滚动 属性fixed不随页面滚动
body{
background-image: url(./images/bg3.jpg);
background-repeat: no-repeat;
background-size: 500px;
background-attachment: fixed;
}
p{
height: 200px;
margin-top: 100px;
border: solid 1px;
background: orange;
1 }
Background-attachment应用:
Html代码:
呵呵呵
呵呵呵
呵呵呵
呵呵呵
呵呵呵
呵呵呵
呵呵呵
CSS代码:
p{
height: 200px;
margin-top: 50px;
border: solid 1px;
background: orange;
}
.box{
height: 200px;
border: solid 1px;
background-image: url(./images/bg3.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom;
background-attachment: fixed;
}
三、雪碧图应用—前端培训机构
雪碧图又叫做CSS精灵,CSS Sprite。
在平时所在的页面上,可能会有很多特别碎小的图片,每一张图片的加载都需要请求服务器一次,增加服务器压力,且有可能会影响页面的加载速度。所以,习惯上会把这些碎小的图片集中到一张图片上进行加载,那么这样,只要图片加载一次,再次使用的时候去缓存中查找就可以了。就可以将多次请求变成一次。
span{
display: inline-block;
height: 136px;
width: 127px;
background-image: url(./images/zimu.jpg);
background-repeat: no-repeat;
background-position: -16px -16px;
/border: solid 1px;/
}
i{
display: inline-block;
height: 137px;
width: 87px;
margin-left: 20px;
background: url(./images/zimu.jpg) -246px -184px no-repeat;
/border: solid 1px;/
}
雪碧图应用:
设置相邻的两个行内级元素垂直对齐方式 英文单词 像素值;如果居中,那么一般给高度比较大的那个元素;
相邻的两个行内级元素默认是底部对齐
需求效果如下:
- 服装饰品
- 鞋包饰品
- 运动用品
- 首饰饰品
- 数码产品
- 家电用品
- 装修用品
- 婴儿用品
*{
margin: 0;
padding: 0;
}
li{list-style: none;}
a{
text-decoration: none;
color: black;
}
ul{
width: 140px;
margin: 100px;
padding:10px 20px;
line-height: 2;
text-align: center;
border: solid 1px #E3E3E3;
}
li{
font-size: 18px;
border-bottom: solid 1px #E3E3E3;
}
li:nth-of-type(8){
border: none;
}
i{
display: inline-block;
width: 24px;
height: 18px;
margin-right: 6px;
/设置相邻的两个行内级元素垂直对齐方式 英文单词 像素值;如果居中,那么一般给高度比较大的那个元素/
vertical-align: middle;
/相邻的两个行内级元素默认是底部对齐/
/添加背景图片/
background: url(./images/sidebar.png) 0px -2px no-repeat;
/border: solid 1px;/
}
/结构性伪类选择器 nth-of-type || nth-child/
li:nth-of-type(2)>i{
background-position: 0px -25px;
}
li:nth-of-type(3)>i{
background-position: 0px -50px;
}
li:nth-of-type(4)>i{
background-position: 0px -75px;
}
li:nth-of-type(5)>i{
background-position: 0px -100px;
}
li:nth-of-type(6)>i{
background-position: -41px -2px;
}
li:nth-of-type(7)>i{
background-position: -41px -98px;
}
li:nth-of-type(8)>i{
background-position: -41px -170px;
}
css源码笔记(四)【爱创课堂专业前端培训】相关推荐
- html5源码笔记【爱创课堂专业前端培训】
一. 背景相关属性 Background-color Background-image Background-repeat Background-position Backgroound-attach ...
- web前端源码笔记_canvas【爱创课堂专业前端培训】
爱创课堂前端源码笔记--canvas 一.canvas canvas是HTML5新增的标签用于提供"画布" 可以通过canvas元素获取对应的"上下文"(可以理 ...
- 零基础能不能学习web前端开发?【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
- Web前端全栈开发_node源码笔记【爱创课堂】
一.NodeJS简单复习 NodeJS是模块化开发的,有许多内置模块.HTTP模块用于搭建服务器.FS模块用于操作文件和文件夹.URL模块用于URL字符串和URL对象的转换.QueryStrings模 ...
- 小白前端学习流程【爱创课堂专业前端培训】
对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,给大家一个参考. 在开始学习之前你需要做到以下5点: 第一:需要达到什 ...
- html5源码笔记(四)【爱创课堂专业前端培训】
一.响应式的实现-媒介查询 @media 实现方式一:把media限定到link中 实现方式二:把media写到css代码中 留活口,ie兼容 @charset "utf-8"; ...
- JavaScript源码笔记(第七天)—爱创课堂专业前端培训
一.DOM介绍 DOM:Document Object Model 文档对象模型,用来表示和操作html或xml文档内容的基础API: 当网页被加载时,浏览器会创建对应的文档对象模型,而DOM模型被构 ...
- html5源码笔记(三)【爱创课堂专业前端培训】
一.常见的布局 1.1 固定布局(基本的布局方式) 1.2 百分比布局(流式布局) width.heigth.padding.margin使用百分比进行布局 width.padding.margin相 ...
- JavaScript(第四天)—爱创课堂专业前端培训
一. 函数的声明和调用 1.1 函数的介绍 函数是具有重复的代码块,由事件驱动或者调用才会执行.封装函数的目的是为了减少重复代码的书写,提高程序的可复用性. 1.2 函数的声明 使用关键字functi ...
最新文章
- Linux mysql 5.6: ERROR 1045 (28000): Access denied for user 'root'@'localhost' (usin
- 手机扫一扫就能“隔空移物”?AR炫酷新玩法,快来解锁新技能吧!
- 数据库设计指南(四)保证数据的完整性
- 如何监控一个Activity加载完毕(完成渲染)
- OpenCV-浮雕雕刻效果
- [转载] python中if嵌套语句_Python的if语句怎么嵌套
- .NetCore对接各大财务软件凭证API——金蝶系列(2)
- 数据模型所描述的内容包括三个部分:数据结构、数据操作、数据约束。
- 从一个骗人的技术说起光线追踪——光影技术的里程碑
- .htaccess详解及.htaccess参数说明
- origin 8.0 win 7 破解版安装及使用教程
- jstl和el表达式
- 网络调试助手简单使用教程
- 服务器文件异地备份,云服务器需要异地备份吗
- “做真实的自己”是个坑
- 2021.11.17 关于一元二次方程组求根
- Qt设置按钮背景图片
- Swift MD5加密
- 牛客IOI周赛27-普及组
- Java项目:基于jsp+mysql+Spring+SpringMVC+mybatis的农产品网上销售系统