CSS进阶标签属性及案例

简介: CSS进阶标签属性及案例

CSS高级

1. 盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式;

图片.png

element:元素内容

width:元素内容的宽度

height:元素内容的高度

border:元素的边框

padding:边框到内容的距离

margin:边框到其他元素的距离

<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS盒子的基本使用</title>
    <style>
            body{
    
    
                float: right;
            }
            img{
    
    
                width: 200px;
                height: 100px;
                border: 5px solid red;
            }
            #img1{
    
    
                padding: 10px;
                margin: 50px;
            }
            #img2{
    
    
                padding: 15px;
                margin: 100px;
            }
            #img3{
    
    
                padding-top: 20px;
                margin-left: 150px;
                margin-right: 200px;
            }
        </style>
    </head>
    <body>
        <img id="img1" src="img/123.png" />
        <img id="img2" src="img/psb.jpg" />
        <img id="img3" src="img/psb1.jpg" />
    </body>
</html>

注意:

  • 内边距和外边距的值可以是负数;
  • 在页面上,设置margin-right无效,因为元素默认是左对齐,不管怎么设置元素都是左对齐,所以将元素设置为右对齐就可以看到效果,float:right;
  • 浏览器:元素进行渲染的时候,是从左往右进行渲染;

2. CSS定位

CSS 定位 (Positioning) 属性允许对元素进行定位;

position:固定(fix)、相对(relative)、绝对(absolute)、静态(static);
left:对元素进行左偏移;
top:对元素进行上偏移;
right:对元素进行右偏移;
bottom:对元素进行下偏移;

2.1 固定定位

只在一个位置进行显示;

<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
    <style>
            img{
    
    
                position: fixed;
                width: 350px;
                height: 200px;
                right: 0px;
                bottom: 0px;
            }
            p{
    
    
                font-size: 20px;
            }

        </style>
    </head>
    <body>
        <a href="https://huoying.qq.com/"><img src="img/123.png" /></a>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
        <p>卡卡之家</p>
    </body>
</html>

2.2 相对定位

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动;

<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style>
            #s1{
    
    
                background-color: red;
            }
            #s2{
    
    
                background-color: orange;
                position: relative;
                top: 20px;
                left: 20px;
            }
            #s3{
    
    
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <span id="s1">这是span1</span>
        <span id="s2">这是span2</span>    
        <span id="s3">这是span3</span>    
    </body>
</html>

在这里插入图片描述

原有元素占用的空间不会消失,偏移根据原有位置进行偏移;

2.3 绝对定位

设置绝对定位的元素框从文档流中删除,并相对于其包含块定位,元素原先在正常文档流中所占的空间会关闭;

<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style>
            #s1{
    
    
                background-color: red;
            }
            #s2{
    
    
                background-color: orange;
                position: absolute;
                top: 50px;
                left: 50px;
            }
            #s3{
    
    
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <span id="s1">这是一个span1</span>
        <span id="s2">这是一个span2</span>
        <span id="s3">这是一个span3</span>
    </body>
</html>

在这里插入图片描述

绝对定位并不会在原有位置占用空间,元素的偏移是根据父容器进行偏移;

3. 块级元素和行内元素

display: inline(行内元素)、block(块级元素)、inline-block(行内块级元素);

块级元素:

  • 块级元素前后会带有换行符,占用一整行;

  • 常见的块级元素:div;

行内元素:

  • 行内元素前后没有换行符,只包裹内容;

  • 常见的行内元素:span;

  • margin-top、margin-bottom、padding-top、padding-bottom设置无效;

<html>
    <head>
        <meta charset="UTF-8">
        <title>块级元素和行内元素</title>
        <style>
            div{
    
    
                background-color: blue;
                /*使得div仅包裹内容*/
                display: inline;
                padding-top: 10px;
                margin-top: 100px;
            }
            span{
    
    
                background-color: red;
                margin-top: 100px;
                /*是的span占满整一行*/
                display: block;
            }
        </style>
    </head>
    <body>
        <div>这是一个div</div>
        <span>这是一个span</span>
    </body>
</html>

4.CSS伸缩布局

伸缩布局flex:在响应式开发中可以发挥极大的作用;

如:内容根据浏览器的大小而进行改变;

flex-container:伸缩容器;

main-axis:主轴,元素的排列方向,默认是row(水平方向);

cross-axis:侧轴,默认是column(垂直方向);

flex-item:伸缩元素,会按照主轴的方向进行排列;

在这里插入图片描述

4.1 flex入门案例一

左边是菜单栏(40%),右边是内容栏(60%),高度填充整个屏幕;

<html>
    <head>
        <meta charset="UTF-8">
        <title>伸缩布局入门案例一</title>
        <style>
            html{
    
    
                height: 100%;
            }
            body{
    
    
                height: 100%;
                margin: 0px;
            }
            /*让id为container的容器为伸缩布局*/
            #container{
    
    
                display: flex;
                height: 100%;
            }
            #left{
    
    
                background-color:red;
                width: 40%;
                height: 100%;
            }
            #right{
    
    
                background-color:blue;
                width: 60%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
    </body>
</html>

4.2 flex入门案例二

上边是菜单栏(40%),下边是内容栏(60%),宽度填充整个屏幕;

<html>
    <head>
        <meta charset="UTF-8">
        <title>伸缩布局入门案例二</title>
        <style>
            html{
    
    
                height: 100%;
            }
            body{
    
    
                height: 100%;
                margin: 0px;
            }
            #container{
    
    
                display: flex;
                /*改变主轴方向*/
                flex-direction: column;
                height: 100%;
            }
            #top{
    
    
                background-color: red;
                height: 40%;
            }
            #bottom{
    
    
                background-color: blue;
                height: 60%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="top">top</div>
            <div id="bottom">bottom</div>
        </div>
    </body>
</html>
目录
相关文章
|
12天前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
22 1
|
4月前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
44 5
|
4月前
|
前端开发 JavaScript UED
CSS进阶 - CSS性能优化
【6月更文挑战第17天】**CSS性能优化关乎美观与速度。减少无用和重复样式,简化选择器,避免频繁重绘与回流,预加载关键CSS,以及模块化代码,能提升加载速度和用户体验。通过代码审查、工具辅助、选择器优化、使用transform和opacity、CSS预加载、以及文件拆分和模块化,开发者可应对复杂网页的性能挑战。**
45 2
|
4月前
|
前端开发 JavaScript 开发者
CSS进阶 - CSS Modules与预处理器简介
【6月更文挑战第17天】前端开发中,CSS Modules和预处理器(如Sass、Less)解决了大规模项目中CSS的管理难题,提升代码复用和维护性。CSS Modules提供局部作用域的类名,避免全局冲突,而预处理器扩展CSS功能,使代码更像编程语言。常见问题包括命名冲突和过度嵌套,可通过自动哈希、少嵌套、合理变量规划来解决。结合两者使用,遵循模块化和适度预处理原则,集成到构建工具中,能优化开发流程。这些技术是现代前端不可或缺的工具。
55 2
|
4月前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备,确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术,允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理,可创建高效、易维护的响应式网站。
26 1
|
3月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
3月前
|
前端开发
CSS全部标签属性重置语法
每个浏览器默认的属性不同,像谷歌浏览器不设置的话,默认每个元素是有外边距margin的,有的浏览器列表还会带上序号,有的浏览器就没有。
38 6
|
4月前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
84 2
CSS进阶-CSS选择器高级:伪类与伪元素
|
4月前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量,用于复杂二维布局。然而,隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
56 11
|
4月前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块,简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外,还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局,强调实践和理解核心概念是掌握Flexbox的关键。
50 10