【元素类型的分类 + 垂直对齐 + css的继承性 +鼠标悬停显示 + 定位 + 书写页面的准备工作】

yx-02

于 2021-12-11 17:08:01 发布

阅读量539

点赞数

文章标签： css 分类 css3 html5

本文链接：https://blog.csdn.net/YANG_helloworld/article/details/121875103

版权

块元素

特点:

默认情况下,独占一行,简单意思是竖着排列
默认情况下,支持宽度和高度的效果
可以作为其他元素的容器
特例:
特殊标签 p 作为容器的时候,不能自己包自己,不能包块元素,只能包其他行内元素和行内块元素
h1-h6也不能自己包自己,也不能包同类的标签,其他的可以

  块元素如 div p ul li ol li dl dt dd等

行内元素(内联元素)

特点:

默认情况下,横着排列
默认情况下,不支持宽度和高度
默认情况下,对于一些css属性支持不完善
如: line-height 、 text-align 、 margin上下、padding上下不支持使用
默认情况下,可以识别编译器敲得回车和空格,浏览器会显示水平中间有缝隙
默认情况下,垂直的对齐相对于文本的基线对齐的
```
如： span a sub sup  u  等
```

行内块元素(内联块元素)

特点:

既有行内元素的特点,又有行内块元素的特点
从视觉效果看,默认既可以横着排列,也可以设置宽高有效
```
           如：  input img 等
```

总的来说，想要不支持的都支持,则需要加 display:block 或者浮动

元素类型转换的属性（diaplay）

display:元素类型转换的属性;
(总共有18个值,以后更新的话会更多)

block 把元素转换成块元素 (常用)
inline 把元素转换成行内
inline-block 把元素转换成行内块元素 (弊端:水平中间有缝隙)
none 隐藏 (常用)
list-item li标签默认的display属性值

块元素,行内元素可以随便转,但是行内块元素只能转块元素,不能转行内元素。

要想要行内元素宽高生效,用display可以,添加浮动和定位也可.

垂直对齐（vertical-align）

只支持行内块元素使用,要么自己是行内块元素,要么display:inline-block;转换为行内块元素,
(想要给未知高度的盒子垂直对齐时,需要给它所在的父元素添加行高,因为子元素是行内块元素会继承行高,所以子元素要添加line-height:1; 这样未知高度的盒子会在垂直方向上对齐)

属性值：

baseline 是默认值 baseline基线
middle 垂直在行高范围内居中对齐
top 垂直方向上在行高的顶端对齐（常用，用于清除图片撑大的三像素）
bottom 垂直方向上在行高的底端对齐
text-top 垂直方向上在文字的顶线对齐

text-bottom 垂直方向上在文字的底线对齐

 清除图片撑大的三像素（方法）:
 1、给img转换成块元素
           display:block;
 2、用vertical-align 只要属性值不是
 baseline都可以。      
 3、font-size:0; 不提倡使用,如果有文字,
 文字大小会受影响。
 4、给img添加浮动,且最近的父元素添加overflow:hidden; 解决高度塌陷。
 5、添加一个盒子,把图片放在盒子里,盒子的高=图片的高.

动态伪类选择器 (:link :visit :hover :active)

它的权重是10

:link{ } 未访问的链接状态,必须给a,
(想要看到link的样式,必须清浏览器缓存)
:visited{} 已访问的连接状态,必须给a
:hover{} 鼠标滑过链接的状态,可以随便给
:active{} 鼠标按下去时的状态,必须给a

当这四个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:

     a:link 
     a:visited 
     a:hover 
     a:active

错误的顺序有时会使超链接的样式失效。

为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中.

    例如:
    a{color:red;}   a:hover{color:green}
         
表示超链接的三种状态都相同,只有鼠标滑过变化颜色.

:hover 设置鼠标悬停的效果,谁需要悬停就给谁

如  .box:hover{}

附加题:
默认p隐藏,当鼠标悬停div上让P显示内容

p{
    display:none;   //让p隐藏, 隐藏是彻底隐藏,内容和空间都不在
}
div:hover p{
     display:block;
}
//只要属性值不是none都能显示,常用display:block; 
//彻底隐藏的对象不能用:hover,所以用在了div上

扩展:

隐藏

 display:none;       //彻底隐藏,内容和空间都不在
 opacity:0;          //透明度为0,这个隐藏位置还在,但是内容看不见,它不是0 就显示,结果为1时全显示.
visibility:hidden; 隐藏,只是隐藏内容,但是空间只是视觉看还在,实质空间没有,如同空气一样

IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100
兼容其他浏览器写法：opacity:0.value;
(value的取值范围 0-1 0.1,0.2,0.3-----0.9—1)

透明效果

       rgba()  可以实现透明,仅仅能实现颜色透明 背景颜色 字体颜色 边框颜色
       opacity 功能更强大,可以让盒子里面所有的东西透明

css 的继承性

父元素的样式子元素会去继承,继承来的样式权重是最低的,会被权重比它大的样式覆盖.

      注意：
         宽度width , background背景 不能继承
      
         ul li 的默认宽度是100%

定位 (position)

想要覆盖效果的时候用定位,一般做页面的时候用的是浮动

     使用场景:
           1、移动位置的时候用
           2、想要实现覆盖效果的时候用(覆盖的时候有相对于窗口的,又不想对于窗口的(一般相对于父元素的) )

属性值：

static 静态定位 (默认值)

absolute 绝对定位

     偏移位置时候的参照物:
           1、当没有父元素或者父元素没有定位,参照物是浏览器窗口的第一屏
           2、有父元素且父元素有定位,以父元素为参照物

特点：

    1、文档流是脱离的,也就是一个盒子给了绝对定位后,该盒子也是悬空在页面中的,不占位置,和float类似,但有不一样的是浮动的时候,文本围绕排列,而绝对定位文本全部覆盖不围绕显示。(如果说浮动是半脱离文档流,那么绝对定位就是完全脱离文档流,定位的层高于浮动)
    2、 一个盒子绝对定位了,后面的盒子没有定位,后面的盒子会上去,且内容也会被定位的盒子覆盖
    3、 默认情况下,当多个盒子给了绝对定位之后,结构在后的定位盒子层在上(最后定位的盒子在最上面),想要改变以上的层叠关系,可以通过新属性z-index改变,这个属性只能给定位的盒子,不然没有效果,该属性的默认值是0,不带单位,数值越大越靠上,数值可以是正数也可以是负数.
    4、一个盒子定位之后,移动位置时,可以用margin属性,也可以用top right,left bottom.参照物就是没有定位父元素时找窗口第一屏,有定位(可以是绝对,相对,固定,粘性,一般是相对定位)的父元素以父元素做参照物.(一般是父元素相对,子元素绝对)

绝对定位和浮动的区别:

         浮动是半脱离文档流,绝对定位是全脱离文档流
         浮动和定位都是飘着的,但是定位的层高于浮动
         一个盒子给了浮动之后,不会再给绝对定位.

relative 相对定位 (不脱离文档流)

       偏移位置时候的参照物:
                   - 自己的初始位置

特点：

  1、不脱离文档流,盒子设置相对定位后,该盒子不悬空,占据页面的空间
  2、默认情况下,当多个盒子给了相对定位后,如果没有位置移动,那么盒子默认这么
 排列还是怎么排列,没有覆盖效果,如果移动位置了也会发生层叠,HTML结构在后的
 定位盒子层在上，想要改变层叠关系,和绝对定位一样,添加z-index
  3、一个盒子给了相对定位之后,该盒子是占据位置的,即使移动了,该盒子原有的空间还在,
  且在用top left right bottom移动位置的时候参照物是自己的初始位置
  4、相对定位可以用,也可以实现覆盖效果,但是尽量不要移动位置,因为如果移动了还有
  一块空间占位,就有空白

fixed 固定定位 (脱离文档流)

      参照物是浏览器的当前窗口

特点：

1、脱离文档流,也就是一个盒子给了固定定位之后,该盒子悬空,不占据页面的空间,
2、默认情况下,当多个盒子给了固定定位之后,会发生层叠,HTML结构在后的定位盒子层在上，想要改变层叠关系,和绝对定位一样,添加z-index
3、一个盒子给了固定定位之后,使用top left right bottom 移动位置的时候参照物是浏览器的当前窗口(视口)

sticky 粘性定位
- 是相对定位和固定定位的集合体,可以做吸顶效果, 粘性定位是css3.0新添加的,兼容不好
- 默认情况下,是相对定位的效果,如果想要固定地位的效果,需要配合方向属性一起用,添加了方向属性之后,给的属性值的意思是固定定位的位置值

准备工作:

    1\  效果图
    2\  标注图(学习阶段自己测量)
    3\  素材 (用切图,图片名字用英文,不能用中文名字)
    4\  确定版心
    5\  创建书写该项目所需要的文件夹(站点)
    6\  里面需要图片的文件夹images
    7\  需要一个css文件,叫做index.css
     (如果是整站开发,需要创建一个css的文件夹,把所有文件放进去)
    8\  需要一个html文件,叫做index.html
     (如果是整站开发,需要创建一个html的文件夹,把所有文件放进去)
    9\ 在正式书写之前的准备工作  重置样式

注意:在整站开发时,头部和尾部公用的代码可以单独新建HTML文件,通过iframe标签,插入整张页面中,但是iframe在添加中有默认写法,如果想要公用标签在整张页面中,则需要在公共css文件中修改样式,一般width:100%; border:0;
还有相对应的高度.
如果使用iframe想去进行多个页面跳转的话,不能用超链接a,
如果用的话,跳转的页面的内容只会在iframe中显现,通过滚动条的方式,想要去除滚动条用scrolling:no;(指滚动条没有)它是HTML属性