009、CSS常用样式

一、显示模式 display

  • 标准流中的元素有自己默认的浏览器加载模式,但是加载模式不是一成不变的,后期可以通过 display 属性更改一个标签的显示模式。
  • 属性值:元素根据属性值不同,可以加载对应元素等级的显示模式的特点。
属性值描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)

脱离标准流

  • display 属性更改的显示模式并没有改变标准流本质性质,页面还是只能从上往下加载,存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
  • 标签元素脱离标准流的方法包括:浮动、绝对定位、固定定位

二、浮动属性

 1、浮动定义

浮动是一种非常重要的布局属性。

属性名:float,漂流、浮动的意思。

属性值: left 左浮动, right 右浮动 。

作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示。

2、浮动的性质

浮动的元素脱离标准流

  • 标准文档流特点:区分行块。
  1. 块级元素:可以设置宽高,必须独占一行。
  2. 行内元素:不能设置宽高,可以并排一行。
  • 浮动的元素脱离了标准流的限制,具备行块二象性,浮动的元素可以设置宽高,还可以并排一行,而且不会有空白折叠现象,如果元素不设置宽高,可以被元素内容自动撑开。

浮动的元素依次贴边

  • 浮动属性值:left、right
  • 浮动方向设置不同,进行布局时,加载位置方向不同。
  • 以 left 为例:
  1. 父元素宽度足够,所有子元素会按照HTML书写顺序,依次向左进行贴边,父元素左边←子元素1←子元素2← 子元素3←子元素4。
  2. 父元素宽度如果不够,例如不能放下一个子元素4,那么子元素4在贴边时,会跳过上一个子元素3,向更上一个子元素2进行贴边,如果子元素2后面位置不够,继续跳过子元素2向前面的子元素1进行贴边。
  3. 如果子元素4在跳过子元素3向更前面的子元素2贴边时,子元素2的高度不高于子元素3,子元素2没有延伸出一个高度的边让子元素4贴边,那么子元素4就会跳过子元素2向子元素1进行贴边。
  4. 如果贴边的这个子元素4宽度小于子元素2,子元素2的高度低于子元素1和子元素3, 形成一个凹陷,子元素4会受前面子元素3高度影响,不会出现钻空现象。
  5. 如果子元素1后面的距离也放不下子元素4,子元素4最终会贴到父元素左边,如果子元素4的宽度超过了父元素,只会出现溢出现象。
  6. 右浮动与左浮动贴边效果是一致的,只是贴边方向不同。按照 HTML 书写顺序依次向右向上一个元素贴边,第一个元素贴父元素的右边。
  • 注意:同一个盒子中,可以有左浮动和右浮动的子盒子并存,子盒子会根据浮动方向,向上一个同方向的子盒子进行贴边,如果空间不够,也会发生之前依次贴边的各种情况。

贴边性质应用

利用浮动的这个依次贴边性质,可以完成多种网页布局效果。例如:

①上述平均分布表格效果。

②导航栏效果。

③常见的电商或企业网站布局。

浮动的元素没有margin塌陷

margin 塌陷现象出现在标准流中的,浮动元素已经脱离标准流,不再具有 margin 塌陷现象。

浮动的元素让出标准流位置

  • 元素浮动之后,脱离了标准流,会将原来占有的标准流位置让给后面的一个同级元素。
  • 由于浏览器中有兼容性问题,不会使用这种属性制作压盖效果,真正的压盖效果使用后期学习的定位制作。
  • 如果没有特殊需求,不允许一个父元素中的子元素有的浮动有的不浮动,同级元素中有一个浮动其他的也要浮动。

字围现象

  • 与前面压盖效果结构类似,同级元素中前面的元素浮动,后面的元素不浮动,不浮动的元素内部还有一些文字,浮动的蓝盒子会压盖住粉盒子的一部分,但是文字内容不会被盖住,粉盒子中的文字会让开蓝盒子位置,围绕它进行加载。
  • 这种效果称为字围现象。
  • 可以利用字围现象制作一些特殊的图文混排布局效果。

3、浮动的问题 

  1. 标准流中的元素,不设置高度的情况下,都能被内部的标准流元素自动撑高。 如果内部的子元素进行了浮动,浮动的子元素是撑不高标准流父亲的。
  2. 父元素没有高度,会影响后面元素的标准流位置,如果浮动的子元素足够高时,有可能影响到后面浮动元素的贴边。
  3. 解决方法是清除浮动带来的影响。

4、清楚浮动的方法

清除浮动一:height

给标准流的父元素强制给一个合适的高度。

解决:父元素有了高度,前面的浮动不能影响后面元素的标准流位置和贴边。

问题:父元素高度不是自适应,一旦子元素高度变化,问题可能再次出现。

清除浮动二:clear属性

  • clear,清除。
  • 作用:清除标签元素自身受到的前面的浮动元素的影响。
  • 属性值: 
属性值描述
left清除前面浮动带来的影响
right清除前面浮动带来的影响
both清除前面所有浮动带来的影响
  • 给标准流父元素添加 clear 属性,父元素不受前面浮动影响,不会再占有浮动让出的位置。
  • clear: both;
  1. 解决:浮动元素影响后面元素标准流位置和贴边。 
  2. 问题:父元素不能高度自适应,两个父元素之间如果有 margin 效果不正确。

清除浮动三:隔墙法

外墙法:在两个大的父盒子之间,添加一个空的<div>标签,标签上带有 clear: both; 属性。

  1. 解决:浮动影响后面元素标准流位置和贴边,模拟父元素间的距离。
  2. 问题:父元素没有高度自适应。

内墙法:在父元素内部,所有的浮动子元素后面添加一个空的<div>元素,标签高度为 0,添加 clear 属性。

  1. 解决:父元素高度自适应,浮动影响后面的元素位置和贴边。
  2. 缺点:浮动是 css 样式属性带来的问题,内墙法使用 HTML 结构去辅助解决问题, 如果页面中浮动元素很多,需要添加多个没有语义的空标签,造成 HTML 结构的冗余。

清除浮动四:伪类

本质是使用伪类方法利用css代码书写一堵内墙。

伪类选择器:通过选中的标签添加伪类,去选中标签的某个状态或位置。

:after:这个伪类表示选中的是某个标签内部的最后的位置。

书写方法:前面必须加普通的选择器,后面连续书写伪类名称。 将伪类添加给一个选中父盒子的选择器后面,一般给需要清除浮动的父盒子设置一个clearfix的类名。

.clearfix:after{
    content: "1";
}

解决:父元素高度自适应,浮动影响后面的元素位置和贴边。

清除浮动五:溢出隐藏

小偏方:给内部有浮动子元素的元素添加溢出隐藏 overflow: hidden; 属性,可以解决浮动的所有问题。

overflow 属性

  • 元素高度设置后,overflow:hidden;效果是将超过高度的部分直接隐藏
  • 元素高度没有设置时,如果元素同时设置了overflow:hidden; 属性,元素会自适应内容的高度。
  • 高度自适应原因:一个元素没有设置高度,同时设置了溢出隐藏,浏览器在加载盒子尺寸时,遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度,不论子元素是标准流还是浮动,都会将最高的高度作为父盒子高度加载。
  • 浮动影响后面的元素:父元素有了高度后,可以管理住内部所有的浮动元素,不会延伸到后面标签中影响贴边。

总结

如果父元素高度是固定的,建议使用 height 属性解决。 如果父元素高度需要自适应,建议使用 overflow 属性解决浮动问题。

三、背景属性

1、背景颜色 background-color

属性名:background-color

作用:在盒子区域添加背景颜色的修饰。

加载区域:在 border 及以内加载背景颜色。

属性值:颜色名、颜色值。

2、背景图片 background-image

属性名:background-image

作用:给盒子添加图片的背景修饰。

加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载,加载从 border 以内开始加载。

属性值:url(图片路径)

url:uniform resource locator,统一资源定位符,小括号内部书写查找图片的路径。

background-image: url(images/meng.jpg);

背景图和背景颜色可以同时设置,背景图会压盖背景颜色,没有背景图的区域会显示背景颜色。

3、背景重复 background-repeat

属性名:background-repeat

作用:设置添加的背景图是否要在盒子中重复进行加载。

根据属性值不同,有四种重复加载方式。

属性值说明
repeat背景图像将向垂直和水平方向重复。这是默认
repeat-x只有水平位置会重复背景图像
repeat-y只有垂直位置会重复背景图像
no-repeatbackground-image 不会重复
inherit指定 background-repeat 属性设置应该从父元素继承

4、背景定位 background-position

  • 属性名:background-position
  • 作用:主要用于设置不重复的图片在背景区域的加载开始位置。
  • 属性值:分为种写法,单词表示法、像素表示法、百分比表示法。不论哪种写法, 属性值都有两个,值之间用空格分隔。
  • 第一个属性值:表示背景图片在水平方向的位置。
  • 第二个属性值:表示背景图片在垂直方向的位置。

单词表示法

  • 属性值都是使用代表方向的单词进行书写。
  • 水平方向可选单词:left、center、right
  • 垂直方向可选单词:top、center、bottom 单词表示图片与盒子背景区域进行对应方向的对齐。
background-position: right bottom;

像素表示法

  • 使用像素值作为背景定位的属性值。
  • 第一个属性值:像素是几,表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
  • 第二个属性值:像素是几,表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。
background-position: 100px 50px;
  • 像素值区分正负,正负代表位移方向不同:
  1. 正数:表示图片针对盒子的原点向右、向下移动。
  2. 负数:表示图片针对盒子的原点向左、向上移动。
background-position: -100px -50px;

可以利用属性值为负数,制作在小盒子中显示大的背景图的一部分。 制作方法:需要使用 FW 软件量取尺寸,读取数据。

百分比表示法

  • 百分比表示法使用百分比数字作为属性值。
  • 100%代表的数值:
  1. 水平方向,等价于盒子的border以内的背景区域宽度减去图片的宽度。
  2. 垂直方向,等价于盒子的border以内的背景区域高度减去图片的高度。
background-position: 100% 100%;

5、背景附着 background-attachment

属性名:background-attachment

作用:设置的是背景图片是否要随着页面或者盒子的滚动而滚动。

属性值:

属性值描述
scroll背景图片随着页面的滚动而滚动,这是默认的。
fixed背景图片不会随着页面的滚动而滚动。
local背景图片会随着元素内容的滚动而滚动。

6、综合写法

background 属性可以将五个单一属性的值进行合写。

属性值:可以有 1-5 个属性值,值之间用空格进行分隔,背景定位的两个属性值算作一个属性值,不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。

background: url(images/bg4.jpg) no-repeat center top fixed #fff;

注意:

注意1:如果属性值没有设置完全,其他没有设置的单一属性会按照默认值加载。

background: pink;

注意2:如果想去层叠综合属性中的一部分,其他的属性保持不变,最好使用单一属性写法进行层叠。

background: url(images/bg4.jpg) no-repeat center top fixed #fff;
background-attachment: scroll;

7、背景应用

场景一:替换插入图

<h1>标签是权重最高的标签,一般会在内部书写最重要的内容,比如 logo 图片、最大的标题等。

另外<h1>内部的文字,可以帮助提高 SEO 搜索排名。

在设置的是 logo 图片时,如果使用插入图,就不能书写搜索关键字。

<h1>
    <a href="#"><img src="images/logo.png" /></a>
</h1>

背景图替换插入图方法

如果想解决 SEO 问题,可以将 HTML 结构中,插入图换成搜索关键字,然后使用 css 添加背景图给<a>标签或<h1>标签。

<h1>
    <a href="#">淘宝网</a>
</h1>
.header h1 a {
    display: block;
    width: 146px;
    height: 58px;
    backgroynd: url(images/logo.png) no-repeat;
}

文字隐藏方法

①将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字,但是 IE7 及以下有兼容问题。

②可以设置给<a>标签一个 text-indent 属性,属性值为负的很大的值,文字会走到盒子外部,直接再设置溢出隐藏属性,将溢出文字隐藏。

场景二:padding 区域背景图

制作方法

在一个盒子中有背景图部分,而且有文字内容,文字会让开背景图区域进行加载, 背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

例如 padding-left 区域背景:

.news li{
    padding-left: 25px;
    backgroynd: url(images/logo.png) no-repeat left center;
}

场景三:精灵图技术

  • 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
  • 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时, 服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。
  • 为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。

CSS精灵

  • CSS 精灵是一种处理网页背景图像的方式。
  • 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
  • 通常情况下,这个由很多小的背景图像合成的大图被称为精灵图。

CSS精灵的技术依据

①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。

②利用背景定位技术,将精灵图的每个小图片加载到对应的标签上。

制作精灵图的注意事项

1. 精灵图上放的都是小的装饰性质的背景图片,插入图片不能往上放。

2. 精灵图的宽度取决于最宽的那个背景图片的标签宽度

3. 精灵图可以横向摆放也可以纵向摆放,但是每个图片之间必须留够足够的空白, 保证背景图片加载到一个标签内部时,不能出现多余内容。

4. 在精灵图的最底端,尽量留一点空白,方便以后添加其他精灵图。

可以使用一些在线工具,快速生成精灵图,比如:CSS Sprites Generatorhttps://www.toptal.com/developers/css/sprite-generator/

8、CSS3 新增背景

背景半透明

CSS3 支持背景半透明的写法,颜色值增加了一种 rgba 模式。

rgba 模式:在 rgb 基础上增加了一个不透明度的设置,不透明度 alpha 取值范围在 0-1 之间,0 表示完全透明,1 表示完全不透明,0.5 表示半透明

书写方式:rgba(红色,绿色,蓝色,不透明度)

注意: 背景半透明是指盒子背景半透明盒子里面的内容不受影响。

同样, 可以给文字和边框透明,都是 rgba 的格式来写。

背景缩放 background-size

通过 background-size 设置背景图片的尺寸,就像我们设置的尺寸一样,在移动 Web 开发中做屏幕适配应用非常广泛。

属性值说明
px 值1-2个像素值,只设置1个值,垂直方向等比例拉伸;设置2个值,按照设置值 加载。
百分比同像素值设置方法相同,设置百分比时,数值参照盒子的宽、高属性
cover自动调整缩放比例,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
contain自动调整缩放比例,把图像图像扩展至最大尺寸,保证图片始终完整显示在背景区域。

多背景

CSS3 中规定,一个盒子上,可以添加多个背景图片。

background-image 的属性值书写时,以逗号分隔多背景的 URL路径地址。

注意:背景加载时,先写的背景压盖后写的背景图片。

background-image: url(/image/tu1.jph),url(/image/tu2.jph);

四、定位属性

定位属性 position

属性名:position。

属性值: relative 相对定位, absolute 绝对定位, fixed 固定定位

作用:设置定位的元素,它需要根据某个参考元素发生位置的偏移。

偏移量属性

定位的元素要想发生位置的移动,必须搭配偏移量属性进行设置。

水平方向:left、right。

垂直方向:top、bottom。

属性值:常用 px 为单位的数值,或者百分比。

定位类型及特点

1、相对定位

属性值:relative,相对的意思。

参考元素:标签加载的原始位置

必须搭配偏移量属性才能发生位置移动。

相对定位的性质:相对定位的元素不脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置。 元素显示效果上,原位留坑,形影分离

注意:

注意①:偏移量属性的值是区分正负的。 正数:表示偏移方向与属性名方向相反。 负数:表示偏移方向与属性名方向相同。(正反负同)

注意②:同一个方向,不能设置两个偏移量属性,如果水平方向同时设置了 left 和 right 属性,只会加载 left 属性。垂直方向只加载 top 属性。书写时从水平方向和垂直方向各挑一个属性进行组合。

注意③:由于相对定位的参考元素是自身,left 的正值等价于 right 的负值,top 的正值等价于 bottom 的负值。 为了方便记忆,可以选择只使用 left、top 组合。

实际应用:

1. 由于相对定位元素比较稳定,不会随意让出位置,可以将相对定位的元素作为后期绝对定位的参考元素,就是所说的子绝父相情况。

2. 相对定位比较稳定,可以在占有原始位置的情况下,对加载效果区域进行位置调整,进行微调设置,或者对文字进行微调。

2、绝对定位

属性值:absolute,绝对的意思。

参考元素:参考的是距离最近的有定位的祖先元素,如果祖先都没有定位,参考<body>

必须搭配偏移量属性才会发生位置移动。

性质:绝对定位的元素脱离标准流,会让出标准流位置,可以设置宽高,也可以随时定义位置,绝对定位的元素不设置宽高只能被内容撑开。

注意1:绝对定位的参考元素是不固定的,不同的参考元素以及不同的偏移量组合, 会导致绝对定位元素的参考点不同,具体位移效果不同。

注意2:在绝对定位中,由于参考点不同,left 正值不再等价于 right 的负值。

<body>为参考元素的参考点

以为参考元素时,参考点的确定与偏移量方向有关。

第一,如果有 top 参与的定位,参考点就是页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

第二,如果有 bottom 参与的绝对定位,参考点是页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。 实际应用中,如果以为参考元素,不同分辨率的浏览器中,绝对定位的元素位置是不同的,所以较少使用作为参考元素。

祖先级为参考元素

如果祖先级有定位的元素,就不会去参考<body>。

参考元素:参考的是祖先元素中有任意定位的,在 HTML 结构中距离目标最近的祖先。

根据绝对定位的参考元素的定位类型不同,有三种定位组合 方式:子绝父相、子绝父绝、子绝父固,由于相对定位的祖先级位置更稳定,大多使用子绝父相的情况。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级,参考点是盒子 border 以内的四个顶点,组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离,会忽视参考元素的 padding 区域。

left、top:参考点是祖先的 border 以内的左上顶点,对比点是盒子自身的左上角。

right、top:参考点是祖先的 border 以内的右上顶点,对比点是盒子自身的右上角。

left、bottom:参考点是祖先的 border 以内的左下顶点,对比点是盒子自身的左下角。

right、bottom:参考点是祖先的 border 以内的右下顶点,对比点是盒子自身的右下角。

3、固定定位

属性值:fixed,固定的意思。

参考元素:浏览器窗口。

参考点:浏览器窗口的四个顶点。跟偏移量组合方向有关。

由于浏览器窗口的四个顶点位置不会发生变化,会导致固定定位的元素会始终显示在定位位置。

性质:固定定位的元素脱离标准流,让出标准流位置,可以设置宽高,根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上

4、定位应用

定位 position 根据属性值不同有种类型的定位效果,其中绝对定位和固定定位的元素会脱离标准流,三种定位在页面中有各自的使用场景。

压盖效果

  • 所有的定位类型都可以实现压盖效果。
  • 由于绝对定位的元素脱标,不占标准流位置,压盖效果更彻底,实际工作中,常见的是绝对定位制作的压盖。

居中

定位的元素,如果想在参考元素中居中显示,有自己的居中方法:

第一步:在居中的方向使用一个偏移量属性,例如 left,设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。 百分比形式的属性值,百分百参考的是参考元素的 border 以内的宽度、高度。

第二步:给绝对定位的子盒子设置一个同方向的 margin,例如 margin-left,属性值为负的自身宽度的一半。

注意:不论子盒子的宽度是否比参考元素更宽,都能使用以上方法进行居中设置。

position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;

扩展应用

①解决标准流中,宽的子盒子在窄的父盒子中的居中,可以设置大的子盒子相对定位,利用相对定位居中的方法进行居中。

②浮动的元素居中,在不改变原始浮动状态情况下,可以利用相对定位居中方法。

5、压盖顺序

用于解决实际定位中可能出现多个定位的元素加载到同一个位置的情况。

默认压盖顺序

  • 定位的元素不区分定位类型,都会去压盖标准流或浮动的元素。
  • 如果都是定位的元素,在 HTML 中后写的定位压盖先写的定位。 因此,书写代码时,需要注意压盖效果,必须合理设置 HTML。

自定义压盖顺序

  • 如果想更改定位的元素的压盖顺序,可以设置一个 z-index 属性。
  • 属性值:数字。

自定义压盖顺序注意事项

①属性值大的会压盖属性值小的,设置z-index属性的会压盖没有设置的。

②如果属性值相同,比较HTML书写顺序,后写的压盖先写的。

③z-index属性只能设置给定位的元素才会生效,如果给没有定位的元素设置,不会生效。

④父子盒模型中,如果父子盒子都进行了定位,与其他的父子级有压盖的部分。

父级盒子:如果不设置z-index后写的压盖先写的;如果设置了z-index,值大的压盖值的。

子级盒子:如果父级没有设置z-index属性,子级z-index大的会压盖小的;如果父级设置了 z-index值,无论子级值是多少,都是父级的值大的子级压盖父级值小的子级,俗称“从父效应” 。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值