前端Html5/Css3—div盒子模型

文章目录

  • 第六章 盒子模型
    • 6.1 border边框
    • 6.2 border-width粗细
    • 6.3 border-style边框样式
    • 6.4 border简写
    • 6.5 margin外边距
    • 6.6 padding内边距
    • 6.7 盒子模型尺寸
    • 6.8 box-sizing
    • 6.9 border-radius圆角边框
      • 6.9.1 制作圆形
      • 6.9.2 半圆
      • 6.9.3 四分之一圆
    • 6.10 box-shadow盒子阴影

第六章 盒子模型

6.1 border边框

属性说明示例
border-top-color上边框颜色border-top-color:#369;
border-right-color右边框颜色border-right-color:#369;
border-bottom-color下边框颜色border-bottom-color:#fae45b;
border-left-color左边框颜色border-left-color:#efcd56;
border-color四个边框为同一颜色border-color:#eeff34;
上、下边框颜色:#369左、右边框颜色*:*#000border-color:#369 #000;
上边框颜色:#369左、右边框颜色:#000下边框颜色:#f00border-color:#369 #000 #f00;
上、右、下、左边框颜色:#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f;

6.2 border-width粗细

thin/ medium /thick /像素值

div{border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px;border-width:5px 1px 6px;border-width:1px 3px 5px 2px;
}

6.3 border-style边框样式

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

div{border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-style:solid ; border-style:solid dotted;border-style:solid dotted dashed;border-style:solid dotted dashed double;
}

6.4 border简写

div{border:1px solid #3a6587;border: 1px dashed red;
}

6.5 margin外边距

网页居中的必要条件:

  • 块元素
  • 固定宽度
margin{0px,auto} /* 设置居中; */div{margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
}

6.6 padding内边距

div{
padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;
}

6.7 盒子模型尺寸

盒子模型总尺寸=border+padding+margin+内容宽度

6.8 box-sizing

box-sizing:消除 paddingborder边框把盒子撑大的效果,即盒子的大小不变,其设置的边距会往里缩。

div{box-sizing: border-box ;/* content-box:默认值,盒子的总尺度border-box:盒子的宽度或高度等于元素内容的宽度或高度inherit:元素继承父元素的盒子模型模式*/box-sizing:content-box  |  border-box  |  inherit;}

6.9 border-radius圆角边框

div{border-radius: 20px  10px  50px  30px;/*顺时针*/
}

6.9.1 制作圆形

border-radius属性制作圆形的两个要点:

  • 元素的宽度和高度必须相同

  • 圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%

div{width: 100px;height: 100px;border: 4px solid red;border-radius: 50%;}
  • 另:span变圆:用padding撑开

    span{padding: 0 6px;background-color: pink;color: white;border-radius: 50%;}
    

6.9.2 半圆

border-radius属性制作半圆形的两个要点

  • 制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值
  • 制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
/* 右半圆 */
.div_one{width: 50px;height: 100px;border-radius: 0 50px 50px 0;}
/* 左半圆 */
.div_two{width: 50px;height: 100px;border-radius:50px 0 0 50px ;
}

6.9.3 四分之一圆

利用border-radius属性制作扇形遵循“三同,一不同”原则

  • 三同”是元素宽度、高度、圆角半径相同
  • 一不同”是圆角取值位置不同
/* 左上四分之一 */
.div_six{width: 50px;height: 50px;border-radius: 50px 0 0 0;
}
/* 右下四分之一圆 */
.right_boo{width: 50px;height: 50px;border-radius: 0 0 50px 0 ;
}

6.10 box-shadow盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

inset:阴影类型内阴影/从外层的阴影(开始时)改变阴影内侧阴影s

x-offset :X轴位移,指定阴影水平位移量

blur-radius:半径

color:颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

inset:阴影类型内阴影/从外层的阴影(开始时)改变阴影内侧阴影s

x-offset :X轴位移,指定阴影水平位移量

blur-radius:半径

color:颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/878091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

速盾:中小企业网站cdn加速方案?

中小企业网站在如今的互联网时代中起到了非常重要的作用,能够帮助企业提升品牌形象、增加曝光度、吸引潜在客户等。然而,随着用户对网页加载速度的要求越来越高,网站的访问速度成为决定用户是否留在网站的关键因素之一。为了提升网站的访问速…

通过css,js html结合实现第一个页面

html以及 js代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><link …

react调用子组件方法`TS2304: Cannot find name ‘Ref‘`

文章目录 发现宝藏1. 使用正确的 React.Ref 类型2. 使用 React.Ref 或 React.RefObject 作为 ref 类型3. 确保你的 tsconfig.json 设置正确总结 发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。…

【机器学习】独立成分分析的基本概念、应用领域、具体实例(含python代码)以及ICA和PCA的联系和区别

引言 独立成分分析&#xff08;Independent Component Analysis&#xff0c;简称ICA&#xff09;是一种统计方法&#xff0c;用于从多个观察到的混合信号中提取出原始的独立信号源 文章目录 引言一、独立成分分析1.1 定义1.2 独立成分分析的基本原理1.3 独立成分分析的步骤1.3.…

Java重修笔记 第四十三天 Set 集合、HashSet 类

Set 接口 1. 它是无序的&#xff08;添加和取出的顺序不一致&#xff0c;但取出的结果是固定的&#xff09;&#xff0c;没有索引 2. Set 接口也是 Collection 的子接口&#xff0c;所以继承了 Collection 的方法 3. Set 接口的遍历方式有两种&#xff0c;迭代器和增强 for…

计算机专业的真正的就业情况

首先听到计算机行业&#xff0c;大多数人岗位已经饱和&#xff0c;前端已死&#xff0c;程序员35岁危机。但是事实上这些认知都是片面的&#xff0c;今天由我来为大家分析计算机行业的内幕。 疫情过后&#xff0c;过内各种行业都受到了冲击&#xff0c;你们敢说除了体制内的行业…

速盾:高防 CDN 如何提高电子商务网站的性能和用户体验?

随着电子商务的迅速发展&#xff0c;电子商务网站的性能和用户体验成为了至关重要的因素。其中&#xff0c;高防 CDN&#xff08;内容分发网络&#xff09;可以为电子商务网站提供很大的帮助&#xff0c;使其能够提高性能和用户体验。下面将详细介绍高防 CDN 如何实现这一目标。…

RACL: Adversarially Robust Neural Architectures

RACL: 对抗鲁棒网络架构 论文链接&#xff1a;https://arxiv.org/abs/2009.00902v2 Abstract 深度神经网络(DNN)容易受到对抗性攻击。现有的方法致力于开发各种鲁棒训练策略或正则化来更新神经网络的权值。但除了权重之外&#xff0c;网络中的整体结构和信息流是由网络架构明…

模块一(任务3):WDM系统原理解读

一、WDM的概念及波段划分 1、WDM系统概念 WDM系统就像高铁系统一样&#xff0c;这里可以将一根光纤看做是一个多车道的高速铁路。 把不同波长的光信号组合起来&#xff08;也就是复用&#xff09;&#xff0c;进入到同一根光纤中进行传输&#xff0c;在接收端将组合波长的光信…

图形学论文笔记

文章目录 PBD&#xff1a;XPBD&#xff1a;shape matching PBD&#xff1a; 【深入浅出 Nvidia FleX】(1) Position Based Dynamics 最简化的PBD(基于位置的动力学)算法详解-论文原理讲解和太极代码 最简化的PBD(基于位置的动力学)算法详解-论文原理讲解和太极代码 XPBD&…

​经​纬​恒​润​一​面​

1. 请尽可能详细地说明&#xff0c;浏览器有哪些本地存储方式&#xff0c;区别是什么&#xff0c;应用场景是什么&#xff1f;你的回答中不要写出示例代码。 浏览器提供了多种本地存储方式&#xff0c;主要包括以下几种&#xff1a; 1. Cookies 定义&#xff1a;Cookies 是一…

向量数据库Faiss的详细介绍和搭建使用教程

一、Faiss简介 向量数据库Faiss&#xff08;Facebook AI Similarity Search&#xff09;是由Facebook AI研究院&#xff08;FAIR&#xff09;开发的一种高效的相似性搜索和聚类库。Faiss能够快速处理大规模数据&#xff0c;支持在高维空间中进行相似性搜索。它通过将候选向量集…

数据库mysql集群主从、高可用MGR、MHA技术详解

一、安装数据库mysql步骤 环境&#xff1a;红帽7.9系统 安装依赖 yum install cmake gcc-c openssl-devel ncurses-devel.x86_64 libtirpc-devel-1.3.3-8.el9_4.x86_64.rpm rpcgen.x86_64 -y 将下载的MySQL软件包解压并cd到mysql的目录下 [rootmysql-node10 ~]# tar zxf mysq…

数据结构(邓俊辉)学习笔记】优先级队列 08——左式堆:结构

文章目录 1. 第一印象2. 堆之合并3. 奇中求正4. NPL5. 左倾性6. 左展右敛 1. 第一印象 在学习过常规的完全二叉堆之后&#xff0c;我们再来学习优先级队列的另一变种&#xff0c;也就是左式堆。所谓的左式堆&#xff0c;也就是在拓扑形态上更加倾向于向左侧倾斜的一种堆&#…

洛谷刷题(4)

P1089 [NOIP2004 提高组] 津津的储蓄计划 题目描述 津津的零花钱一直都是自己管理。每个月的月初妈妈给津津 300 元钱&#xff0c;津津会预算这个月的花销&#xff0c;并且总能做到实际花销和预算的相同。 为了让津津学习如何储蓄&#xff0c;妈妈提出&#xff0c;津津可以随…

UE5打包iOS运行查看Crash日志

1、查看Crash 1、通过xCode打开设备 2、选择APP打开最近的日志 3、选择崩溃时间点对应的日志 4、选择对应的工程打开 5、就能看到对应的Crash日志 2、为了防止Crash写代码需要注意 1、UObject在Remov

sqlsugar 不映射字段,sqlsugar 忽略字段。sqlsugar 字段改名。

sqlsugar 不映射字段&#xff0c;sqlsugar 忽略字段。 利用特性SugarColumn&#xff0c;将IsIgnore设置为True即可&#xff01; [SugarColumn(IsIgnore true)]//sqlsugar 忽略字段 public decimal MaxTemp { get; set; } 这样Sqlsugar 增删改查数据库的时候自动跳过该字段&…

Nextjs(App Router) 开发记录

最近业余在开发一款智能助理产品&#xff0c;记录开发过程中的一些问题以备忘&#xff0c;也是帮其他人防坑。 主要技术栈 本项目采用了前沿的技术栈来构建一个高性能且可维护的应用。选择了 Nx 作为构建管理和单一代码库解决方案&#xff0c;通过模块化和插件系统来扩展和优…

论文学习—Efficient Multi-label Classification with Many Labels

论文学习&#xff1a;Efficient Multi-label Classification with Many Labels 摘要2. 多标签分类相关工作2.1 Label Transformation1. **降维&#xff08;Dimensionality Reduction&#xff09;**2. **回归模型&#xff08;Regression Model&#xff09;**3. **逆变换&#xf…

【Python机器学习】NLP词中的数学——词袋

我们已经收集了一些词/词条&#xff0c;对这些词进行计数&#xff0c;并将它们归并成词干或者词元&#xff0c;接下来就可以做更多的事情。分析词对一些简单的任务有用&#xff0c;例如得到词用法的一些统计信息&#xff0c;或者进行关键词检索。但如果我们想知道哪些词对于某篇…