CSS笔记（三）

已于 2022-04-22 13:14:53 修改
阅读量802 收藏 1
点赞数
分类专栏： CSS 文章标签： css 前端
于 2022-04-18 22:39:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wannatoo128/article/details/124203909
版权

目录

1. 盒子模型

页面布局要学习三大核心：盒子模型、浮动、定位

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子Box。
  2. 利用CSS设置好盒子样式，然后摆放到相应位置。
  3. 往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。

1.2 盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
盒子里的内容
在这里插入图片描述
盒子模型的组成：

  • border(边框)
  • content(内容)
  • padding(内边距)
  • margin(外边距)
    在这里插入图片描述

1.1 边框（border）

border可以设置元素的边框。

  • 边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
  • 语法：border : border-width | | border-style || border-color
属性作用
border-width定义边框粗细，单位是px
border-style边框的样式
border-color边框颜色

1.1.1 border-style（边框类型）和border-color

border-style值意义
none没有边框即忽略所有边框的宽度（默认值）
solid边框为单实线（最为常用的）
dashed边框为虚线
dotted边框为点线
div {
            width: 300px;
            height: 200px;

            border-width: 5px;
            border-style: dashed;
            
            border-color: pink;
        }

1.1.2 边框简写border

边框简写：border: 1px solid red;没有顺序

边框分开写法：
border-top: 1px solid red; 只设定上边框
boder-bottom: 5px bashed pink;只设定下边框

      div {
            width: 300px;
            height: 200px;

            border-top: 5px solid pink;
            border-bottom: 3px dashed red;
            border-left: 2px dotted green;
            border-right: 2px double yellow;

在这里插入图片描述
例子：设定上边框红色，其余边框蓝色。（利用层叠性）

        div {
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            border-top: 5px solid red;
        }

在这里插入图片描述

1.1.3 表格的细线边框 border-collapse（边框合并）

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：border-collapse: collapse;

  • collapse单词是合并的意思
  • border-collapse：collapse;表示相邻边框合并在一起
<style>
        table {
            width: 500px;
            height: 249px;
        }

        table,
        td {
            border: 1px solid pink;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>12</td>
            </tr>
            <tr>
                <td>142</td>
                <td>142</td>
                <td>142</td>
                <td>142</td>
                <td>142</td>
            </tr>
            <tr>
                <td>3797</td>
                <td>3797</td>
                <td>3797</td>
                <td>3797</td>
                <td>3797</td>
            </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述
如果没有 border-collapse: collapse;就会变成单元格td线变粗（没有合并）。

1.1.4 边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

  1. 测量盒子大小的时候，不量边框
  2. 如果测量的时候包含了边框，则需要在设定 width/height 时减去边框宽度

1.2 内边距（padding）⭐

padding属性用于设置内边距，即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding -top上内边距
padding-bottom下内边距

padding简写属性：

值的个数表达意思
padding : 5px;1个值，代表上下左右都有5像素内边距
padding :5px 10px;2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding :5px 10px 20px 30px4个值，上是5像素，右是10像素，下20像素，左是30像素，顺时针

以上四种情况，我们实际开发都会遇到。

1.2.1 padding会影响盒子大小的情况⭐

⭐当我们给盒子指定padding值之后，发生了两件事：

  1. 内容和边框有了距离，增加了内边距。
  2. padding影响了盒子的实际大小
    ⭐也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

💡解决：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

利用padding影响盒子大小（如导航栏）

但是，有时候 padding 影响盒子大小是有好处的，比如我们要做导航：
在这里插入图片描述
因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给 padding 最合适。

案例1：新浪导航栏
<head>
 <style>
        .nav {
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;

        }

        .nav a {
            /* a属于行内元素 此时必须要转换成行内块，这样设置的高度41px才会有效 */
            display: inline-block;
            height: 41px;
            font-size: 12px;
            line-height: 41px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0 20px;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>

在这里插入图片描述

案例2：小米侧边栏（修改）

padding内边距可以撑开盒子，有时候也会让我们去修改宽度（以确保最后盒子的宽度是预期效果）
所以小米侧边栏这个案例，文字距离左侧的距离不应该用text-indent，实际开发使用padding更精确。

<style>
        a {
            display: block;
            background-color: #a5a3a3;
            color: #fff;
            width: 200px;
            height: 40px;
            text-decoration: none;
            text-align: left;
            font-size: 14px;

            line-height: 40px;

            padding-left: 30px;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>

</head>

<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">笔记本 平板</a>
    <a href="#">家电</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">电源 配件</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音箱</a>
    <a href="#">生活 箱包</a>
</body>

在这里插入图片描述

1.2.2 padding不会影响盒子大小的情况

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

<head>
	<style>
        div {
            width: 300px;
            height: 100px;
            background-color: purple;

        }

        div p {
            padding: 30px;
            background-color: skyblue;
        }
    </style>

</head>

<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">笔记本 平板</a>
    <a href="#">家电</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">电源 配件</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音箱</a>
    <a href="#">生活 箱包</a>

    <div>
        <p></p>
    </div>
</body>

p没有设置宽度的情况下（padding不影响盒子大小），因为p是块元素，块元素宽度默认是容器（父级元素）的100%。
在这里插入图片描述
但如果设置了p宽度（padding影响了盒子大小）：

   div p {
            width: 100%;
            padding: 30px;
            background-color: skyblue;
        }

则效果就变成：
在这里插入图片描述

1.3 外边距（margin）

margin（外边距）属性用于设置外边距，即控制盒子和盒子之间的距离

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
margin简写方式代表意义跟padding完全一致

1.3.1 外边距典型应用——块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  1. 盒子必须制定了宽度(width)
  2. 盒子左右的外边距都设置为 auto

语法：

.header {
	width: 960px;
	margin: 0 auto;
}

常见的写法，以下三种都可以：

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

⭐注意： 以上方法是让块级元素居中，行内元素或者行内块元素水平居中：给其父元素添加 text-align: center 即可。

1.3.2 外边距合并

使用 margin 定义块级元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况：

  • 相邻块元素垂直外边距的合并（兄弟上下块元素之间，只会出现垂直的现象）
  • 嵌套块元素垂直外边距的塌陷（父子级之间）
①相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
在这里插入图片描述
解决方案：尽量只给一个盒子添加 margin 值

②嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
在这里插入图片描述

例如：

<head>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述

解决方案：

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加 overflow: hidden
  4. 还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题。后面会进行总结。

解决1：父元素定义边框：

   .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 父元素定义边框 */
            border: 1px solid transparent;
        }

效果：
在这里插入图片描述
解决2：父元素定义上内边距

.father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 父元素定义边框 */
            padding: 1px;
        }

解决3：父元素添加 overflow: hidden

.father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            overflow: hidden;
        }

在这里插入图片描述

加边框和内边距会使盒子变大，而加 overflow: hidden; 并不会使盒子变大。

1.4 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
    padding: 0;
    margin: 0;
}

⭐注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

2. PS

2.1 PS基本操作

因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。

  • 文件➡打开 ：可以打开我们要测量的图片

  • Ctrl+R：可以打开标尺，或者 视图➡标尺

  • 右击标尺，把里面的单位改为像素

  • Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图

  • 按住空格键，鼠标可以变成小手，拖动 PS 视图

  • 用选区拖动 可以测量大小

  • Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

在这里插入图片描述

2.2 PS切图

PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。

  • 图层切图
    最简单的切图方式：移动工具点击图片找到图层➡右击图层 ➡快速导出为PNG

但在很多情况下，我们需要合并图层再导出：

  1. 选中需要的图层：图层菜单➡合并图层（ctrl+e）
  2. 右击➡快速导出为PNG

在这里插入图片描述

  • 切片切图
    利用切片选中图片
    利用切片工具手动划出
    导出选中的图片
    文件菜单➡存储为 web 设备所用的格式➡选择我们要的图片格式➡存储

  • PS插件切图
    Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 “导出 web 所用格式” 以及使用切片工具进行挨个切图的繁琐流程。

官网：Cutterman官网

注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本

3 综合案例——产品模块

分析布局：

在这里插入图片描述

box布局

PS取整个页面底色： #f5f5f5

body {
            background-color: #f5f5f5;
        }

PS测量：W:298px、H:415px、box盒子的背景色：白色（#fff）

.box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级盒子水平居中对齐 */
            margin: 100px auto;
        }

在这里插入图片描述

img布局

图片太大?修改img属性为和盒子一样宽：

.box img {
            width: 100%;
 }

review布局

评价和详情制作
p.review部分：因为这个段落没有width属性，所以 padding 不会撑开盒子的宽度
但是要设置高度，为了div.appraise位置相同。

.review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性，所以 padding 不会撑开盒子的宽度 */
            padding: 0 28px;
            margin-top: 30px;
        }

在这里插入图片描述

appraise布局

div.appraise部分：

.appraise {
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
            margin-top: 20px;
        }

在这里插入图片描述

info布局

.info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

在这里插入图片描述
div.info部分细节：

  1. 竖线 | 有自己的颜色和粗细，将其放到一个盒子em中去。
  2. 盒子与盒子之间的距离用margin
    在这里插入图片描述
   .info em {
            /* 让倾斜的文字不倾斜 */
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
   <div class="info">
            <h4>Redmi AirDosts无线蓝...</h4>
            <em>|</em> <span>99.9元</span>
        </div>

链接补充…

最后

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级盒子水平居中对齐 */
            margin: 100px auto;
        }

        .box img {
            width: 100%;
        }

        .review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性，所以 padding 不会撑开盒子的宽度 */
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
            margin-top: 20px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            /* 让倾斜的文字不倾斜 */
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }

        a {
            color: #333;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/img.jpg" alt="">
        <p class="review"><a href="#">快递牛，整体不错蓝牙可以秒连。红米给力</a></p>
        <div class="appraise">来自于117384232的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDosts无线蓝...</a></h4>
            <em>|</em> <span>99.9元</span>
        </div>
    </div>

</body>

在这里插入图片描述

4 综合案例——快报模块

在这里插入图片描述

box和h3部分

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h4 {
            height: 32px;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            border-bottom: 1px dotted #ccc;
            /* 盒子内部的相对位置改变用padding，没有设置宽，左右不会撑大盒子 */
            padding-left: 15px;
        }

要写：

 * {
            margin: 0;
            padding: 0;
        }

否则标题就会变成：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

快报模块列表制作ul

.box ul li a {
            text-decoration: none;
            font-size: 12px;
            color: #666;
        }
<body>
    <div class="box">
        <h4>品优购快报</h4>
        <!-- ul>li*5>a -->
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

⭐去掉 li 前面的 项目符号（小圆点）

语法：list-style: none;

li {
            list-style: none;
        }

设置li的高度并且垂直居中：

.box ul li {
            height: 23px;
            line-height: 23px;
        }

设置li距离左侧和上侧的距离：

.box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }

鼠标经过有下划线：

.box ul li a:hover {
            text-decoration: underline;
        }

最终效果：
在这里插入图片描述

<head>
    <style>
        /* 如果不加这个就会导致后面h3盒子始终有个上下边距视觉上标题没有垂直居中 */
        /* 而且h3中设置了边框视觉上看上去就会导致标题内容和边框一起，上面有个空白 */
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h4 {
            height: 32px;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            border-bottom: 1px dotted #ccc;
            /* 盒子内部的相对位置改变用padding，没有设置宽，左右不会撑大盒子 */
            padding-left: 15px;
        }

        .box ul li a {
            text-decoration: none;
            font-size: 12px;
            color: #666;

        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
        
        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h4>品优购快报</h4>
        <!-- ul>li*5>a -->
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

5 一些解惑

  1. 布局为啥用不同的盒子，只想用div?
  • 标签都是有语义的，合理的地方用合理的标签。比如产品标题就用 h，大量文字段落就用p
  1. 为啥用那么多类名？
  • 类名就是给每一个盒子起一个名字，就可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。
  1. 到底用 margin 还是 padding ?
  • 大部分情况都可以用，各有优缺，根据实际情况，总有更简单的方法实现。
  1. 自己做没有思路？
  • 布局有很多实现方式，尝试自己做出自己的风格。

6 圆角边框（C3新增）border-radius

  • 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
  • border-radius 属性用于设置元素的外边框圆角。
border-radius: length;
  • radius半径（圆的半径） 原理:(椭）圆与边框的交集形成圆角效果
    在这里插入图片描述

常用圆角边框写法

  1. 参数值可以是数值或百分比的形式
  2. ⭐如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
  3. ⭐如果是一个矩形，设置为高度的一半就可以（圆角矩形）
  4. 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角（顺时针），两个数值是对角相同
  5. 分开写：
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

设置为圆：

  div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border-radius: 150px; */
            border-radius: 50%;
        }

7 盒子阴影（C3新增）box-shadow⭐

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;
值描述
h-shadow必需。水平（horizontal）阴影的位置，允许负值
v-shadow必需。垂直（vertical）阴影的位置，允许负值
blur可选。模糊距离。
spread可选，阴影的尺寸。
color可选，阴影的颜色。
inset可选，将外部阴影（outset）改为内部阴影
  • 模糊距离：影子的虚实
  • 阴影尺寸：影子的大小

⭐⭐注意：

  • 默认的是外阴影（outset），但是不可以在后面写这个单词，否则导致阴影无效，要改为内阴影最后加上inset
  • 盒子阴影不占用空间，不会影响其他盒子排列
  div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
        /* 原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);
        }

8 文字阴影（C3新增）了解

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

text-shadow: h-shadow v-shadow blur color
值描述
h-shadow必需。水平阴影的位置，允许负值
v-shadow必需。垂直阴影的位置，允许负值
blur可选。模糊距离
color可选，阴影的颜色。
p {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
        }

在这里插入图片描述

渊鸳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS样式嵌套
左直拳的马桶_日用桶
09-18 6277
CSS样式嵌套左直拳 如果在一个、里包含有一个链接，如：td class="tdCSS" >a href="penis.htm">长洲宾客人数多a>td>其中TD制订的CSS样式tdCSS对这个链接A是不起作用的。比如说，明明定好了这个TD内的文字多大，什么颜色，现在加了一个〈A〉后，就一切都变了样。亲爱的，要怎么样你才能起作用？一切尽在掌握。写CSS的时候可以这样写：
scss嵌套规则
xylinzi的博客
06-07 1673
1.1、scss嵌套用法编译后得到1.2、父选择器 编译为 例子2 编译为 1.3、属性嵌套 编译后 命名空间也可以包含自己的属性值，例如： 编译为
CSS基础01 - HTML页面嵌套使用CSS的三种方式
weixin_43636084的博客
03-29 895
HTML页面嵌套使用CSS的三种方式
CSS父级子级学习总结
bcbobo21cn的专栏
03-01 7100
CSS 父级子级 http://www.divcss5.com/rumen/r239.shtml 1、认识了解 简单讲CSS父级 CSS子级是相对而言，如一个DIV “A”被另外一个DIV “B”包裹着，这样我们就可以认 为B是A父级。 父级子级或有时把DIV嵌套关系比作父亲儿子关系，这个是为了便于理解将DIV嵌套关系形象比作父级子 级关系叫法。 2、举例说明： DIV CSS 父级子级说...
web前端基础 html5+css3（八.定位与元素的显示隐藏）
weixin_41325924的博客
06-27 490
1.定位 top left right bottom （1）postion:static 静态定位 （2）postion:relative 相对定位 相对定位是相对于它原来的位置来说的（自恋型） 不脱标，继续保留原来的位置 .box1{ position: relative; left:20px; top:100px; width: 200px; height: 200px; background: blue; } .box2{ width: 200px; height: ..
CSS笔记.pdf
07-14
CSS主要分为三种引入方式： 1. **外部样式表**：通过`<link>`标签引用外部CSS文件，例如`<link rel="stylesheet" type="text/css" href="文件路径" />`，这种方式便于管理和复用样式，适用于大型项目。 2. **内部...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
css笔记css笔记css笔记
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
前端三件套css学习笔记分享
最新发布
02-24
前端三件套css学习笔记分享
css课堂笔记前端css课堂笔记
08-05
CSS课堂笔记 本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS基础知识。 一、CSS概念 CSS（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。...
简单学习css组合与CSS嵌套的写法
09-27
网页制作Webjx文章简介：简单学习css组合与CSS嵌套的写法. CSS组合　　你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。　　比如，你有如下的代码：h2 { color: red; }.webjx { col
CSS中解决父子边界重叠问题
m0_53521757的博客
07-01 2342
CSS中解决父子边界重叠问题 什么情况会出现父子边界重叠问题？        子元素设置了margin-top属性传递给了父元素，导致子元素和父元素相邻的垂直外边距发生重叠。 即： CSS样式代码 #div_01{ height: 300px; width: 300px; background-color: antiquewhite; } #div_02{ margin-
CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器
要思考，要努力
04-26 5096
总览1.元素关系2.关系选择器一、元素关系1.元素关系1：父子· 父元素：直接包含子元素的元素叫做父元素· 子元素：直接被父元素包含的元素叫做子元素2.元素关系2：祖先后代 · 祖先元素：直接或间接包含后代元素的元素叫做祖先元素 · 后代元素：直接或间接被祖先元素包含的元素叫做后代元素 3.元素关系3：兄弟 · 兄弟元素：拥有相同父元素的元素叫做兄弟元素 4.举例说明： · 父子关系： div > p1号 div > span2号 p > span1号 · 祖先后代关系：
css基础知识
weixin_45065754的博客
03-19 289
1、盒子模型 盒子模型分为 ： 标准盒子模型 、IE盒子模型 标准盒子模型 盒子宽度（width）= 内容（content）的宽度 总宽度为：盒子宽度（width）+内边距（padding）+边框（border）+ 外边距（margin） IE盒子模型，也叫作怪异盒子模型 盒子宽度（width）= 内容（content）+ 内边距（padding）+边框（border）的宽度 总宽度为：盒子宽度（width）+ 外边距（margin） 2、box-sizing属性 用来控制元素的盒
[HTML] CSS基础教程----解决父子传递的方式，和块元素垂直居中以及cursor的使用
hnspystqxskzlqc的博客
03-30 901
目录 一、解决父子传递 练习一 二、块元素垂直居中 练习二 三、cursor 四、总结 (接上一期知识，咱们继续讲解。) 一、解决父子传递 margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top值会传递给父元素。 解决方式： 一、给父母设置border边框 二、父级设置padding 三、父级触发BFC 1.overflow：hidden; ...
（四）盒子模型之外边距
weixin_47481102的博客
05-12 2672
1.外边距 margin属性用于设置外边距，即控制盒子和盒子之间的距离。 属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 margin简写方式代表的意义跟padding完全一致。 如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
CSS进阶篇——分组和嵌套
老梁的专栏
09-28 528
分组和嵌套可以让代码更易于维护，无论是 HTML 代码还是 CSS 代码。
css样式详解
zhongqiu911的博客
11-24 259
前端书写样式的几种方式（详解） 作为一个前端人员，我们都知道样式对于页面的重要性，所以掌握样式的各种写法是至关重要的，话不多说进入正题吧！！ css样式的使用主要分为3种： 行内样式 头部样式 外部样式 行内样式要尽量少用，不然会造成后期维护困难；头部样式要视情况而定，通常在只此一个页面特有的情况下用；我们要习惯使用外部样式；当然外部样式也可以通过@import来引入，但是我们不推荐。 在使用外部样式的时候，我们要配合类型或者ID名来进行选择哪个标签要进行什么样的样式设置；我们也可以在命名
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值