宽高自适应隐藏伪对象

最新推荐文章于 2024-06-06 14:24:41 发布

417545911

最新推荐文章于 2024-06-06 14:24:41 发布

阅读量60

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_44718740/article/details/119005374

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、锚点选中另外一个页面的选项

首页.html下

<body>
    <a href="03-详情页面.html#box1">1</a>
    <a href="03-详情页面.html#box2">2</a>
    <a href="03-详情页面.html#box3">3</a>
</body>

03-详情页面.html

<body>
    <div id="box1">详情页1</div>
    <div id="box2">详情页2</div>
    <div id="box3">详情页3</div>
</body>

可以实现选中另外页面的id属性，

二、宽度自适应

width: 100%;

特点：

- 块级元素设置宽度为100%的时候会和浏览器的宽度(默认宽度是100%)一样

- 块级元素不设置宽度的时候,宽度默认为100%

- 块级元素不设置宽度的情况下,会和父级等宽

- 块级元素不设置宽度默认是100% 如果元素添加脱离文档流的属性元素的宽度会由内容决定

=> 设置脱离文档流的属性时候一定要给元素添加宽高大小 !!!

三、高度自适应 height

- 浏览器的默认高度是0 设置直接子级元素为100% 高度不显示

- 高度不设置或者设置为auto,当前元素的高度会被子级元素撑开 => 高度自适应

重点:设置元素为百分比的情况

- 设置浏览器的默认百分比宽高,子级百分比才会相对于浏览器进行计算

html,body{width:100%;height:100%}

- 设置图片宽高大小和父级大小一样

img{width:100%;height:100%} => 拉伸变形

四、最小高度的概念 min-height

- 没有内容的时候可以保持一个最小的固定高度

- 有内容的时候可以将容器的高度撑开做到自适应

最小高度有兼容问题:只能在高版本中使用,低版本中不可以使用

1过滤器:

1.下划线过滤器

- 用法 _属性:属性值

- 只能在低版本中使用

2.最高权重

- 属性:属性值!important

    <style>
        *{
            margin: 0;padding: 0
        }        
        .box2{
            background: greenyellow;
            min-height: 200px; /* 高版本 */
            _height: 200px; /* 低版本 默认解析为最小高度 */
        }
        
        a{
            color: red !important
        }
/*  max-width: 1920px; *//* 标准的设计图1920px 版心1200px */
    </style>

2最大宽度 max-width

常用重要的: 最大最小宽度！媒体查询

最大高度 max-height

最小宽度 min-width

最小高度 min-height

五、高度塌陷

1.造成高度塌陷的原因

- 父级没有设置高度 => 自适应

- 子级含有浮动属性 => 布局

2.解决高度塌陷

第一种方法:给父级添加高度

缺点:不可以做到自适应布局

第二种方法:给父级添加overflow:hidden

原理:设置文本溢出属性会触发BFC,布局规则浮动元素也参与高度的计算

缺点:如果子级元素有超出父级容器的部分就会被隐藏起来

第三种方法:在当前容器中最后位置添加一个任意标签设置clear:both

原理:清除上方预留出来的空间

优点:清除浮动比较方便

缺点:代码冗余造成布局错乱

.clear-fix{
            clear: both; 
            /* 
                clear 清除
                left right both none
            */
        }

第四种方法:万能清除法(不要求理解,会用就行)

代码如下: 给出现高度塌陷的父级添加

   ```css

.clear-fix::after{
content:’’;
width:100%;
height:0;
display:block;
overflow:hidden;
clear:both;
visibility:hidden;
}
```

六、伪对象/伪元素选择器

1.选择器::after 表示在当前标签的后面添加… 必须要和content一起使用

2.选择器::before 表示咋当前标签的前面添加… 必须要和content一起使用

    <style>
        div::after{
            content:'真的'
        }
        div::before{
            content: '小'
        }
        div::first-line{
            color: red
        }
    </style>

<body>
    <div>传国你真帅!</div>
</body>

3.选择器::first-letter 选择第一个文本(会包括伪对象)

4.选择器::first-line 选择第一行(会包括伪对象)

2总结:伪类和伪对象的区别是什么?

- 伪类: hover link visited active

- 伪对象 before after

1.写法上的区别:

在css2中伪类和伪对象都是一个冒号,在css3中为了区别,伪对象设置两个冒号

2.作用上的区别:

伪类改变对象的属性(样式),伪对象可以设置样式还可以添加结构(虚拟的结构)

七、在浏览器中如何隐藏一个元素

- 元素类型 display:none 把结构显示全部删除

- visibility:hidden 隐藏是显示方式结构还存在

- 文本溢出 overflow:hidden

- opacity:0 （透明度）

417545911

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
宽高自适应隐藏伪对象

一、锚点选中另外一个页面的选项首页.html下<body> <a href="03-详情页面.html#box1">1</a> <a href="03-详情页面.html#box2">2</a> <a href="03-详情页面.html#box3">3</a></body>03-详情页面.html<body> <div id="box1">详情
复制链接

扫一扫