CSS高阶

最新推荐文章于 2024-05-02 13:56:30 发布
最新推荐文章于 2024-05-02 13:56:30 发布
阅读量2.1w 收藏
点赞数
分类专栏： web前端 文章标签： CSS高阶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjjndk1314/article/details/79683270
版权

列表属性，设置不显示样式

 ol,ul{
            list-style: none;
        }

文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-transform: capitalize;  首字母大写
            word-spacing: 20px;     单词间距
            letter-spacing: 10px;    字间距
            text-indent: 150px;      首行缩进
            height: 100px;     高
            background-color: aquamarine;
            text-align: center;     ***水平居中
            line-height: 100px;     ***设定行高，使垂直居中
        }
    </style>
</head>
<body>


<div>介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性</div>


<div>hello world hello world hello world hello world hello world hello world hello world</div>
</body>
</html>

display属性

1.none 不显示
2.block 显示块级特性（独占一行）
3.inline 显示内联特性（自己多大占多大）
4.inline-block 兼顾块级和内联的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2,p,a,span{
             width: 100px;
             height: 100px;
        }

         .div2{
             background-color: yellow;
             /*display: inline;*/
             display: none;
         }

        p{
             background-color: red;
            /*display: inline;*/
         }

        span{
             background-color: palevioletred;
             display: inline-block;
         }
        a{
             background-color: green;
             display: inline-block;
         }
        .outer{
            word-spacing: -8px;
        }
    </style>
</head>
<body>


<div class="div2">divvvvv</div>
<p>pppppp</p>


<div class="outer">
    <span>spannnnnn</span>
    <a href="#">click</a>
</div>
</body>
</html>

盒子模型

这里写图片描述
我们设置的盒子大小仅为：content的宽和高；
演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            border: 40px solid rebeccapurple;
            padding: 40px;
            /*margin: 20px;*/
            /*margin-bottom: 40px;*/
            /*margin: 10px 20px 30px 40px;*/
            margin-top: 30px;  #如果父级无border，padding，inline-content，孩子会一直往上找（兄弟间没有这个限制）
            margin-bottom:40px;
        }

        .div2{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /*border: 20px solid red;*/
            /*padding: 5px;*/
            /*margin-top: 40px;*/
        }
        .outer{
            height: 1000px;
            background-color: aquamarine;
            /*border: 1px red solid;*/
            /*padding: 1px;*/
            overflow: hidden;
        }

        .outer2{
            width: 1000px;
            height: 1500px;
            background-color: firebrick;
        }
        body{
            border: 2px solid darkcyan;
            margin: 0px;
        }
    </style>
</head>
<body>

<div class="outer2">

    <div class="outer">

    <div class="div1">hello div1</div>
    <div class="div2"></div>
        <span>uuu</span><span>ooo</span>
</div>
</div>


</body>
</html>

浮动：会脱离文档流

只有float和absolute会脱离文档流
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: beige;
            float: left;  设定向左浮动

        }
         .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
             float: left;    设定向左浮动

        }
         .div3{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;    设定向左浮动
        }
         .div4{
            width: 200px;
            height: 200px;
            background-color: yellow;
           float: left;    设定向左浮动
        }

    </style>
</head>
<body>


<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

</body>
</html>

清除浮动常用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }

        #box1{
            background-color:green;
            width:100px;
            height:100px;
            float: left;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
         #box3{
             background-color:pink;
             height:40px;
         }
     ##### 设定伪类选择器解决
        .clearfix:after{
            content:"";
            display: block;  
            clear: both;
        }
</style>
</head>
<body>

        <div class="container clearfix">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

定位position

1.static 默认方式，直接顺序排布
2.relative 相对于自己原位置定位
3.absolute 绝对定位，脱离文档流，参照物：以已经相对定位过的父类，无则以body为参照
4.fixed ：固定，以窗口为参照
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }

        .div1{
            width: 200px;
            height: 100px;
            background-color: beige;


        }
         .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            /*position: relative;*/
             position: absolute;
            left: 100px;
            top:  100px;


        }
         .div3{
            width: 200px;
            height: 200px;
            background-color: green;
             /*position: relative;*/
             /*top:-100px;*/
             /**/



        }
         .div4{
            width: 200px;
            height: 200px;
            background-color: yellow;

        }

        .outer{
            position: relative;
        }
        .returnTop{
            width: 80px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 5px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>

<div style="height: 200px;background-color: aqua"></div>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>

<div style="height: 2000px;background-color: darkgoldenrod"></div>

<div class="returnTop">返回顶部</div>


</body>
</html>
alwaysPractice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS相关内容（六）
weixin_42823014的博客
03-22 240
（六）CSS 高级 1.1 精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites. CSS 雪碧）。 1.2 精灵图(sprites)的使用 精灵图主要针对于背景图片使用，把多个小背景图片整合到一张大图片中去。 移动背景图片位置可以用background—positi
牛津高阶9999.css
08-13
牛津高阶9999.css
CSS学习教程之高阶篇
cug-jdc的博客
07-14 1304
CSS学习教程之终极篇高阶学习CSS Display(显示)CSS Position(定位)CSS OverflowCSS Float（浮动）CSS 对齐CSS 组合选择符CSS 伪类CSS 伪元素CSS 导航栏CSS 下拉菜单CSS 提示工具CSS 图片廊CSS 图像透明/不透明CSS 媒体类型 高阶学习 CSS Display(显示) display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 隐藏元素 - display:none或visibility:hidde
2024年CSS高阶技巧（1）_css 高阶(1)
最新发布
2401_84164672的博客
05-02 11
1.轻量级：图标文字要比图像要下，字体一旦加载了，图标就可以立刻显示出来，且减少服务器的请求。2.灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等。注：但是字体图标只是对工作中的图标的部分技术的提升和优化，并不能替代精灵。💖💖如果对你有帮助的话希望三连下⭐⭐⭐支持一下博主🌊。首先：博主是👦一个帅气的boy，你可以叫我。3.兼容性:几乎支持所有的浏览器。🖱 ⌨个人主页：安鱼哥的个人主页。
css高阶技巧（2）
zhaochen1127的博客
08-13 2628
css用户界面样式，文本框轮廓线去除，禁止拖拽文本域（resize），vertical-align属性应用，图片底部空白缝隙解决方案 ，如何让溢出的文字以省略号的形式显示，常见的布局技巧
CSS -- 06. CSS高阶技巧总结
Qlz的博客
12-12 390
CSS高阶技巧 1 精灵图(sprites) 1.1 为什么使用精灵图 1.2 精灵图的使用 2 字体图标 2.1 字体图标的产生 2.2 字体图标的优点 2.3 字体图标的下载 2.4 字体图标的引入 2.5 字体图标的追加 3 CSS三角形 4 CSS用户界面样式 4.1 鼠标样式 cursor 4.2 表单的轮廓线 4.3 防止拖拽文本域 resize 5 vertical-align属性应用 5.1 图片、表单和文字对齐 5.2 解决图片底部默认空白缝隙问题 6 溢出的文字省略号显示 6.1 单行文
现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！
Jack, what else can you do besides holding your little darling?
04-07 292
OK，了解了上面最简单的 DEMO 之后，接下来我们尝试稍微进阶一点点。利用 registerPaint 实现一个 circleBgSet 的自定义 CSS 方法，实现类似于这样一个背景图案：首先，我们还是要在 HTML 中，利用 CSS.paintWorklet.addModule('') 注册引入我们的 JavaScript 文件。--size: 64;
牛津高阶英汉双解词典 适用于欧路词典
06-10
牛津高阶英汉双解词典(第9)_V2.0 的mdx文件、mdd文件（适用手机）、css文件（适用电脑） （css即层叠样式表） 使用建议： 安卓（iOS应该也可以吧，各位自己琢磨一下，知乎上都有）：将mdx、mdd装在手机的eudb_en...
牛津高阶英语学习词典第八版+ css美观排版层叠样式表
02-08
《牛津高阶词典》作为全球销量最大的英语词典，是世界上最早的“学习型词典”之一，各版全球销量已逾3500万册。最新版牛津高阶词典，配套美化排版规则css文件，非常好用！
[精通CSS高级Web标准解决方案].CSS.Mastery
03-29
pdf文档，精益求精，初学者也可以看，附代码
css高级应用技巧
08-20
大家共同学习共同进步
CSS高阶知识（常用）
zhengbusi的博客
07-25 790
1.css优先权 2.属性选择器 属性选择器：可以为拥有指定属性的HTML元素设置样式，而不仅限于class 和id  而且只有在规定了&lt;!DOCTYPE&gt;时，IE7和IE8才支持属性选择器。在IE6及更早更低的浏览器版本中，不支持属性选择器。 ①  E[attr] 只使用属性名称，但没有确定任何属性值 ② E[attr="value"]指定属性名称，并自定该属性的属性值 ...
css 高级技巧
qq_37550440的博客
02-08 458
1.元素的显示与隐藏元素 1.display:none/block 不占有位置 2.visibility: hidden/visible 隐藏但占有位置 3.overflow: hidder/visible 超出盒子的部分隐藏 <div class="one"></div> <div class="two"></div> <div class="there"> 你好你好你好你好你好123 </div> <.
经常使用的20个css高级技巧（上）
成熟的小孩的博客
12-15 4899
1. 黑白图像 这段代码会让你的彩色照片显示黑白照片。img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: graysca
CSS高级特性
无区新手的博客
05-08 2238
1.继承性     所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本的颜色和字号。例如定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在&lt;body&gt;标记的子标记。     继承性非常有用，它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将它应用于父元素即可，如下面的代码： ...
21条CSS高级技巧
hehekai的博客
06-12 1319
CSS高级技巧: 21个有用的CSS小技巧，来帮你把CSS技能提高到高级水平 [Github上有8000多个star]。包括Flexbox、REM、:not()选择器、负的nth-child等。使用CSS复位CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：* { box-sizing: border-box...
CSS高级操作
kxindouhao5491的博客
08-23 1470
  1. CSS-------层叠样式表(Cascading Style Sheet) 为什么使用CSS？？ 美化---使网页更美观，更漂亮！   CSS的优势： 内容和表现分离 网页的表现单一，容易修改 丰富的样式，是页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录 ...
css3高级样式
代码世界
05-07 1418
-----CSS3高级样式--- ---------文字描边/填充 text-stroke: --px color; 描边宽度 颜色 text-fill-color: color; 填充颜色 ---------文字模糊/阴影 text-shadow: --px  --px --px  color , --px  --px --px  color; 水平位置  垂直位置  阴影模糊大
css获取屏幕高
05-27
要获取屏幕高度，可以使用CSS中的`height`属性，如下所示： ```css html, body { height: 100%; } .my-element { height: 100vh; /* 100% of viewport height */ } ``` 其中，`vh`表示视口高度的百分比，`100vh...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值