技术文章 | Technical articles

css源码笔记(四)——前端培训机构

复习:

1.1 布局模型——前端培训机构

与盒子模型一样是最基础、最核心的东西,但是布局模型是从盒子模型基础上进行布局的。

流动模型flow、浮动模型float、层模型:绝对定位、固定定位

 

流动模型flow

流动模型其实就是一个标准流模型,按照我们书写的html结构顺序,依次按照元素默认的类型在浏览器进行渲染;块状元素独占一行,非块状元素从左到右依次排列。

元素类型分类:

块状元素block

行内元素inline

行内块元素inline-block

 

浮动模型float

使用float属性设置元素脱标;

元素可以通过属性值leftright进行左侧或者右侧的贴边显示;

浮动出现的初衷是为了解决文字环绕的文字;

现在多用浮动解决块状元素在同一行进行排列的问题;

浮动可以使元素紧密排列;

浮动使元素具有块状元素的特性,可以设置宽高

浮动后元素让出原来的位置,后面的元素会顶上去,形成一个压盖效果

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;

  }

Background-attachment应用:

Html代码:

<p>呵呵呵</p>

<p>呵呵呵</p>

<div class="box"></div>

<p>呵呵呵</p>

<p>呵呵呵</p>

<p>呵呵呵</p>

<p>呵呵呵</p>

<p>呵呵呵</p>


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;*/

}

雪碧图应用:

设置相邻的两个行内级元素垂直对齐方式 英文单词  像素值;如果居中,那么一般给高度比较大的那个元素;

相邻的两个行内级元素默认是底部对齐

需求效果如下:

图片1.png 

<ul>

<li><i></i><a href="">服装饰品</a></li>

<li><i></i><a href="">鞋包饰品</a></li>

<li><i></i><a href="">运动用品</a></li>

<li><i></i><a href="">首饰饰品</a></li>

<li><i></i><a href="">数码产品</a></li>

<li><i></i><a href="">家电用品</a></li>

<li><i></i><a href="">装修用品</a></li>

<li><i></i><a href="">婴儿用品</a></li>

</ul>


 

*{

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;

}

web前端视频教程,请添加微信“haomei0452”免费领取


微信个人号二维码.jpg

关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg

上一篇文章: 前端培训机构—css源码笔记(三)
下一篇文章: css源码笔记(五)——前端培训机构

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>