CSS之浮动布局与常用标签

最新推荐文章于 2022-08-22 23:23:39 发布

liurongsheng123

最新推荐文章于 2022-08-22 23:23:39 发布

阅读量515

点赞数 1

分类专栏：前端文章标签： CSS html url ol link

本文链接：https://blog.csdn.net/liurongsheng123/article/details/79406708

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS浮动布局与常用标签

浮动布局

float left | right | none 向左浮动 向右浮动 清除浮动
一些标签会自带浮动布局,此时要想清除掉这些浮动 需要使用float none

正常时的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .div3{
            border:1px red solid;
            width:600px;
            margin:100px auto;
        }
        .div1{
            width:200px;
            height:200px;
            background:blue;
        }
        .div2{
            width:200px;
            height:200px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="div3">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

结果截图

这里写图片描述

当在div1的描述中添加一行代码,即float:left;此时浮动的功能将出现,div1中的颜色漂浮在上面,div2的框架则重新调整位置,
向上移动,被漂浮起来的蓝色所覆盖,此时div2中的框架并没有消失

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .div3{
            border:1px red solid;
            width:600px;
            margin:100px auto;
        }
        .div1{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        .div2{
            width:200px;
            height:200px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="div3">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

结果截图

这里写图片描述

浮动造成的问题

父级元素没有设置高度的情况下,会造成高度塌陷

div1已经浮动,此时如果将div2也设置为浮动布局,将会出现塌陷情况

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .div3{
            border:1px red solid;
            width:600px;
            margin:100px auto;
        }
        .div1{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        .div2{
            width:200px;
            height:200px;
            background:green;
            float:right;
        }
    </style>
</head>
<body>
    <div class="div3">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

结果截图

这里写图片描述

解决方案一:父级设置高度,不过高度一旦设定了,就不能根据里面的内容的增高而增高了

外边框设定高度时,内边框高度超过外边框时,可能出现这种情况截图:

截图

这里写图片描述

双浮动时,父级设置高度,解决塌陷

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .div3{
            border:1px red solid;
            height:600px;
            width:600px;
            margin:100px auto;
        }
        .div1{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        .div2{
            width:200px;
            height:200px;
            background:green;
            float:right;
        }
    </style>
</head>
<body>
    <div class="div3">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

结果截图

这里写图片描述

解决方案二

设置一个div4,设置div4的高为0,同时不设置div1的高度,这时div1的高度会根据里面内容的高度的改变而改变,关键字是div4里面的clear:both,即清除浮动

代码为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .div3{
            border:1px red solid;
            width:600px;
            margin:100px auto;
        }
        .div1{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        .div2{
            width:200px;
            height:200px;
            background:green;
            float:right;
        }
        .div4{
            height:0px;
            clear:both;
        }

    </style>
</head>
<body>
    <div class="div3">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div4"></div>
    </div>
</body>
</html>

结果截图:

这里写图片描述

此时如果将div2不设置为浮动的,其还是会被div1覆盖 ,塌陷问题是父级元素包含的内容全部
都是浮动元素时才会存在,如果div2不是浮动的,将不存在塌陷问题,自然不存在解决办法了

对div4里面的内容进行修改 将其改为
.div4{
        height:300px;
        clear:both;
        background:black;
    }
此时div1与div2中的内容不会覆盖div4中的内容,因为浮动已经被清除
clear使用要点1:只能清除同级标签的浮动影响
clear使用要点2:只能清除同级又在它上面的标签的影响

完全代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .div3{
            border:1px red solid;
            width:600px;
            margin:100px auto;
        }
        .div1{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        .div2{
            width:200px;
            height:200px;
            background:green;
            float:right;
        }
        .div4{
            height:300px;
            clear:both;
            background:black;
        }

    </style>
</head>
<body>
    <div class="div3">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div4"></div>
    </div>
</body>
</html>

结果截图

这里写图片描述

解决方案三:最常用的解决方案

在父级中添加 overflow:hidden,此时塌陷问题将得到解决,而且浮动会保留,将div4修改为普通的div
.div4{
            width:600px;
            height:200px;
            background:black;
        }

完全代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .div3{
            border:1px red solid;
            width:600px;
            margin:100px auto;
            overflow:hidden;
        }
        .div1{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        .div2{
            width:200px;
            height:200px;
            background:green;
            float:right;
        }
        .div4{
            width:600px;
            height:300px;
            background:black;
        }
    </style>
</head>
<body>
    <div class="div3">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div4"></div>
    </div>
</body>
</html>

此时div4将被覆盖

结果截图

这里写图片描述

常用标签

标题标签

标题标签是h1-h6 双标签 块级标签
h1是最大的的标题标签 最好只出现一次 用于网页的logo部分
h2常用于二级标题,也就是字模块的标题部分
h4-h6不常用到


display:block(显示为块级) | inline(显示为行级) | none(不显示)
none:此元素不会被显示
block:此元素会被显示为块级元素,元素前后自带换行符
inline:此元素会被显示为行级元素,元素前后不会带换行符
inline-block:行内块元素,设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

font-weight:bold(设置为粗体) | normal(设置为正常字体)

代码示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>标题标签</title>
    <style>

    </style>
</head>
<body>
    <h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>
    <h5>我是五级标签</h5>
    <h6>我是六级标签</h6>
</body>
</html>

结果截图1:

这里写图片描述

代码示例2:

<style>
    body{
        margin: 0px;
    }
</style>

结果截图2

这里写图片描述

代码示例3

<style>
        body{
            margin: 0px;
        }
        h1{
            border:4px red solid;
            margin:0px;
            font-size:24px;
            font-weight:normal;
        }
    </style>

结果截图3

这里写图片描述

代码示例4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>标题标签</title>
    <style>
        body{
            margin: 0px;
        }
        h1{
            border:4px red solid;
            margin:0px;
            font-size:24px;
            font-weight:normal;
        }
        .span1{
            display:block;
            width:600px;
            height:60px;
            background-color:red;
        }
    </style>
</head>
<body>
    <h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>
    <h5>我是五级标签</h5>
    <h6>我是六级标签</h6>
    <span class="span1">我是行级标签但被设置为了块级标签</span>
    <span class="span2">我也是行级标签</span>
</body>
</html>

结果截图4

这里写图片描述

列表标签

列表标签分为:
有序列表:组合标签 双标签 块级  ol li
ol li必须精密相连,成对出现,不能分开
无序列表:组合标签 双标 块级 ul li 
自定义列表:如字典列表 双标签 块级 dl dt dd

代码示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset ="UTF-8"/>
    <title>列表标签</title>
    <style>

    </style>
</head>
<body>
    <ol>
        <li>我是有序列表项1</li>
        <li>我是有序列表项2</li>
        <li>我是有序列表项3</li>
    </ol>
    <ul>
        <li>我是无序列表项1</li>
        <li>我是无序列表项2</li>
        <li>我是无序列表项3</li>
    </ul>
    <dl>
        <dt>我是一</dt>
        <dd>我是二</dd>
        <dt>我是三</dt>
        <dd>我是四</dd>
    </dl>
</body>
</html>

结果截图

这里写图片描述

列表修饰:list-style-type:符号...| none;

代码示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset ="UTF-8"/>
    <title>列表标签</title>
    <style>
        body{
            margin: 0px;
        }
        ol{
            border: 1px red solid;
            margin: 0px;
            padding: 0px;
            margin-left: 50px;
            list-style-type:none;
            width:125px;
        }
        .one{
            border:2px yellow solid;
            background:yellow;
        }
        ul{
            border: 2px blue solid;
            margin: 0px;
            padding: 0px;
            margin-left: 50px;
            list-style-type:none;
            width:125px;
        }
    </style>
</head>
<body>
    <ol>
        <li class="one">我是有序列表项1</li>
        <li class="two">我是有序列表项2</li>
        <li class="three">我是有序列表项3</li>
    </ol>
    <ul>
        <li>我是无序列表项1</li>
        <li>我是无序列表项2</li>
        <li>我是无序列表项3</li>
    </ul>
    <dl>
        <dt>我是一</dt>
        <dd>我是二</dd>
        <dt>我是三</dt>
        <dd>我是四</dd>
    </dl>
</body>
</html>

结果截图:

这里写图片描述

超链接

超链接 a 双标签 行级 
href="" 指定标签跳转的地址
target="_black | _self"指定链接跳转的方式 self是默认跳转方式
链接是有颜色的 访问过这个网址链接 颜色会变的深一些 没有访问过这个网址,颜色比较新鲜
a标签的四种状态
默认状态:link
访问过的状态:visited
悬浮的状态:hover
点击按住没有松开的状态:active
写状态的时候 最好按着这四个顺序来写
简单记:爱恨法则 love & hate
l link
v nisited
h hover
a active

text-decoration  none:默认 定义标准的文本
underline:定义文本下的一条线
overline:定义文本上的一条线
line-through:定义穿过文本下的一条线
blink:定义闪烁的文本

代码示例1:简单实现超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>超链接</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_black">我是超文本链接</a>
    <a href="###">我是超文本链接1</a>
    <a href="###">我是超文本链接2</a>
</body>
</html>

结果截图:

这里写图片描述

代码示例2

默认绿色链接 鼠标悬浮时红色链接 点击时黄色链接 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>超链接</title>
    <style>
        ol{
            list-style-type:none;
        }
        a:link{
            display:block;
            width:70px;
            height:30px;
            font-size:16px;
            background: green;
            margin-bottom: 2px;
        }
        a:hover{
            display:block;
            width:110px;
            height:40px;
            background:red;
            font-size:20px;
            text-align:center;
            line-height:40px;
            text-decoration:none;
            color:white;
        }
        a:active{
            background:yellow;
        }


    </style>
</head>
<body>
    <ol>
        <li>
            <a href="http://www.baidu.com" target="_black">推荐</a>
        </li>
        <li>
            <a href="###">热点</a>
        </li>
        <li>
            <a href="###">阳光视频</a>
        </li>
        <li>
            <a href="###">图片</a>
        </li>
        <li>
            <a href="###">娱乐</a>
        </li>
        <li>
            <a href="###">科技</a>
        </li>
    </ol>
</body>
</html>

结果截图

这里写图片描述

段落标签

段落 p 双标签 块级标签
p标签不可以嵌套div 最好不要嵌套其它的块级标签
text-indent:用于首行缩进
单位em或者px

代码示例

<!DOCTYPE html>
<html langh="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
    <style>
    /*首行缩进 text-indent:;*/
        body{
            margin:0px;
        }
        p{
            margin:0px;
            font-size:20px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <!--段落 p 双标签 块级-->
    <!--p标签不可以嵌套div , 最好不要嵌套其他的块级标签-->
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
</body>
</html>

结果截图

这里写图片描述

图片标签

<!--图片标签 单标签 比较特殊 可已设置尺寸 有行级标签的=特点-->
<!--src=""指定引入图片的地址-->
<!--alt=""图片内容的描述 必须的-->
<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>图片</title>
    <style>
        img{
            width:500px;
        }
    </style>
</head>
<body>
    <img src="http://img1.imgtn.bdimg.com/it/u=989341999,236255160&fm=27&gp=0.jpg"
     alt="最年轻的人大代表,只有22岁"/>
     <img src="http://img1.imgtn.bdimg.com/it/u=989341999,236255160&fm=27&gp=0.jpg"
     alt="最年轻的人大代表,只有22岁"/>
     <img src="http://img1.imgtn.bdimg.com/it/u=989341999,236255160&fm=27&gp=0.jpg"
     alt="最年轻的人大代表,只有22岁"/>
</body>
</html>