css进阶

最新推荐文章于 2024-01-16 21:09:06 发布
最新推荐文章于 2024-01-16 21:09:06 发布
阅读量485 收藏 1
点赞数
分类专栏： 前端 文章标签： css进阶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZXCNIUBI/article/details/100020737
版权

文章目录

css选择器

1.盒子模型

1.1边框（border）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css进阶</title>
    <style>
        .box{
            /*border: 1px solid red;*/
            height: 200px;
            width: 200px;
            border-top: 2px solid red;
            border-bottom: 20px double green;
            border-left: 10px dotted blue;
            border-right: 10px dashed red;
        }

    </style>

</head>
<body>
    <div class="box">我是盒子模型</div>
</body>
</html>

在这里插入图片描述
边框就是一个四边形的边框，这里其实很多格式，其实如果想要更多种查一下就好，当然用的最多的就是我注释的那个语句，那个很通用。

1.2内边距（padding）

在这里插入图片描述
首先直观的感受一下什么是内间距，就是一个盒子内部的在里面的间距，尤其注意，这个内间距是先定义一个盒子，然后不是在盒子内部取一部分作为内间距，而是把一个盒子的内部直接拓宽，所以说盒子正常是会拓宽的。所以做页面的时候尽量用外间距来使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css进阶</title>
    <style>
        .box{
            background-color: green;
            height: 200px;
            padding: 200px 10px;
        }
    </style>

</head>
<body>
    <div class="box">我是盒子模型</div>

</body>
</html>

在这里插入图片描述
首先解释一下这个代码，其实padding可以传4个参数，和上面的边框相同，方向是上右下左的顺序，但是如果传两个参数，就默认为上等于下，右等于左，如果传一个参数就是默认都是这一个间距。

1.3外边距（margin）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css进阶</title>
    <style>
        .box{
            background: green;
            height: 200px;
            width: 1000px;
            padding: 0;
            margin-top: 200px;
            margin-left: 20px;
            margin-bottom: 20px;
            /*margin-right: 20px;*/
            border: 1px solid red;
        }
        .flag{
            height: 200px;
            width: 1000px;
            background-color: red;
            margin-top: 50px;
            /*border: 1px solid blue;*/
        }
        .box1{
            height: 100px;
            width: 80px;
            margin-top: 10px;
            background-color: blue;
        }
    </style>

</head>
<body>
    <div class="flag">我是参照物</div>
    <div class="box">
        <div class="box1">
        我是盒子1
        </div>
        我是盒子模型</div>

</body>
</html>

这个和之前的有所不同，主要是因为对于外间距来说，参照物很重要，这里就有几个问题，第一种情况，如果只有两个盒子，都是没有外边框的话，那么假如第一个盒子定义的下边距为50px，第二个盒子的上边距为100px，那么这两个盒子的距离就是100px，他们之间取得是最大值而不是相加的值。第二个问题就是如果存在嵌套盒子的情况，而外面的盒子没有边框的话，那么其实定义这个盒子的整体位置的其实是小盒子，所以为了避免麻烦，尽量在外面的盒子上加上边框，这样出错的概率就会变小很多。

2.浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .box{
            border: 10px solid red;
        }
        .box>.box1{
            width: 100px;
            height: 100px;
            /*float: left;*/
            background-color: green;
        }
        .box>.box2{
            width: 100px;
            height: 100px;
            /*float: left;*/
            background-color: blue;
        }
        .box>.box3{
            width: 100px;
            height: 100px;
            /*float: left;*/
            background-color: #695DC7;
        }
    </style>

</head>
<body>
   <div class="box">
       <div class="box1">我是盒子一</div>
       <div class="box2">我是盒子二</div>
       <div class="box3">我是盒子三</div>
   </div>

</body>
</html>

首先解释一下什么是浮动，浮动就是对一个div盒子来说，浮动会改变盒子正常的文档流，对于浮动最经典的操作就是一列变成一行，上面的代码我是把浮动注释掉了的，就是想看看原来是什么样子的。
在这里插入图片描述
原来就是这个样子的。
当然我把注释放开之后是什么样子的呢。
在这里插入图片描述
你会发现，好像和我们想象的不太一样呀，为啥会这个样子的呢，因为我们说过浮动脱离了正常的文档流，这样的话，对于边框而言就找不到限制边框的东西啦，所以说就变成这个样子了。那我们怎么改这个东西呢，方法有很多，我就写一个最推荐的方法吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .box{
            border: 10px solid red;
        }
        .box>.box1{
            width: 100px;
            height: 100px;
            float: left;
            background-color: green;
        }
        .box>.box2{
            width: 100px;
            height: 100px;
            float: left;
            background-color: blue;
        }
        .box>.box3{
            width: 100px;
            height: 100px;
            float: left;
            background-color: #695DC7;
        }
        .clearfix::after{
            display: block;
            clear: both;
            content: "";
        }
    </style>

</head>
<body>
   <div class="box clearfix">
       <div class="box1">我是盒子一</div>
       <div class="box2">我是盒子二</div>
       <div class="box3">我是盒子三</div>
   </div>

</body>
</html>

这个就是改完的代码，主要就是clearfix，这就是相当于一个class，写完放在标签中就可以，解释一下里面是什么意思，display：block就是让float变成块级元素，其实本来的div应该是块级元素，但是因为加入float之后就不是块级元素了，所以用这个重新变成块级元素，这样边框就有了作用。clear就是字面的意思，全部清空，content就是不填内容，我试过了，如果你在content加入内容，就会在下面在开辟一个小块，然后输出内容。
在这里插入图片描述
你甚至可以通过样式控制来实现这个模块的改写。当然主要是实现行变成块的功能。

3.定位

首先说明几个概念，绝对定位和相对定位，绝对定位是脱离文档流的，相对定位是不脱离文档流的，也就是说相对定位是不影响其他布局的，而相对文档流是影响其他的网页布局的，而我们经常看到的小广告用的是固定定位，其实属于绝对定位。但是这个比较特殊，这个fixed是相对于你的浏览器的，也就是说无论你怎么滑动，都是在你当前页面的哪个固定的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        .box{
            border: 10px solid red;
            width: 1000px;
            height: 1000px;
        }
        .box>.box1{
            width: 100px;
            height: 100px;
            background-color: green;
            position: fixed;
            right: 100px;
            bottom:100px;
        }     
    </style>

</head>
<body>
   <div class="box ">
       <div class="box1">我是盒子一</div>
   </div>

</body>
</html>

在这里插入图片描述
就是这样的，无论你怎么滑动你的鼠标，你都能发现这个绿色的小块还在那个位置。

3.1相对定位（relative）

前面用了一个最通俗易懂的小例子说明了什么是固定定位，现在说的是相对定位，主要还是看效果和代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        .box{
            border: 10px solid red;
            width: 1000px;
            height: 1000px;
        }
        .box>.box1{
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: 100px;
            /*bottom:100px;*/
        }
        .box>.box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
       
    </style>
</head>
<body>
   <div class="box ">
       <div class="box1">我是盒子一</div>
       <div class="box2">我是盒子二</div>
       <!--<div class="box3">我是盒子三</div>-->
   </div>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
上面的是没有使用相对定位的，下面是使用了相对定位的。说明了什么呢？说明了使用了相对定位之后不会改变改变其他的网页布局，也就是说在改编位置前，其实前面还是有一个东西在占有地方。

3.2绝对定位（absolute）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        .box{
            border: 10px solid red;
            width: 1000px;
            height: 1000px;
        }
        .box>.box1{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 100px;
            /*bottom:100px;*/
        }
        .box>.box2{
            width: 100px;
            height: 100px;
            /*float: left;*/
            background-color: blue;
        }
       
    </style>

</head>
<body>
   <div class="box ">
       <div class="box1">我是盒子一</div>
       <div class="box2">我是盒子二</div>
       <!--<div class="box3">我是盒子三</div>-->
   </div>

</body>
</html>

在这里插入图片描述
是这个样子，这里我没有使用浮动，但是他改变了。这就是绝对定位。

3.3使用时候使用法则

其实使用的法则，总结一句话就是父相子绝，就是如果是对于那种div嵌套两个盒子来说，尽量对于父亲盒子要用到相对定位，对于子盒子可以使用绝对定位，这样的话，可以防止盒子因为改变而导致页面出项问题。

托马斯，成
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里内部核心Web前端进阶手册，详解CSS（一，大厂面试必问
2401_83621426的博客
04-06 513
伪类选择器是用来给超级链接的不同状态来设置样式。超级链接的四种不同状态：正常状态、访问过后状态、鼠标放上状态、激活状态。具体如下：| 选择器 | 含义 || — | — || :link | 向未被访问的链接添加样式 || :visited | 向已被访问的链接添加样式 || :hover | 当鼠标悬浮在元素上方时，向元素添加样式 || :active | 鼠标放在元素上面时，点击的一瞬间 |a:link{/* 正常状态 *//* 红 */
CSS进阶指引
09-25
主要介绍了CSS入门指引,其中包括BEM和OOCSS等的代码示例,强烈推荐!需要的朋友可以参考下
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 509
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
CSS（进阶）
specialll的博客
07-20 806
一、CSS进阶         1. CSS单位             （1）绝对单位                 在CSS中，绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界因素影响。绝对单位一般多用于传统平面印刷，而极少用于前端开发。在前端开发中，我们都不会用到绝对单位。             （2）相对单位                 在CSS中，
CSS进阶
i_lovenet的博客
04-10 259
1.行级元素/内联元素 display:inline; feature：内容决定元素所占位置；不可以通过css改变宽高 如：span strong em a del 2.块级元素 display:block; feature：独占一行；可以通过css改变宽高 如：div p ul li ol form address 3.行级块元素 di...
CSS3知识点精学
STATICHIT静砸的博客
12-28 872
CSS知识点精学1，之前学习html+css+JavaScript时比较仓促，基本是过了一遍基础之后，用到什么学什么，难免会漏掉很多细碎的知识点，写界面的时候也不太流畅，然后准备花费几天时间细致的重新学一遍，学了一半就感觉写样式顺畅了很多
CSS进阶学习资源 面试题
03-07
CSS需要注意的事情！面试官98%会问你的问题！没学这些好意思说自己是前端开发？我就是靠这份找到了实习！
CSS进阶书籍 网上基本没有书签，我的有
11-16
1.深入探索 本书以独特的探索方式对CSS设计技术的原理和方法进行讲解，符合自学者的认知特点。 2.得出结论，总结经验 本书通过一系列的动手实验，使读者自己就能够非常自然地得出结论。对各种设计中产能共用的网页...
css进阶笔记，通俗易懂
04-22
css进阶笔记，通俗易懂，后期会持续更新
html+css进阶.md
05-02
html+css进阶.md11
css进阶版欢迎大家学习可称为
最新发布
07-08
css学习
css进阶学习 选择符
10-16
css这种没有程序逻辑的代码中，又能找出什么来说明谁做得更出色呢？下面小编给大家说明如何从css选择符的角度来提高css代码质量。
CSS进阶.md
10-04
CSS进阶.md
cssui:用于css进阶学习
07-06
轻webapp框架blade小钗有幸进入框架组做webapp的框架开发，并且基于框架的业务频道用于生产，各频道遍地开花，取得了不错的成绩，但是，随着业务的快速迭代，框架为满足业务需求做了很多业务的事情，代码中也慢慢...
前端学习第五站——CSS学习进阶篇
qq_59212867的博客
01-31 737
CSS进阶学习篇
一起来掌握CSS的进阶知识吧！
m0_57465286的博客
01-16 839
小白通过自学前端知识记录的笔记，希望对大家入门前端有所帮助。让我们一起畅游前端之路吧!
CSS进阶：HTML5/CSS3（接上篇CSS）
qq_55092103的博客
05-09 367
我们只需要将上述案例中的改成即可实现.SASS 是一款 CSS 预编译器，它定义了一种新的编程语言，为CSS 增加了一些编程的特性，开发者使用这种语言进行编码后，代码需要被编译成 CSS 才能被浏览器理解。SASS 比 CSS 更像一门编程语言，它可以有变量，函数，控制语句、导入、嵌套等高级功能，类似的 CSS 预编译器还有less，Stylus等。提供变量，实现一键替换主题色之类的功能；用嵌套写法减少选择器的重复书写；用混用功能解决代码复用问题；用函数进行复杂的运算；
CSS学习教程之进阶篇
cug-jdc的博客
07-13 393
CSS学习教程之进阶篇CSS进阶学习CSS Id 和 ClassCSS如何创建CSS背景的配置CSS文本格式CSS字体CSS链接CSS列表CSS表格CSS盒子模型CSS边框CSS轮廓CSS外边距CSS填充CSS分组和嵌套选择器CSS尺寸 CSS进阶学习 根据前面对CSS入门学习，我们已经知道了CSS的基本使用方法，后续的进阶学习也是为了让HTML页面的样式能够表现的更完善，更符合前端的审美和视觉效果。 CSS Id 和 Class 如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "cla
CSS进阶指南：复习与实战技巧
本资源是一份专业的CSS复习和学习资料，旨在帮助读者巩固和提升对CSS（层叠样式表）的理解和应用能力。CSS是网页设计中至关重要的技术，它负责控制网页元素的布局、样式和呈现。这份文档涵盖了从基础语法到高级特性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值