2021-11-15日报 盒子圆角，阴影与浮动

最新推荐文章于 2024-06-26 20:35:26 发布
最新推荐文章于 2024-06-26 20:35:26 发布
阅读量354 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61556597/article/details/121345070
版权

盒子的布局，影子与圆角

  1. 温习盒子布局
  2. li去掉圆点: list-style:none
  3. 盒子圆角:border-radius:10px 数值越大圆角越明显.圆盒子:使属性值为方盒子边长a/2 。圆角矩形属性值为高h/2 有border-top-left以此类推 ，值可以是百分比(百分之宽高)。
  4. 盒子阴影 box-shadow:h-shadow v-shadowblurspreadcolorinset。
  5. 文字阴影 text-shadow

浮动

  1. 网页传统布局:标准流，浮动，定位
  2. float:none/left/right
  3. 浮动的特性:浮动元素会脱离标准流，原先的位置会被其他盒子占有，浮动的盒子有行内块元素的属性，默认继承父元素的宽高
m0_61556597
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
中软Day04——CSS基础（盒子模型、浮动、定位）
qq_43542290的博客
11-20 608
中软Day04 盒子模型（css重点） 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 css三个大模块：盒子模型，浮动，定位 网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎样运输，让消费者...
background-postion定位与图片结合实现圆角效果
09-25
下面我们将深入探讨 `background-position` 的工作原理以及如何与图片结合来实现圆角效果。 首先，`background-position` 的默认值是 `0% 0%`，这意味着背景图像的左上角将与元素的左上角对齐。在CSS中，你可以使用...
2021-10-24
fomie的博客
10-24 566
目录 JS相关： 5 （1） 闭包 5 （2） 说一下JS中的原型链的理解？ 5 （3）说一下JS继承（含ES6的）–或者人家这样问有两个类A和B,B怎么继承A？ 6 （3） 说一下JS原生事件如何绑定 7 （4） 说一下JS原生常用dom操作方法？ 8 （6） (了解)JS设计模式有哪些(单例模式观察者模式等) 8 （7） 说一下你对JS面像对象的理解 9 （8） 说一下JS数组常用方法（至少6个） 9 （9） 说一下JS数组内置遍历方法有哪些和区别 9 （10） 说一下JS作用域和作用域链 10 （11
CSS(二) 三大特性、盒子模型、浮动
qq_44285582的博客
06-26 889
三大特性(层叠、继承、优先级)、盒子模型、浮动
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
xiao廸要飞
07-26 816
文章目录1. 盒子模型（CSS重点）1.1 看透网页布局的本质1.2 盒子模型（Box Model）1.3 盒子边框（border）1.3.1 边框综合设置1.3.2 example011.3.3 盒子边框写法总结表1.3.3.1 example021.3.4 表格的细线边框1.3.4.1 example031.4 内边距（padding）1.4.1 内边距：1.4.2 设置1.4.2.1 example041.4.2.2 example051.4.3 课堂案例： 新浪导航1.4.4 内盒尺寸计算（元素
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
小白入门之HTML--第五章 块状元素,行内元素,盒子模型
随心笔记
07-08 739
1.本章面试题 1.1 块状元素和行内元素的区别 1.2 盒子模型包含哪些属性 2. 知识点 2.1 上一章内容回顾 ​ 上一章我们讲解了字体文本样式，和背景样式。 2.2 本章内容重点 ​ 本章讲解块状元素，行内元素，以及盒子模型的相关内容。 3. 具体内容 3.1 块状元素和行内元素 ​ 文档<body>部分出现的元素，它们可以被分为块级元素和行内元素。块级元素...
2019年6月20日工作总结---CSS篇
weixin_42246997的博客
06-23 1081
1、：webkit-scrollbar 自定义滚动条的样式（缺陷对Firefox和IE不支持） 实例： 属性： ::-webkit-scrollbar 解决了把bar本身的背景。它通常由其他元素覆盖 ::-webkit-scrollbar-button 解决滚动条上的方向按钮 ::-webkit-scrollbar-track ...
前端面试笔记随笔---kalrry
kalrry
04-05 8929
面试笔记---kalrry第一部分：HTML5+CSS31、父元素和子元素宽高不固定，如何实现水平垂直居中2、分别实现骰子中的'一点' 和 '三点' 的布局。3、简述选择器~和+的区别。4、简述box-sizing的有效值以及所对应的盒模型规则。**5、flex中元素的margin是否会合并？**6、简述align-items和align-content的区别。7、简述data:属性的用法（如何设置，如何获取），有何优势？8、简述 title与h1的区别，b与strong的区别，i与em的区别。9、什么是标
2020-12-17
zhzijun的博客
12-17 1253
考前知识点复习 css考点 1.让一个小div在大div中水平垂直居中的方法 使用 margin:0 auto; 进行水平定位 .parent{ width:300px; height:200px; border:1px solid red; position:relative; } .child{ width:100px; height:100px; border:1px solide violet; position:absolute;
swift-可以创建一个带有圆角和阴影的uiview
08-15
在Swift编程中，创建一个带有圆角和阴影的UIView是一个常见的需求，这通常涉及到自定义视图的外观，以提供更美观的用户界面。在iOS应用开发中，我们可以利用UIKit框架提供的API来实现这一功能。以下就是如何在Swift...
Android-LCardView-卡片布局可设置阴影颜色透明度圆角大小阴影宽度
08-12
在标题“Android-LCardView-卡片布局可设置阴影颜色透明度圆角大小阴影宽度”和描述“LCardView - 卡片布局，可设置阴影颜色，透明度，圆角大小，阴影宽度”中，主要涉及的是一个自定义的CardView实现，名为...
优质资料（2021-2022年收藏）数控加工工艺分析与制定大作业指导书.doc
10-11
【数控加工工艺分析与制定】 数控加工工艺是现代制造业中不可或缺的一部分，尤其在2021-2022年的技术发展中，它的重要性更加凸显。本篇指导书旨在帮助学生掌握数控加工工艺的分析和制定方法，以应对各种类型的零件...
行业文档-设计装置-圆角书本.zip
08-30
《圆角书本》设计装置相关知识详解 在设计领域，尤其是出版和印刷行业，书本的形态设计是至关重要的。圆角书本作为一种独特的设计风格，不仅在视觉上给人以柔和、舒适的感官体验，还能增加书籍的耐用性和独特性。本...
开发教程文档.docx
08-14
1. Java简介 Java是一门由Sun Microsystems公司于1995年推出的高级编程语言。它具有跨平台的特性，能够在多种操作系统（如Windows、Mac OS和各种Unix版本）上运行。Java的最大特点是“一次编写，到处运行”，这得益于Java虚拟机（JVM）的存在。 2. 环境搭建 在开始Java编程之前，需要先搭建开发环境。你需要安装Java开发工具包（JDK）和一个集成开发环境（IDE），比如IntelliJ IDEA或Eclipse。JDK是Java开发的核心，包括了编译器和标准类库，而IDE则为你提供了一个方便的开发界面。 3. 基本语法 学习Java的第一步是掌握它的基本语法。你需要了解如何定义变量、使用基本数据类型、控制程序流程（如条件语句和循环语句）以及如何定义和使用函数。这些基础知识是编写任何Java程序的基础。 java public class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!
全球车载支付服务行业总体规模、主要企业国内外市场占有率及排名（2024版）.docx
08-14
全球车载支付服务行业总体规模、主要企业国内外市场占有率及排名（2024版）.docx
【独家首发】基于斑点鬣狗优化算法SHO-GMDH的锂电池寿命SOC估计算法研究Matlab实现.rar
最新发布
08-14
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
鲸发卡v11.61发卡系统源码-开心修复版
08-14
鲸发卡系统在发卡圈几乎人人皆知，市面最好发卡系统之一，操作简单界面操作通俗易懂，系统主页UI已进行更换，非市面烂大街首页！ 我们替换了三套最新版模板，详情请看下面图片，市面上所谓的11.61版本就是这，只是改了版本号，新增三套模板。 非常重要的一点是，我们发现此模板使用后，首页首次加在有点慢，原因是首页美化代码的原因，其他页面基本正常，有能力的可以吧图片等资源文件上传到oss等第三方平台 含4套PC端首页模板，含4套手机端首页模板（3套与PC端相同） 修复功能 1、短链接生成，重置 2、客户端新版本UI 3、邀请码无限重复生成(以前的版本后台不?关闭，现在可以了)
CSS3新特性：圆角边框、盒子阴影与文字阴影
今天我们将重点关注圆角边框、盒子阴影以及浮动布局这三个方面。 首先，让我们来看一下圆角边框。在CSS3之前，创建圆角的实现比较复杂，但CSS3通过`border-radius`属性使得这一任务变得简单易行。`border-radius`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值