怎样连接服务器_东莞软件外包公司_高明公司搜索seo_百度竞价排名医院事件

一、什么是盒子模型

1.概述

HTML中的盒子模型（Box Model）是CSS布局的基础概念之一，它描述了如何对文档中的元素进行布局和计算大小。每个盒子模型都包括以下几个部分：

内容（Content）：这是盒子模型的中心，包含了元素的实际内容，比如文本、图片等。内容区域的大小可以通过设置width和height属性来指定。
内边距（Padding）：内边距位于内容区域的外围，将内容与边框隔开。内边距是透明的，其大小可以通过padding属性（包括padding-top、padding-right、padding-bottom、padding-left）来设置。
边框（Border）：边框环绕在内边距和内容之外，是可见的。边框的大小、样式和颜色可以通过border属性（如border-width、border-style、border-color）来设置。
外边距（Margin）：外边距位于边框的外围，是盒子与其他元素之间的空间。外边距是透明的，其大小可以通过margin属性（包括margin-top、margin-right、margin-bottom、margin-left）来设置。外边距还涉及到元素的定位和其他元素之间的相互作用，比如边距合并（Margin Collapsing）等。

2.盒子模型的总宽度和总高度

盒子的总宽度和总高度由内容区域、内边距、边框和外边距共同决定。具体计算方式如下：

总宽度 = 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距
总高度 = 上外边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下外边距

3.IE盒子模型（怪异模式）与标准盒子模型

需要注意的是，早期的Internet Explorer浏览器实现了一个不同的盒子模型，即IE盒子模型（有时也称为怪异模式）。在这个模型中，元素的width和height属性只包括内容区域，而不包括内边距、边框和外边距。不过，现代的浏览器默认使用标准的盒子模型，即width和height属性包括了内容、内边距和边框，但不包括外边距。

如果你需要在标准模式下模拟IE盒子模型的行为，可以通过设置CSS属性box-sizing: border-box;来实现。这样，元素的width和height属性就会包括内容、内边距和边框，但不包括外边距

二、边框

border

1.边框的属性

1.1border-color

属性	说明
border-top-color	上边框颜色
border-bottom-color	下边框颜色
border-left-color	左边框颜色
border-right-color	右边框颜色
border-color:颜色1 颜色2；	上下边框为颜色1，左右边框为颜色2
border-color:颜色1 颜色2 颜色3 ；	上边框为颜色1，左右边框为颜色2，下边框为颜色3
border-color：颜色1 颜色2 颜色3 颜色4；	颜色顺序：上、右、下、左
bordder-color:颜色;	所有边框同色

如果背景是白色，则可以通过设置边框颜色为白色#fff实现隐藏效果

1.2border-width

边框宽度

thin、medium、thick、具体像素值

1.3border-style

边框样式

dashed:虚线

solid：实线

dotted：圆点虚线

double：两条线

2.border简写

#语法（顺序不是固定的）
border:边框粗细 线条样式 颜色；
如：
border：1px solid red；

三、外边距

margin：border和外面的距离

1.margin属性

margin-top
margin-bottom
margin-left
margin-right
margin 个数归规律同border-color

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03margin外边距</title><style>p{border: 1px solid red;margin-top: 30px;  /*距离上面的距离*/margin-left: 30px; /*距离左边的距离*/margin-right: 30px;margin-bottom: 100px;}</style>
</head>
<body><p>厉害了，美国失业率还在增加</p><h1>厉害了</h1>
</body>
</html>

2.margin简写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03margin外边距</title><style>p{border: 1px solid red;/* 写一个：表示上下左右写两个：表示上下和左右写三个：表示上，左右和下写四个：表示上右下左*/margin: 50px 30px 0px 0px;}</style>
</head>
<body><p>厉害了，美国失业率还在增加</p><h1>厉害了</h1>
</body>
</html>

3.外边距-网页居中对齐

margin:0px auto;

其中第一个像素表示距离上面的外边距

四、内边距

padding：表示内边距

1.属性

padding-top
padding-bottom
padding-left
padding-right
padding

2.案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>会员登录</title><style>/* 第一步 */*{margin: 0px;padding: 0px;}/* 真个宽位置等 */.box{width: 298px;border: 1px solid #4D7794;margin: 0px auto;}/* 标题 */.box h1{font-size: 16px;background-color: #3A6587;line-height: 35px;color: #fff;text-indent: 1em;}/* 表单 */form{background-color: #C8ECE3;padding: 30px 10px;}div{margin: 10px 0px;}</style>
</head>
<body><div class="box"><h1>会员登录</h1><form action="#" method="get"><div><strong>姓名：</strong><input type="text" name="name" id=""></div><div><strong>邮箱：</strong><input type="text" name="name" id=""></div><div><strong>电话：</strong><input type="text" name="name" id=""></div></form></div>
</body>
</html>

五、盒子模型的尺寸

1.box-sizing

/*
语法：
box-sizing:默认值，盒子的总尺寸 | 盒子的宽度或高度等元素内容的宽度或高度 | 元素继承父元素的盒子模型模式
*/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>08.box-sizing</title><style>div{width: 100px;height: 100px;border: 1px solid #000;padding: 5px;margin: 10px;/* 默认值content-box */box-sizing: border-box;}</style>
</head>
<body><div></div>
</body>
</html>

六、练习

1.练习1

在这里插入图片描述

需求：
整个宽度220px，边框1px 实线 #aacbee，背景颜色：#f5f9fc ，相对于网页居中
标题：有背景图片，字体大小14px，行高30像素
内容项：每一个li高度为30px，padding-left：5px，上边框：1px #cfe2f5 solid，向右边箭头是背景图片
每个li鼠标放在上面字的颜色变为#ff6215 （没有下划线）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>课程导航</title><style>*{margin: 0px;padding:0px;}ul li{list-style: none;}/* 整个div */#course_list{width: 220px;border: 1px #aacbee solid;margin: 0px auto;padding: 0px 0px 10px 0px;background-color: #f5f9fc;}/* 标题 */#course_list .title{color: #1f376d;font-size: 14px;line-height: 30px;padding-left: 25px;background: url(image/title_icon.gif) no-repeat 5px 8px;}/* ul */#course_list ul {padding: 0px 5px;}/* ul li */#course_list ul li{line-height: 30px;background: url(image/submenu.gif) no-repeat right center;border-top: 1px #cfe2f5 solid;}/* a标签 */#course_list ul li a{text-decoration: none;color: #000;}/* 鼠标放上去a标签的样式 */#course_list ul li a:hover{text-decoration: none;color: #ff6215;}</style>
</head>
<body><div id="course_list"><h1 class="title">课程导航</h1><ul><li><a href="#">ACCP 软件工程师</a></li><li><a href="#">BTEST 软件测试工程师</a></li><li><a href="#">ACCP 软件工程师</a></li><li><a href="#">ACCP 软件工程师</a></li><li><a href="#">BTEST 软件测试工程师</a></li><li><a href="#">ACCP 软件工程师</a></li></ul></div>
</body>
</html>

2.练习2

在这里插入图片描述

需求：

整个body的背景颜色：#D5D5D5
整个div的宽度230px，背景颜色：#fff
标题标签：字体大小16px 、加粗、字体颜色为#fff、背景颜色为#000，首航缩进1em，行高35px
dt：左边内边距（padding-left）：27px，行高35px、字体大小14px，加粗
dd：字体大小12px，颜色#666，行高20，下边框：1px #666 dashed；，并且padding-left：27px
dd前面背景图片 0px 2px

*{margin: 0px;padding: 0px;
}body{background-color: #D5D5D5;
}
/* div盒子 */
#product{width: 230px;background-color: #fff;margin: 5px 10px 10px 10px;
}
/* 标题 */
#product h1{font-size: 16px;font-weight: bold;color: #fff;background-color: #000;line-height: 35px;text-indent: 1em;
}
/* dt：副标题 */
#product dt{padding-left: 27px;line-height: 35px;font-size: 14px;font-weight: bold;
}
/* dd */
#product dd {font-size: 12px;color: #666;line-height: 20px;padding-left: 27px;border-bottom: 1px #666 dashed;
}
/* 最后一个dd没有下划线 */
#product dd:last-child{border-bottom: 0px;
}#product dt:nth-of-type(1){background: url(../image2/icon_01.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(2){background: url(../image2/icon_02.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(3){background: url(../image2/icon_03.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(4){background: url(../image2/icon_04.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(5){background: url(../image2/icon_05.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(6){background: url(../image2/icon_06.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(7){background: url(../image2/icon_07.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(8){background: url(../image2/icon_08.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(9){background: url(../image2/icon_09.gif) no-repeat 0px 2px;
}

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>商品分类</title><link href="css/product.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="product"><h1>全部分类</h1><dl><dt>护肤</dt><dd>洁面 化妆水 喷雾 美容液 眼霜<br/>眼部精华 眼膜 面膜 面膜贴<br/>水洗面膜 免洗面膜 精华 精油<br/>凝露 乳液 面霜 日霜 晚霜</dd><dt>彩妆</dt><dd>卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>睫毛膏 眼影 唇彩 腮红 眼线笔<br/>底妆 遮瑕 蜜粉 眉笔 美甲</dd><dt>香氛</dt><dd>男香 女香 小Q装 中性香水</dd><dt>身体护理</dt><dd>洗发 护发 沐浴 身体乳 手足护理<br/>护手霜 纤体 身体精油 颈部护理<br/>个人护理 卫生用品 脱毛</dd><dt>礼盒套装</dt><dd>护肤套装 身体护理套装 彩妆套装 <br/>旅行装 香水套装 男士套装</dd><dt>美容工具</dt><dd>护肤 彩妆 美发 美体 美甲 <br/>美容仪器 其他美容工具</dd><dt>母婴专区</dt><dd>奶粉 尿裤湿巾 母婴洗护</dd><dt>男士专区</dt><dd>洁面 爽肤水 面霜 男香<br/>眼霜 凝胶 乳液 精华 沐浴</dd><dt>食品保健</dt><dd>瘦身类 保健类 美容类 食品类</dd></dl>
</div>
</body>
</html>

3.练习3

在这里插入图片描述

需求：

盒子的宽度是230px，盒子的外边距是30px，边框为1px实线灰色，盒子模型解析方式为border-box
标题背景颜色为线性渐变，文字垂直居中
使用无序列表
制作快报列表
列表的行高26px，左右空隙为26px，鼠标移入列表项文字时候字体颜色变为暗红色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11京东快报</title><style>*{margin: 0px;padding: 0px;}body{margin: 30px;}a{text-decoration: none;color: #000;}/* 盒子 */.box{border: 1px solid #e4e4e4;width: 230px;box-sizing: border-box;}.box h2{padding-left: 10px;line-height: 43px;font-size: 16px;border-bottom: 2px #e8e8e7 dotted;color: #666;font-weight: normal;background: linear-gradient(to bottom,#CECEFF,#FDFDFF);}.box ul {list-style: none;padding-top: 5px;padding-bottom: 5px;}.box ul li{line-height: 26px;padding-left: 10px;padding-right: 10px;}.box ul li a{font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover{color: #B20000;}.box ul li a span{font-weight: bold;}</style>
</head>
<body><div class="box"><h2>京东快报</h2><ul><li><a href="#"><span>[特惠]</span>海飞丝去屑又去油 超清爽</a></li><li><a href="#"><span>[公告]</span>京东公益支持鲁甸新动作</a></li><li><a href="#"><span>[特惠]</span>4688元抢iPhone 6</a></li><li><a href="#"><span>[公告]</span>小米电视携豪礼高调入驻京东</a></li></ul></div>
</body>
</html>

七、圆角边框

1.语法

/*
border-radiuds: 20px 20px 20px 20px
*/
/*这四个属性值按照顺时针排列的*/

2.案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>12.圆角边框</title><style>div{width: 100px;height: 100px;border: 1px solid red;/* 四个角都是圆角，值一样 border-radius: 20px;*//* 写两个值：第一个是左上和右下，第二个是右上和左下 border-radius: 30px 20px;*//* 写三个值：第一个是左上，第二个是右上和左下，第三个是右下 border-radius: 30px 10px 50px;*//* 写四个值：分别是左上、右上、左下和右下 */border-radius: 10px 30px 50px 60px;}</style>
</head>
<body><div></div>
</body>
</html>

3.特殊图形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>特殊图形</title><style>div{margin-bottom: 20px;}/* 圆 */.div1{width: 100px;height: 100px;border-radius: 50%;background-color: red;}/* 上半圆 */.div2{width: 100px;height: 50px;border-radius: 50px 50px 0 0;background-color: red;}/* 下半圆 */.div3{width: 100px;height: 50px;border-radius: 0 0 50px 50px ;background-color: red;}/* 左半圆 */.div4{width: 50px;height: 100px;border-radius: 50px 0 0 50px ;background-color: red;}/* 右半圆 */.div5{width: 50px;height: 100px;border-radius: 0  50px 50px 0 ;background-color: red;}</style>
</head>
<body class="body"><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div>
</body>
</html>

4.练习4

在这里插入图片描述

需求：

body：背景颜色是#eee7e1，字体大小12px

div宽度：260px，背景颜色为#fff
标题：字体大小14px，加粗，颜色#fff，背景颜色为#e9185a，行高35px，padding-left=10px
li：border-bottom：1px #a8a5a5 dashed；行高30px，padding-left=2px
a标签color：#666，无下划线，鼠标放上去颜色#e9185a
数字是放在span标签中的，数字字体颜色是#fff，加粗，padding 3px 8px，圆形，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>15.彩妆列表</title><style>*{margin: 0px;padding: 0;}body{background-color: #EEE7E1;font-size: 12px;}/* div盒子 */#beauty{width: 260px;background-color: #fff;margin: 10px;}/* 标题 */#beauty p{font-size: 14px;font-weight: bold;color: #fff;background-color: #e9185a;height: 35px;line-height: 35px;padding-left: 10px;}/* li */#beauty li{border-bottom: 1px dashed #a8a5a5;height: 30px;line-height: 30px;padding-left: 2px;}#beauty a{color: #666;text-decoration: none;}#beauty a:hover{color: #e9185a;text-decoration: none;}/* span */#beauty ul li a span{/* padding: 3px 8px; *//* 行内元素，可以转换成块级元素(block),也可以将块级变行内元素(inline) ,行内块级元素(inline-block)*/display: inline-block;width: 20px;height: 20px;background-color: #373b3c;border-radius: 50%;color: #fff;font-weight: bold;text-align: center;line-height: 20px;margin-right: 10px;}#beauty a:hover span{background-color: #e9185a;}</style>
</head>
<body><div id="beauty"><p>大家都喜欢买的美容品</p><ul><li><a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a></li><li><a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li><li><a href="#"><span>3</span>OLAY玉兰油多效修护霜 50g</a></li><li><a href="#"><span>4</span>巨型一号丝瓜水320ML</a></li><li><a href="#"><span>5</span>倩碧保湿洁肤水2号 200ml</a></li><li><a href="#"><span>6</span>比度克细肤淡印霜 30g</a></li><li><a href="#"><span>7</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li><li><a href="#"><span>8</span>SK-II护肤精华露 215ml</a></li><li><a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a></li></ul></div></body>
</html>

八、盒子阴影

1.语法

box-shadow: 阴影的类型 x轴位移 y轴位移  阴影模糊半径 阴影的颜色；

阴影类型：默认值为outset（向外扩散）可选inset（向内扩散）

x轴位移：指定阴影水平位移量

y轴位移：指定阴影垂直位移量

阴影模糊半径：向外模糊的模糊范围

阴影的颜色：定义绘制阴影时所使用的颜色

2.案例

在这里插入图片描述

2.练习5

在这里插入图片描述

需求： ul li : display: inline-block;

盒子的宽度为：1000px，水平居中显示 margin:50px auto
标题（热播）文字大小设置为18px，行高40pxr
li列表项内边距为10px，外右边距为5px
li中的标题，字体大小16px，行高30px
中间的文字，字体大小14px，字体颜色#640000，行高20px
最下面蓝色文字，字体大小12px，字体颜色blue，行高20

给图片添加圆角效果
鼠标移入列表时添加阴影
border-color：#dfdfdf，圆角border-radius=10px， box-shadow：0 5px 5px rgba(0,0,0,0.1)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热播</title><style>*{margin: 0;padding: 0px;}.box {width: 1000px;margin: 50px auto;}.box h3{font-size: 18px;line-height: 40px;}.box ul li {display: inline-block;list-style: none;margin-right: 5px;padding: 10px;}li img{border-radius: 10px;}.box li h4{font-size: 16px;color: #4d4d4d;line-height: 35px;}.box li p:nth-of-type(1){color: #640000;font-size: 14px;line-height: 20px;}.box li p:nth-of-type(2){font-size: 12px;color: blue;line-height: 20px;}ul li:hover{border-color: #dfdfdf;border-radius: 10px;box-shadow: 0 0px 5px rgba(0, 0, 0,0.3);background-color: #fff;}</style>
</head>
<body><div class="box"><h3>热播</h3><ul><li><img src="image2/img1.png" alt=""><h4>神武赵子龙</h4><p>怒，林更新不抱网红抱女神</p><p>点击次数：242445次</p></li><li><img src="image2/img2.png" alt=""><h4>旋风十一人</h4><p>胡歌变教练在撩前女友</p><p>点击次数：242445次</p></li><li><img src="image2/img3.png" alt=""><h4>太阳的后裔</h4><p>宋慧乔吃嫩草</p><p>点击次数：242445次</p></li><li><img src="image2/img4.png" alt=""><h4>山海经之赤影传说</h4><p>娜扎张翰再度联手</p><p>点击次数：242445次</p></li></ul></div>
</body>
</html>

怎样连接服务器_东莞软件外包公司_高明公司搜索seo_百度竞价排名医院事件

一、什么是盒子模型

1.概述

2.盒子模型的总宽度和总高度

3.IE盒子模型（怪异模式）与标准盒子模型

二、边框

1.边框的属性

1.1border-color

1.2border-width

1.3border-style

2.border简写

三、外边距

1.margin属性

2.margin简写

3.外边距-网页居中对齐

四、内边距

1.属性

2.案例

五、盒子模型的尺寸

1.box-sizing

六、练习

1.练习1

2.练习2

3.练习3

七、圆角边框

1.语法

2.案例

3.特殊图形

4.练习4

八、盒子阴影

1.语法

2.案例

2.练习5

最新新闻

热搜词