CSS学习笔记03

最新推荐文章于 2024-07-09 17:45:40 发布
最新推荐文章于 2024-07-09 17:45:40 发布
阅读量475 收藏
点赞数
文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53983068/article/details/132611102
版权

CSS笔记03

盒子模型

什么是盒子模型

  • 概念：
    • CSS 盒子模型就是在网页设计中经常用到的一种思维模型，是 CSS 布局的基石，主要规定了元素是如何显示的以及元素间的相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、内边距区、边框区和外边距区共四个区域，这就是盒子模型。
  • 组成：
    • margin：外边距区域
    • border：边框区域
    • padding：内边距区域
    • content ：内容区域

在这里插入图片描述

  • 盒子占用空间大小的计算方式：content +padding+border+margin

边框 - border

  • 设置边框：

    • border: 粗细 样式 颜色

  • 下面我们就通过写代码的方式来学习理解什么是边框以及怎样设置边框：

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

    <style>
        /*
        body、h1等标签总有一个默认的外边距
        例如body的默认外边距 - margin: 8px;
        */
        /* 常见操作：初始化，去除默认外边距 */
        body,h2 {
            margin: 0;
        }

        /*
        设置边框 - border: 粗细 样式 颜色
        样式：
            solid - 实线
            dashed - 虚线
         */
        #box {
            width: 300px;
            border: 1px solid red;
        }

        h2 {
            font-size: 16px;
            background-color: red;
            line-height: 50px;
            color: white;
        }

        form {
            background: lightpink;
        }

        span {
            font-size: 14px;
            color: darkred;
        }

        /* 结构伪类选择器 + 后代选择器 */
        .inputs:nth-of-type(1) input {
            border: 3px solid black;
        }

        .inputs:nth-of-type(2) input {
            border: 3px dashed blue;
        }

        .inputs:nth-of-type(3) input {
            border: 3px dashed red;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div class="inputs">
            <span>账号：</span>
            <input type="text">
        </div>
        <div class="inputs">
            <span>密码：</span>
            <input type="text">
        </div>
        <div class="inputs">
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>
  • 查看网页效果：

在这里插入图片描述

内外边距 - padding & margin

  • 内边距padding与外边距margin的设置方式大致相同，这里以外边距margin为例，它共有三种常用的设置方式：

    • margin: 0; - 表示上下左右外边距都为零。
    • margin: 0 auto; - 表示上下外边距都为0，左右外边距都为自动居中对齐（ auto）
      • 注意：使用margin: 0 auto;对元素进行居中操作的前提是该元素必须是块元素（display:block;），且有固定的宽度（如input、button、img等元素，自带宽度可以不用设置其宽度） 。
      • 可以通过对块级元素设置text-align：center;的方式来实现内联元素（如文本、图片）居中
      • margin:0 auto;可以使盒子居中，text-align:center;可以使此盒子内的内联元素居中，故有时需要两者结合使用才能使得盒子及其中的元素一起居中。
    • margin: 0 1px 2px 3px; - 表示上外边距为0，右外边距为1px，下外边距为2px，左外边距为3px（上右下左 --> 顺时针方向）。

  • 下面我们通过写代码的方式来学习理解什么是内外边距以及怎样设置内外边距：

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

    <!-- 外边距margin的妙用：居中元素
    margin: 0; - 上下左右外边距都为零
    margin: 0 auto; - 上下外边距为0，左右外边距为自动居中对齐(auto)
    margin: 0 1px 2px 3px; - 上外边距为0，右外边距为1px，下外边距为2px，左外边距为3px(上右下左 -> 顺时针)
    -->
    <!-- 内边距padding的使用方法与margin大致相同 -->
    <style>

        #box {
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2 {
            font-size: 16px;
            background-color: red;
            line-height: 50px;
            color: white;
            margin: 0;
            padding: 0 115px;
        }

        form {
            background: lightpink;
        }

        .inputs {
            padding: 10px 40px;
        }

        span {
            font-size: 14px;
            color: darkred;
        }

        input {
            border: 1px solid black;
        }

    </style>

</head>
<body>

<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div class="inputs">
            <span>账号：</span>
            <input type="text">
        </div>
        <div class="inputs">
            <span>密码：</span>
            <input type="text">
        </div>
        <div class="inputs">
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>
  • 查看网页效果：

在这里插入图片描述

圆角边框

圆角边框的设置
  • CSS 属性border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 圆角边框 - border-radius:
    border-radius: 20px; - 边框的四个角的圆形半径都是20px
    border-radius: 50px 10px; - 边框的左上角(↖)和右下角(↘)的圆形半径都是50px，边框的右上角(↗)和左下角(↙)都是50px【对角线】
    border-radius: 50px 30px 10px 0; - 边框的左上角(↖)的圆形半径是50px，右上角(↗)是30px，右下角(↘)是10px，左下角(↙)是0【顺时针】
    将正方形的边框变为圆形：当圆角的半径 = 1/2*(content的宽度+左右(上下)padding的宽度之和+border的宽度*2)时，该盒子的边框将由正方形变为圆形
    -->
    <style >
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            margin: 10px;
        }
        #box1 {
            border-radius: 20px;
        }
        #box2 {
            border-radius: 50px 10px;
        }
        #box3 {
            border-radius: 50px 30px 10px 0;
        }
        #box4 {
            border-radius: 60px;
        }
    </style>

</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>

</body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 关于上述圆形边框的理解可以参照下图：

在这里插入图片描述

圆角边框的应用
  • 我们可以利用圆角边框来绘制各种图形，制作圆形的头像等等：
  • 示例：
  • 准备一张正方形的头像图片：

在这里插入图片描述

  • 具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            background: red;
            margin: 50px;
        }

        #box1 {
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
        }

        #box2 {
            width: 50px;
            height: 100px;
            border-radius: 0 50px 50px 0;
        }

        #box3 {
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
        }

        img {
            border-radius: 50px;
            margin: 0 50px;
        }

        span {
            margin: 0 59px;
        }
    </style>

</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="images/ProfilePic.png" alt="ProfilePicture">
<br/>
<span>头像</span>

</body>
</html>
  • 查看网页效果：

在这里插入图片描述

盒子阴影

  • CSS box-shadow属性用于在元素的框架上添加阴影效果。
    • 具体用法如下box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色
  • 示例 - 利用box-shadow实现盒子的阴影效果以及头像图片的发光效果：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <!-- 盒子阴影 - box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色 -->
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            box-shadow: 20px 20px 5px black;
        }
        img {
            display: block;
            margin: 100px auto;
            border-radius: 50px;
            box-shadow: 0 0 100px yellow;
        }
    </style>
<body>

<div></div>

<img src="images/ProfilePic.png" alt="ProfilePicture"/>


</body>
</html>
  • 查看网页效果：

在这里插入图片描述

拓展 - 关于快速搭建网站

  • 我们在设计编写前端页面的时候要避免 “重复造轮子” ，很多复杂的样式自己用 CSS 写起来很繁琐，我们没必要花费大量时间自己去编写。我们可以直接用开源网站上提供的源码或者使用 element-ui 这类网站上的组件来搭建我们的前端页面。

  • 推荐几个网站：

Bald Monkey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记
m0_58761900的博客
09-18 3038
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css学习笔记1
qq_42236791的博客
12-12 912
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
CSS学习笔记目录
wz_1992的博客
05-30 430
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
【CSS学习笔记】
weixin_45037690的博客
08-12 761
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2176
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
css学习笔记之展开列表图标动画
weixin_65808257的博客
04-07 2318
蓝色界面”风格的填充的星图标欢迎下载填充的星矢量图标，“蓝色界面”风格。格式有png、svg、pdf、html代码。可对填充的星图标、符号进行修改、调整大小、修改颜色。今天在这个网站看到了上面类似的效果，然后就想弄一个，然后就有了上面的。
h5+css学习笔记
m0_62410752的博客
03-15 386
个人学习笔记，自己看的
css学习笔记
weixin_45085122的博客
11-13 1345
css
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 201
仅对已定位的元素（）有效，默认值为0，可以为负值。
JS之防抖和节流
喵喵的博客
07-09 591
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
CSS 图标：简化设计，优化用户体验
Lesleyhnj的博客
07-04 438
CSS 图标指的是使用CSS样式来绘制和渲染的各种图标和符号，通常是基于矢量图形的形式。与传统的图像图标相比，CSS 图标具有几个显著的优势：通过CSS创建的图标不依赖于外部图像文件，而是直接通过CSS代码进行绘制，这意味着可以在不增加额外HTTP请求的情况下，直接在网页上展示图标，从而加快页面加载速度。
html&css基础
最新发布
antyuki的博客
07-09 409
/</</</</
使用css做一个旋转的八卦图
weixin_40923558的博客
07-02 384
【代码】使用css做一个旋转的八卦图。
移动端CSS的学习笔记。
01-19
移动端CSS的学习笔记 移动端的CSS学习是移动端开发中非常重要的一部分，因为移动端设备的屏幕尺寸各异，需要对不同尺寸的设备做出相应的适配和响应式布局。在学习移动端CSS的过程中，有一些基础知识和技巧是需要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值