搭建静态页面中必须要知道的知识

最新推荐文章于 2024-03-12 18:03:29 发布

寒酥_

最新推荐文章于 2024-03-12 18:03:29 发布

阅读量243

点赞数 4

文章标签： html css html5 css3

本文链接：https://blog.csdn.net/weixin_49115895/article/details/110825801

版权

一、display：table的用法

1、父元素宽度固定，让若干个子元素平分宽度

.parent{display: table;  width: 1000px;}
.son{display: table-cell;}

在这里插入图片描述

2、块级子元素垂直居中

.parent {display: table;}
.son {display: table-cell; vertical-align: middle;text-algin:center}

在这里插入图片描述

3、注意

（1）display: table时padding会失效
（2）display: table-row时margin、padding同时失效
（3）display: table-cell时margin会失效

二、vertical-align

1、定义

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表格中，这个属性会设置单元格框中的单元格内容的对齐方式。

2、用法

属性	说明
vertical-align: baseline	默认。元素放置在父元素的基线上
vertical-align: sub;	垂直对齐文本的下标
vertical-align: super	垂直对齐文本的上标
vertical-align: text-top	把元素的顶端与父元素字体的顶端对齐
vertical-align: middle	把此元素放置在父元素的中部
vertical-align: top	把元素的顶端与行中最高元素的顶端对齐
vertical-align: bottom	把元素的顶端与行中最低的元素的顶端对齐
vertical-align: inherit	规定应该从父元素继承 vertical-align 属性的值
vertical-align: initial	设置属性的初始值——浏览器的默认定义值
vertical-align: unset	如果有继承父级样式，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。

3、案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    div {
      background: blue;
    }
  </style>
</head>
<body>
  <div>
    <img src="./dog.jpg">
  </div>
</body>
</html>

效果
在这里插入图片描述
插入图片后会默认基线对齐

3、解决方法

1、设置vertical-align的值，不使用baseline，使用bottom/middle/top都是可以。

2、我们知道vertical-align 的默认值是 baseline，它会和文字的基线对齐，我们直接去掉文字的高度也是可以了的，而文字的高度是由行高决定的，所以我们直接给div设置 line-height: 0; 也能解决问题。

3、说一下 line-height，它的默认值一般为1.2，当 line-height取值为数字或百分数时，它是基于当前字体尺寸来计算的，也就是font-size的大小，所以我们直接给div设置font-size: 0; 也是可以解决问题的。

4、我们最开始提到过，只有元素属于inline或是inline-block ，vertical-align属性才会起作用。所以我们直接让vertical-align属性失效也可以解决问题，那就直接给img 设置 display: block; 就可以了

三、伪元素的认识

1、何为伪元素

什么是伪元素（Pseudo element）？

伪元素不是真正的元素，不存在与文档之中，所以js无法操作他。那为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。

伪元素有哪些？

before,after,first-letter,first-line。

2、伪元素:before和:after用法

这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。可以用以下例子来说明：

    <style>
        p:before{content: "hello "}
        p:after{content: "you are handsome!"}
    </style>

3、:before和:after特点

伪元素是通过样式来达到元素效果的，也就是说伪元素不占用dom元素节点，引用:before,:after伪元素妙用里面总结的，:before和:after伪元素的主要特点如下：

（1）伪元素不属于文档，所以js无法操作它

（2）伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

（2）原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

（3）基于伪元素的特点可以知道其优缺点，也引用别人文章的话：

4、利用伪元素清除浮动

div{
display:block;
content:"";
clear:both
}

5、伪类与伪元素的介绍和区别

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；伪类 :link :hover 伪元素 ::before ::after
可以同时使用多个伪类，而只能同时使用一个伪元素；
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 “伪无素” 。
伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
***伪类：***存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾
W3C中对于二者应用的描述(描述太模糊, 不容易理解)：

伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器(标签

6、:after/::after和:before/::before的异同

相同点

都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的

不同点

:before/:after是Css2的写法，
::before/::after是Css3的写法
所以css2的要比css3的兼容好 , :before/:after 的兼容性要比::before/::after好，

不过在H5开发中建议使用::before/::after比较好

注意：

伪对象要配合content属性一起使用
伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪对象的特效通常要使用:hover伪类样式来激活
eg:当鼠标移在span上时，span前插入”duang”

<style>
 　　 span{
                background: yellow;
           }
           span:hover::before{
                content:"duang";
           }
  </style>
  
  <span>222</span>