前端【浮动】

最新推荐文章于 2024-08-20 18:04:12 发布

码农不秃呀

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量131

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_53271010/article/details/126919720

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

常用选择器

标签选择器标签名{样式} 权重：1

class选择器（类选择器） .+class名权重：10

class选择器的特点：多个标签可以有相同的class名

一个标签可以有多个class名

class名由两个单词组成，用_隔开 eg：div_box

id选择器 #+id名{} 权重：100

特点：类似于身份证号

多个标签不可以有相同的id名

一个标签不可以有多个id名

后代选择器父选择器子选择器{}：权重：几个选择器权重相加儿子孙子

子代选择器父选择器>子选择器权重：几个选择器权重相加儿子

通配符选择器权重最小会选中所有标签*{}

用途：去除一些默认样式

浮动布局

浮动的作用：让块属性元素排成一行解决水平布局问题

float：left左浮动（以左边为开始位置） float：right右浮动（以右边为开始位置）

注意点：排成一行的元素都需要设置浮动

附带作用：1.让行属性标签支持设置宽高

2.文字环绕效果

为什么不使用display：inline-block

1.代码换行默认有空隙

2.一个移动，其他元素会跟着移动

3.默认文本下对齐

用途：让行属性元素支持设置宽高

浮动存在的问题

父元素不设置高度情况下高度由子元素撑开一旦子元素设置浮动父元素会失去高度进而影响后面元素布局

解决方式

1.给父元素设置over-flow；hidden

2.动态向父元素后面添加一个clear:both的块属性元素

锚点效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点效果</title>
    <style>
        /* 通配符选择器 去掉所有样式*{} */
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            width: 800px;
            height: 30px;
            line-height: 30px;
            background-color: rgba(0,0,0,0.7);
            /* 固定定位  脱离文档流*/
            /* position: fixed; */
            /* position:sticky粘性定位（固定定位和绝对定位的结合) */
            position: sticky;
            /* left: 360px; */
            top: 0;
           margin: 0 auto;

        }
        .nav a {
            text-decoration: none;
            color: aliceblue;
            margin-left: 160px;
        }
        /* 鼠标移入效果 */
        .nav a:hover {
            color: pink;
        }
        div img {
            width: 800px;
            display: block;
        }
    </style>
</head>
<body>
    <!-- a标签+id选择器配合起来使用 -->
    <div class="nav">
        <a href="#img1">迪丽热巴</a>
        <a href="#img2">易烊千玺</a>
        <a href="#img3">蔡徐坤</a>
    </div>
    <div style="width:800px;margin: 30px auto;">
        <img id="img1"
            src="https://img1.baidu.com/it/u=1995754142,1864714557&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1091" alt="图片飞走了" title="迪丽热巴">
        <img id="img2" src="https://img0.baidu.com/it/u=134286593,1210406477&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889"
            alt="图片飞走了"title="易烊千玺">
        <img id="img3"
            src="https://img2.baidu.com/it/u=3890038931,4078941539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="图片飞走了" title="蔡徐坤">
    </div>

</body>

</html>

码农不秃呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端【浮动】

父元素不设置高度情况下高度由子元素撑开一旦子元素设置浮动父元素会失去高度进而影响后面元素布局。float：left左浮动（以左边为开始位置） float：right右浮动（以右边为开始位置）2.动态向父元素后面添加一个clear:both的块属性元素。后代选择器父选择器子选择器{}：权重：几个选择器权重相加儿子孙子。子代选择器父选择器>子选择器权重：几个选择器权重相加儿子。class选择器（类选择器） .+class名权重：10。注意点：排成一行的元素都需要设置浮动。
复制链接

扫一扫