CSS3零基础快速入门

发布时间:2024-03-12 17:01

复合选择器

1. 后代选择器:选择父级元素的后代元素
ul li {}		//选择 ul下属级别中的所有 li元素。可以多级嵌套: 爷爷级元素 父亲级元素 孙子级元素,每一个层级的元素。
2. 子选择器:只能选择作为某元素的最近一级子元素,直接后代,只能选择该元素儿子级的元素
<div class="one">
   <p>儿子p>
   <a>
      <p>孙子 p>
   a>
div>

div p {}	或者 .one p {}	//后代选择器会选中两个p标签
div>p {}	或者 .one>p {}	//子选择器只会选中儿子p标签
3. 并集选择器:任意形式的选择器只需要用, 一个逗号连接就是并集选择器,用于选择多组目标
4. 链接伪类选择器
a:link	// 选择素有未被访问的链接
a:visited	//选择所有已被访问的链接
a:hover		//选择鼠标指针位于其上的链接
a:active		//选择活动链接(鼠标按下未弹起的链接)
// 一般按照 link visited hover active 的顺序书写代码
5. :focus伪类选择器:选取获取焦点的表单元素。一般指 input 类的标签
input:focus {}		//把获取焦点的输入框选取出来
6. 属性选择器:根据某个元素是否包含某种属性选择
<input type="text" value="请输入用户名">
<input type="text">

input[value] {}	//属性选择器: input标签中包含value属性的那个
选择器 描述
E[att] 选择具有 att 属性的 E 元素
E[att=“val”] 选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=“val”] 选择具有 att 属性且属性值以 val 开头的 E 元素
E[att$=“val”] 选择具有 att 属性且属性值以 val 结尾的 E 元素
E[att*=“val”] 选择具有 att 属性且属性值含有 val 的 E 元素
7. 结构伪类选择器
选择器 描述
E:first-child 从 E 中选择第一个元素
E:last-child 从 E 中选择最后一个元素
E:nth-child(n) 从 E 中选择 第n 个元素 n可以是数字,关键字(even,odd),公式
E:first-of-type 从 E 中选择第一个元素
E:last-of-type 从 E 中选择最后一个元素
E:nth-of-type(n) 从 E 中选择 第n 个元素
  • E:nth-child(n) 公式用法
ul li:nth-child(2n)  // n 从0自增,2n表示选出偶数li
ul li:nth-child(n+5)  // n 从0自增,n+5 表示从第6个选中到最后
  • typechild 的不同:
    <div>
        <h3>光头强h3>
        <p>熊大p>
        <p>熊二p>
    div>

div p:first-child {}   //这样选不到 熊大,因为该选择器的执行步骤是:1.先去找div中的第n个孩子  2.再把这第n个孩子拿去和p匹配一下看能否匹配成功

div p:first-of-type {}	//这样就可以选中。因为这个选择器的执行步骤是:1.先把 div中的所有p选出来排序 2.再去找第n个 p 

元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示,比如 div 独占一行,比如一行可以放多个span

1. 块元素
  • 独占一行

  • 高度,宽度,margin,padding都可以控制

  • 宽度默认是父级元素的100%

  • 可以存放行内元素或块元素

注意: 文字类元素内不能使用块元素

2. 行内元素
  • 一行可以显示多个
  • 高度,宽度直接设置是无效的
  • 默认宽度就是本身内容的宽度,所以内容越多,它会自己加大宽度
  • 行内元素只能容纳文本或其他行内元素

注意: 链接里不能再放其他链接 ,但是链接里有时可以放块级元素,需要将链接转换一下模式

3. 行内块元素 同时具有行内元素和块元素的特点
  • 和相邻行内元素,行内块元素在一行上,但是他们之间会有空白缝隙。一行可以显示多个
  • 默认宽度就是它本身内容的宽度
  • 高度,宽度,margin,padding都可以控制
4. 显示模式转换
display: block;	//转换为块元素
display: inline;	//转换为行内元素 
display: inline-block	//转换为行内块元素  

CSS没有给我们提供直接的文字垂直居中的方法,但是我们可以通过让文字的行高等于盒子高度就可以了。
CSS3零基础快速入门_第1张图片

背景样式

background-color:	red;
background-image: none或者 url(图片路径);			//常用于页面大logo,或者装饰性小图片,优点是便于控制位置
background-repeat: 						//背景图片的平铺
background-position:						//背景图片在盒子里的位置
background-attachment:	scroll | fixed		//设置背景图像是否固定或者随着页面的其余部分滚动
background:  rgba()		//设置背景颜色和透明度

复合写法

background: 背景颜色	背景图片	背景平铺	背景图像滚动	背景图片位置

三大特性

  • 层叠性:
  • 继承性:子标签会继承父标签的某些样式,如text- font- line- 相关的属性
  • 优先级:当一个元素被多个不同的选择器选中时就会有优先级的产生。选择器相同则执行层叠性,选择器不同则根据选择器权重执行。复合选择器会有权重叠加

行内样式 > ID选择器 > (类选择器=伪类选择器) > 元素选择器 > 继承或者*

盒子模型

  • border:当指定了div的宽高时是默认不算border的,单独设置border会使原先的div尺寸变化。就是说:如果已经给div设置了宽度和高度,再设置border会撑大盒子。
border-style | border-width | border-color
border: 1px solid red		//简写格式,三者之间没有顺序
  • padding:内边距,和border一样都会影响盒子大小
padding: 5px;		//1个值表示上下左右都是
padding: 5px 5px;		//2个值表示 上下 左右
padding: 5px 8px 10px;		//3个值表示 上 左右 下
padding: 5px 2px 7px 10px;		//4个值表示 上右下左
  • margin:外边距。
//margin可以让块级盒子水平居中,但必须满足两个条件:
//1.盒子必须指定了宽度;2.盒子左右的margin都设置为 auto
//margin的简写规则和 padding 一模一样

让块级元素水平居中只需要设置其左右 margin 为 auto如果想让行内元素或者行内块元素水平居中,只需要给其父元素添加 text-align:center 即可

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;  //前两个必选,后四个可选
描述
H-shadow 必须。水平阴影的位置,可正负
v-shadow 必须。垂直阴影的位置,可正负
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影转换为内部阴影。默认为outset

盒子阴影不占用盒子空间,不会影响排列。

float 可以让多个块级元素在一行内显示

网页布局第一准则:多个块级元素纵向排列找标准流(就是之前学的那些行内元素,块元素),多个块级元素横向排列找浮动。

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘

选择器 {float: 属性值;}			// none. left	right
1. 浮动特性
  • 浮动元素会脱离标准流,并且移动到指定位置,原先位置不保留
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动元素会具有行内块元素的特性

如果是正常标准流,两个div应该显示如下:

CSS3零基础快速入门_第2张图片

如果给粉色的那个div增加浮动属性:float:left;,则显示效果如下:

CSS3零基础快速入门_第3张图片

  1. 浮动了之后,粉色div的位置就不保留了,而且粉色的也不属于标准流了,但是蓝色的还是,所以粉色原先那个位置其实是空闲了,粉色漂浮在上面,于是蓝色就填补上去了。

  2. 而且浮动的元素是互相紧贴在一起的,没有缝隙。如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。

  3. 任何元素都可以浮动,不管原先是什么显示模式的元素,添加浮动之后具有行内块元素的特性。

  4. 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,他的大小根据内容来决定。

为了约束浮动元素的位置,我们网页布局一般采取的策略是:

先用标准的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流 举个例子:

三个标准流的div应该显示如下:

CSS3零基础快速入门_第4张图片

  1. 如果将将绿色设为float,结果会怎么样? 显示效果如下:

CSS3零基础快速入门_第5张图片

红色是标准流的,一经把一整行都霸占住了别人都不能用。绿色浮动后,其位置就空出了,下面蓝色的标准流就往上填补。

  1. 如果还是刚刚 的三个标准流,现在将红色和蓝色改为浮动,只有中间的绿色为标准流,那结果会怎么样?

CSS3零基础快速入门_第6张图片

清除浮动

由于父级盒子很多情况下,不方便给出高度,但是浮动盒子又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。

CSS3零基础快速入门_第7张图片

清除浮动的本质是清除浮动元素造成的影响,如果父盒子本身有高度,则不需要清除浮动。语法:

选择器 {clear: left | right | both}
清除浮动方法
  • 额外标签法(推荐)

  • 父级添加overflow属性

  • 父级添加after伪元素

  • 父级添加双伪元素

定位

将盒子定在某一个位置,比浮动更灵活。 定位 = 定位模式 + 边偏移

  • 定位模式:static relative absolute fixed 静态 相对 绝对 固定 四种定位方式
  • 边偏移:就是距离 top left right bottom 四条边的距离。eg: top: 50px
relative 相对定位
  • 相对该元素当前位置进行的位置偏移。
  • 即使位置移动了,但是原先的位置依然保留,其他元素不会进行填补。
absolute 绝对定位

元素在移动位置的时候,是相对于它的祖先元素来说的

  • 如果某个元素无父级元素,那么就以浏览器可视窗口作为父级元素。
  • 如果某个元素有父级元素,但是其父级元素没有申明定位,那么该元素还是以浏览器作为父级元素进行定位
  • 如果某个元素的父级元素有定位(相对,绝对,固定),则该元素以最近一级的有定位的祖先元素为参考点定位。
  • 绝对定位不再占有原先位置 (脱标)

平常用的最多的就是:子绝父相

fixed 固定定位

让元素固定于浏览器可视区的位置;主要适用场景:可以在浏览器页面滚动时元素的位置不会改变。

  • 以浏览器可视窗口为参照点移动元素

CSS3零基础快速入门_第8张图片

窗口不是全屏,可视窗口的大小也会变化。上图红色区域就是可视窗口

  • 跟父级元素没有任何关系
  • 固定定位和绝对定位一样,不占有原先的位置
sticky 粘性定位

可以看作是相对定位固定定位 的混合

  • 以浏览器的可视窗口为参照点移动元素 固定定位特点
  • 粘性定位占有原先位置 相对定位特点
  • 必须添加 top,right,left,bottom 其中一个才有效
定位叠放次序 z-index

在使用定位布局时,可能会出现盒子重叠的情况,此时,可以用z-index 来控制盒子的前后次序。只有定位的元素才有z-index 属性

选择器 {z-index:1;}  //数值可以是正负整数,0,默认是auto,数值越大,盒子越靠上 
绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto 水平居中,但是可以通过一下方法实现水平和垂直居中。

  1. 先用定位移动到窗口的一半位置。 position: absolute left:50%
  2. 再向左移动半个元素的宽度。 垂直居中思路类似
定位的一些特性
  1. 行内元素如果设置了绝对定位或者固定定位,就可以直接设置宽高,不需要再转换显示模式为inline-block
  2. 块级元素添加绝对定位或者固定定位后,如果不设置宽高,则默认为内容大小
  3. 脱标的盒子不回触发外边距塌陷
  4. 之前说浮动时说过,浮动会漂浮起来,下面的盒子会填补上去,被浮动的盒子盖住。但是下面盒子里的内容是不会被盖住的,如下图:
<div class="div">div>
<p>wdjawodsndasofasjfsfasp>

.div {
            float: left;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

CSS3零基础快速入门_第9张图片

可以看到,p标签已经被压住了,但是其中的文字自动往外移,以免被盖住

  1. 但是绝对定位和固定定位都会压住下面标准流的所有内容包括文字

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号