Web网页设计-盒子模型

盒子模型就是把页面中的HTML元素看作一个方形的盒子，也可以理解为一个盛装内容的容器。
每个盒子都由元素的内容、内边距(padding)、边框(border)和外边框(margin)组成。

边框属性
上边框：border-top-style样式
border-top-width宽度
border-top-color颜色（默认为字体颜色）
右边框：border-right-style样式
左边框：border-left-style样式
none：没有边框
solid：单线
double：双线
dashed:虚线
dotted:点线

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

外边框属性
margin #0px浏览器默认0px
可以为负值

背景属性
background-color:背景颜色
background-image: url(img/he.png);背景图片
background-position:指定背景图片出现的元素中的位置
background-attachment:可以将背景图像固定
scroll:滚动
fixed:固定

宽高
width: 100px;
height: 100px;
宽度属性和高度属性仅适用于块级元素，对行内元素无效。
特殊的行内元素img和input除外。

透明度
颜色透明度
rgb
rgba
opacity:使任意颜色呈现透明

圆角
border-radius:水平半径参数/垂直半径参数，将矩形边框四角圆角化，实现圆角效果。
overflow: hidden;溢出

图片边框
border-image-source:指定图片的路径
border-image-slice:指定边框图像顶部、右侧、底部、左侧向内偏移量
border-image-width:指定边框宽度
border-image-outset:指定边框背景向盒子外部延伸的距离
border-image-repeat:重复出现

阴影
box-shadow:h-shadow v-shadow blur spread color outset(默认);

渐变
background-image:linear-gradient(参数值);样式可以实现线性渐变效果。
像素值/百分比：用于定义形状的水平和垂直半径。
circle:指定圆形的径向渐变。
ellipse:指定椭圆形的径向渐变。

径向渐变
background-image: radial-gradient(circle at center,red,#fff,green);
像素值/百分比：用于定义圆心的水平和垂直半径。
circle at center/left/right/bottom

多背景图像
background-image

修剪背景图像
设置背景图像的大小
background-size：属性值1 属性值2；
像素值：设置一个值，第二个值默认为audo。
百分比：按比例缩放（宽的百分比高的百分比）。
cover：按图片最大值全部填充覆盖，全部可视化区域填充满，未必显示全。
contain：显示满，未必填充全。
背景图片起始显示位置
background-origin: border-box;
background-clip: content-box;

元素的类型
块元素：每个块元素都会单独占据一行或多行
特点：不会独自占据一行，不可以设置宽度、高度、对齐等属性
作用：用于控制页面中文本样式
常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<il>等

行内元素中有几个特殊的标签。例如：<img>、<strong>、<b>、<em>、<div>、<span>

<div>标记是一个块容器标记
<span>

p*6+Tab键
快速生成6个<p></p>
p.box.box${hhhh$}*4+Tab键
快速生成4个<p class="box box1">hhhh1</p>
.box.box${h$}*4
快速生成4个<div class="box box1">h1</div>
span{行内$}*4
<span>行内1</span><span>行内2</span><span>行内3</span><span>行内4</span>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{background-color: red;text-align: center;/* display: inline; */}.box{width: 200px;height: 100px;}.box2,.box3{display: inline-block;}.span{width: 100px;height: 100px;}.span1{display: block;}</style></head><body><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><span class="span span1">行内1</span><span class="span span2">行内2</span><span class="span span3">行内3</span><span class="span span4">行内4</span></body>
</html>

相邻块元素垂直外边距的合并（外边距塌陷）
margin-bottom下外边距
margisn-top上外边距

设计一个三角形：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{width: 0px;height: 0px;/* padding: 20px; *//* background-color: red; */border: 50px solid transparent;border-bottom-color: red;}</style></head><body><p></p></body>
</html>

Web网页设计-盒子模型相关推荐

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
JAVA web中的盒子模型
JAVA web中的盒子模型 1.认识盒子模型:所谓盒子模型,就是把HTML页面中的元素,看作是一个个矩形的盒子,也就是一个个盛装内容的容器.每个矩形都由元素的内容.内边距.边框.外边距组成. 例: ...
web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
WEB网页设计前端(前台)开发的常用工具推荐
WEB网页设计前端(前台)开发的常用工具推荐最近我在搞网页设计,包括网站建设的前台界面设计和JS代码的编写,弄一个JS的时候把我给郁闷了,在寻找JS如何通过子节点操作父节点的时候找到了以下免费的网站 ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
文化网页设计成品 web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...

Web网页设计-盒子模型

Web网页设计-盒子模型相关推荐

最新文章

热门文章