CSS基础(3)

最新推荐文章于 2024-08-18 11:06:22 发布
最新推荐文章于 2024-08-18 11:06:22 发布
阅读量92 收藏
点赞数
分类专栏： CSS基础 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxcWh/article/details/120348189
版权

1.CSS Float 浮动

css的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

浮动元素之后的其他元素将围绕当前浮动元素显示

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>浮动元素</title>
        <meta charset="utf-8">

        <style>
            #div1{
                width: 100px;
                height: 100px;
                float: left; 
                background-color: aqua;
            }
            #div2{
                width: 120px;
                height: 120px;
                background-color: blueviolet;
                /* float: left; */
            }
            #img1
            {
                width: 100px;
                height: 100px;
                float: left;
            }
            ul{
                list-style-type: none;
            }
            ul>li{
                float: left;
                padding-left: 50px;
            }
            ul>li>a
            {
                text-decoration: none;
                color:black;
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <h4>css的float浮动，回事元素向左或向右移动，其周围的元素也会重新排列</h4>
        <h4>浮动元素之后的其他元素将围绕当前浮动元素显示</h4>
        <div id="div1">
            <h4>第一个div，右浮动</h4>
        </div>
        <div id="div2">
            <h4>第二个div，左浮动</h4>
        </div>
        <hr>
        <p>
            <img id="img1" src="img/avatar3.png" >
            CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
            CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
            CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
            CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
            CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
            CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

        </p>
        <hr>
        <ul>
            <li>
                <a href="www.baodu.com">新闻</a>
            </li>
            <li>
                <a href="www.baodu.com">hao123</a>
            </li>
            <li>
                <a href="www.baidu.com">地图</a>
            </li>
            <li>
                <a href="www.baodu.com">直播</a>
            </li>
            <li>
                <a href="www.baodu.com">贴吧</a>
            </li>
            <li>
                <a href="www.baodu.com">更多</a>
            </li>
        </ul>
    </body>
</html>

2.CSS布局-Overflow

CSS overflow属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

visible默认值。内容不会被修剪，会呈现在元素框之外。

hidden内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

suto 如果内容被修剪，则浏览器会显示滚动条一边查看其余的内容

例如：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>css布局--overflow</title>
    <style>

        div{
            width: 900px;
            height: 900px;
            border: 20px solid black;
            overflow: auto;
        }
        img{
            width: 1000px;
            height: 1000px;
        }
    </style>
</head>
<body>
    <h4>CSS voerflow 属性可以控制内容溢出时在对应的元素区间添加滚动条</h4>
    <h4>
        visible 默认值。内容不会被修剪，会呈现在元素框之外。<br>
        hidden  内容会被修剪，并且其余内容是不可见的。<br>
        scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。<br>
        auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

    </h4>

    <div>
        <img src="img/preview.jpg" >
    </div>
</body>
</html>

3.CSS Position（定位）

position属性制定了元素的定位类型

元素可以使用的顶部top，底部bottom，左侧left和右侧right属性定位

satic定位给---Html元素的默认值，既没有定位，遵循正常的文档流对象。

正常的文档流对象是指html中元素的默认排列方式。从左上角到右下角一次排列元素，碰见块级自动换行，行内元素一行排满才进入下一行。

 fixed 定位 

元素的位置相对与浏览器窗口是固定位置，即使窗口的滚动的它也不会移动

fixed定位使元素的位置与文档流无关，因此不占据空间。

fixed定位元素会和其他元素重叠。

会收到top，bottom，left，right影响

例如：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>css Position定位</title>
    <style>
         #div1
         {

            width: 100px;
            height: 100px;
            background-color: rgb(109, 154, 212);
            left: 150px;
            top: 150px;
            position: fixed;
         }
         #img1{
             width: 60px;
             height: 60px;
             position: fixed;
             left: 50px;
             top: 50px;
         }
   
    </style>
</head>
<body>
 <div id="div1">
        <img id="img1" src="img/avatar5.png">
 </div>
 
 <h4>
     fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
     fixed定位的元素会和其他元素重叠。<br>
     会受到 top, bottom, left, right影响。
  
 </h4>
 <h4>
    fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
    fixed定位的元素会和其他元素重叠。<br>
    会受到 top, bottom, left, right影响。
 
</h4>


</body>
</html>

relative定位

相对定位元素的定位是相对其以前的位置。

移动相对定位元素，但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

会受到 top, bottom, left, right影响。

例如:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>css Position定位</title>
    <style>
         #div1
         {

            width: 100px;
            height: 100px;
            background-color: rgb(109, 154, 212);
            left: 150px;
            top: 20px;
            position: relative;
         }
         #img1{
             width: 60px;
             height: 60px;
             /* position: fixed; */
             left: 50px;
             top: 50px;
         }
   
    </style>
</head>
<body>
 <div id="div1">
        <img id="img1" src="img/avatar5.png">
 </div>
 
 <h4>
     relative相对定位元素的定位是相对其以前的位置<br>
    移动相对定位元素，但他原本所占的空间不会改变。<br>
    相对定位元素经常被用来作为绝对定位的元素容块<br>
     会受到 top, bottom, left, right影响。
  
 </h4>


</body>
</html>

absolute定位

绝对定位的元素的位置相对于最近的已定位[ position: static;除外]父元素

如果元素没有已定位的父元素，那么它的位置相对于当前浏览器窗口.

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

会受到 top, bottom, left, right影响。

例如：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>css Position定位</title>
    <style>
         #div1
         {

            width: 100px;
            height: 100px;
            background-color: rgb(109, 154, 212);
            left: 150px;
            top: 20px;
            position: relative;
         }
         #img1{
             width: 60px;
             height: 60px;
            position: absolute;
             left: 20px;
             top: 20px;
         }
   
    </style>
</head>
<body>
 <div id="div1">
        <img id="img1" src="img/avatar5.png">
 </div>
 
 <h4>
     绝对定位的元素的位置相对于最近已经定位【position: static；除外】父元素<br>
     如果元素没有已经定位的父元素，那么它的位置相对于当前浏览窗口。<br>
     absolute定位使元素的位置与文档流无关，因此不占据空间。<br>
     absolute定位的元素和其他元素重叠
     会受到 top, bottom, left, right影响。
  
 </h4>


</body>
</html>

sticky定位

粘性定位的元素是要依赖于用户的滚动，在position:relative 与 position:fixed 定位之间切换。

它的行为就像position:relative;当页面滚动超出目标区域时，它的表现就像position：fixed；

它会固定在目标位置

元素定位表现为跨越特定阈值前为相对定位，之后为 固定定位

这个特定的阈值指的是 top，left，bottom或者right之一，换言之指定top，left，bottom或者right四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。

例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css Position定位</title>
    <style>
        #div1 {


            height: 100px;
            background-color: rgb(109, 154, 212);

            top: 0px;
            position: sticky;
        }

        ul {
            list-style-type: none;
        }

        ul li {
            float: left;
            padding-left: 20px;
        }

        ul>li>a {
            text-decoration: none;
        }

        ul>li>a:hover {
            color: rosybrown;
        }
    </style>
</head>

<body>
    <div id="div1">
        <ul>
            <li>
                <a href="www.baodu.com">新闻</a>
            </li>
            <li>
                <a href="www.baodu.com">hao123</a>
            </li>
            <li>
                <a href="www.baidu.com">地图</a>
            </li>
            <li>
                <a href="www.baodu.com">直播</a>
            </li>
            <li>
                <a href="www.baodu.com">贴吧</a>
            </li>
            <li>
                <a href="www.baodu.com">更多</a>
            </li>
        </ul>
    </div>

    <h4>
        粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。<br>
        它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。<br>
        元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。<br>
        这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，
        指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。
        否则其行为与相对定位相同。
    </h4>

    <div style="padding-bottom:2000px">
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
    </div>

</body>

</html>

名称

特点

static默认的【可忽略】

符合正常的文档流对象

fixed

与文档流无关，不会随之滚动

relative

符合正常的文档流对象，相对其以前的位置

absolute

最近的已定位[ position: static;除外]父元素

sticky

在 position:relative 与 position:fixed 定位之间切换

重叠的元素

z-index属性指定了一个元素的堆叠顺序

z-index取值是一个数字，数字值越大就显示在最上面，数字值越小就显示在最下面。

注意：依赖于position属性，没有position属性那么z-index属性没有效果。

例如：

<!DOCTYPE html>
<html>
    <head> 
        <title>z-index属性</title>
        <meta charset="utf-8">
        <style>
            #test1{
                background-color: rosybrown;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 150px;
                z-index: 1;

            }
            #test2{
                background-color: rgb(58, 207, 207);
                width: 100px;
                height: 100px;
                position: absolute;
                top: 180px;
                z-index: 2;
            }
            #test3{
                background-color: rgb(33, 202, 104);
                width: 100px;
                height: 100px;
                position: absolute;
                top: 210px;
                z-index: 3;
            }
        </style>
    </head>
    <body>
        <h4>z-index属性</h4>
        <h4>
            z-index属性指定了一个元素的堆叠顺序<br>
            z-index取值是一个数字，数字值越大就显示在最上面，数字值越小就显示在最下面<br>
            注意:依赖于position属性，没有position属性那么z-index属性没有效果。
        </h4>
        <div id="test1"></div>
        <div id="test2"></div>
        <div id="test3"></div>
    </body>
</html>

 

山i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3基础.xmind
11-16
前端入门思维导图CSS3基础知识（1）原图。 1.CSS3新功能：相比CSS2增加了许多的新功能； 2.CSS3的基本语法； 3.CSS3的样式表； 4.CSS3的两个基本特性。
HTML5+CSS3入门基础知识
12-29
CSS3 基础 CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。CSS3 新增了许多新的特性和选择器，如圆角、阴影、渐变等。CSS3 的主要特点包括： *新增了许多新的选择器，如 nth-child、nth-of-type...
html页面块元素的定位(DIV，Table，UL，LI等)
weixin_30649859的博客
09-21 432
html页面块元素的定位(DIV，Table，UL，LI等) 文档流：html页面元素按照书写顺序，自上而下，自左而右的次序，线性的输出流。html元素在没有指定定位方式 (Position:absolute,Position:relative,Position:fixed等)，或是指定定位方式为Position:static的情况下，浏览器就会按照html元素在文档流中的次序进行显示。判断htm...
获取相对XPath路径解决动态元素定位问题
hxe116的博客
03-07 1294
/li[contains(text(),“工作空间”)]：选取text值包含"工作空间"的li节点//div[contains(text(),“工作空间”)]:选取text值包含"工作空间"的div节点**
3、元素定位几种方式
先
07-13 560
一、元素定位几种方式 通过id定位元素 resource-id 通过ClassName定位 classname 通过AccessibilityId定位 content-desc 通过AndroidUiAutomator 通过xpath定位 二、示例 resource-id driver.find_element_by_id("com.ss.android.article.lite:id/qz") classname driver.find_element_by_class_na
Flex 布局教程：语法篇
MICHONG的博客
08-23 409
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex;...
关于li加绝对定位(position:absolute)之后，多个li都会重叠在一起
彭于晏的博客
07-06 9384
因为加bai了这个属性之后，元素duli就变成了绝对定位的元素，四个li都定位到了左上角，就产生了重叠的现象。 注意，定位会覆盖掉css代码中的：float:left;让其失效。 解决办法： 给ul进行绝对定位，li进行float:left,就OK了 ...
CSS基础知识
ashfiqa的博客
01-21 2128
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
CSS 学习笔记 - 弹性布局
灵台方寸山斜月三星洞
09-03 589
CSS 学习笔记 - 弹性布局参考资料 ul{ display: flex; justify-content: space-between; } li{ flex: auto; } 属性 用于 说明 justify-content 容器 分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间 flex-direction 容器 内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向) flex-wrap 容器 指定 flex 元素单行显示还是多行显
滚动和div标签位置和li标签的相对定位，并进行重叠
平平爱学习的博客
06-21 1544
这里是滚动的文字                                                                                                                                                                                      
id为动态，定位DOM元素
litoujkl的专栏
12-20 773
var id = "caseid_" + caseId; jQuey('#'+id).xxx()
CSS的重绘和重排是什么？
沐爸的博客
08-12 1068
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 166
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 956
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
响应式Web设计：纯HTML和CSS的实现技巧
最新发布
vvvae1234的博客
08-18 501
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 660
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
HTML5+CSS3基础知识大全
**CSS3基础知识点** 1. **CSS简介**：CSS（Cascading Style Sheets）是一种样式表语言，用于控制网页的布局和样式。 2. **CSS结构**：CSS结构主要包括选择器、属性和值，选择器用于选择要样式化的元素，属性用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值