HTML5+CSS3(九)-全面详解（学习总结---从入门到深化）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
CSS 盒子模型(Box Model)
概念
所有HTML元素可以看作盒子在CSS中"box model"这一术语是 用来设计和布局时使用 CSS盒模型本质上是一个盒子封装周围的HTML元素它包括 外边距margin边框border内边距padding和实 际内容content
如果把盒子模型看作是一个生活中的快递那么内容部分等同于你 买的实物内边距等同于快递盒子中的泡沫边框等同于快递盒 子外边距等同于两个快递盒子之间的距离
<div></div>div{
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid red;
margin: 10px;
background: green;
}盒子模型分类
学习效果反馈
1.下列盒子模型元素描述正确的是外边距margin,边框border,内边距padding,和实 际内容content
盒子模型之内容区域Content
W3C盒子模型(标准盒模型)
Content内容区域
Content内容区域包含宽度width和高度height两个属性 块级元素默认宽度为100%行内元素默认宽度是由内容撑开不管 块级元素还是行内元素默认高度都是由内容撑开 块级元素可以设置宽高属性行内元素设置宽高属性不生效 宽度width和高度height可以取值为像素px和百分比 %
1.下列设置一个盒子大小为宽度100px*高度100px{width:100px;height:100px;}
盒子模型之内边距Padding
定义
CSS padding填充是一个简写属性定义元素边框与元素内容 之间的空间即上下左右的内边距
可能的值
单边内边距属性
在CSS中它可以指定不同的侧面不同的填充
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;分别代表
简写属性
为了缩短代码它可以在一个属性中指定的所有填充属性 这就是所谓的简写属性。所有的填充属性的简写属性是 padding Padding属性可以有一到四个值
padding:25px 50px 75px 100px; // 顺序上 右 下 左
padding:25px 50px 75px; // 顺序上 (左右) 下
padding:25px 50px; // 顺序上下 左右
padding:25px; // 顺序所有方向Padding需要注意的问题
padding会撑大容器
应用场景
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</body><style>
.nav>li{
float: left;
padding: 20px 30px;
background-color: #1D1E22;
}
.nav a{
color: #fff;
font-size: 14px;
}
</style>学习效果反馈
1.设置一个盒子内边距为上下10px左右15px{padding:10px 15px;}
盒子模型之边框Border
定义
CSS边框属性允许你指定一个元素边框的样式和颜色
边框样式
边框样式属性指定要显示什么样的边界
border-style属性用来定义边框的样式
border-style 值
边框宽度
您可以通过 border-width 属性为边框指定宽度
.one{
border-style:solid;
border-width:5px;
}边框颜色
border-color属性用于设置边框的颜色
.one{
border-style:solid;
border-color: red;
}
边框单独设置各边
在CSS中可以指定不同的侧面不同的边框
p{
border-top: 1px solid red;
border-bottom: 1px solid red;
border-right: 1px solid red;
border-left: 1px solid red;
}边框简写属性
你也可以在一个属性中设置边框 你可以在 border 属性中设置
border-width
border-style (required)
border-color
p{
border:5px solid red;
}border-style属性可以有1-4个值
border-style:dotted solid double dashed; //顺序上 右 下 左
border-style:dotted solid double; // 顺序上 (左右) 下
border-style:dotted solid; // 顺序上下 左右
border-style:dotted; // 顺序所有方向学习效果反馈
1.设置一个盒子边框为2px实线红色{border:2px solid red;}
盒子模型之外边距
定义
CSS margin(外边距)属性定义元素周围的空间
取值
单边外边距属性
在CSS中它可以指定不同的侧面不同的边距
div{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}简写属性
为了缩短代码有可能使用一个属性中margin指定的所有边距属性
所有边距属性的简写属性是 margin
div{
margin:100px 50px;
}margin属性可以有一到四个值
margin:25px 50px 75px 100px; // 顺序上 右 下 左
margin:25px 50px 75px; // 顺序上 (左右) 下
margin:25px 50px; // 顺序上下 左右
margin:25px; // 顺序所有方向margin需要注意的问题
外边距合并问题
垂直方向上外边距相撞时取较大值
<div class="one"></div>
<div class="two"></div><style>
.one,.two{
width: 200px;
height: 200px;
}
.one{
background-color: red;
margin-bottom: 50px;
}
.two{
background-color: blueviolet;
margin-top: 100px;
}
</style>应用场景
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body><style>
.box {
width: 1240px;
margin: 0 auto;
}
.box>div {
width: 303px;
height: 375px;
background-color: red;
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
.box>div:nth-child(4n) {
margin-right: 0;
}
</style>学习效果反馈
1.设置一个容器宽度为1000px并且在网页中左右居中{width:1000px;margin:0 auto;}
怪异盒模型
怪异盒模型(IE盒子模型)
在该模式下浏览器的 width 属性不是内容的宽度而是内容、内
边距和边框的宽度的总和即在怪异模式下的盒模型盒子的
content宽度+内边距padding+边框border宽度=我们设置的
width(height也是如此)盒子总宽度/高度=width/height + marginBox-sizing
CSS3指定盒子模型种类
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
box-sizing: content-box; 宽度和高度分别应用到元素的内容框。在宽度和高 度之外绘制元素的内边距和边框
box-sizing: border-box; 为元素设定的宽度和高度决定了元素的边框盒。就 是说为元素指定的任何内边距和边框都将在已设定的宽度和高度 内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才 能得到内容的宽度和高度
即 box-sizing 属性可以指定盒子模型种类content-box指定盒子模型 为W3C标准盒模型border-box为怪异盒模型
学习效果反馈
1.下列代码设置结果元素总宽度为多少
.box{ width:100px; height:100px; border:1px solid red; padding:10px; margin:10px; box-sizing:border-box; }120*120
弹性盒模型flex box
定义
弹性盒子是 CSS3 的一种新的布局模式 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时 确保元素拥有恰当的行为的布局方式 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容 器中的子元素进行排列、对齐和分配空白空间
CSS3弹性盒内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
父元素上的属性
display 属性
flex-direction属性
定义
flex-direction 属性指定了弹性子元素在父容器中的位置
语法
flex-direction: row | row-reverse | column |
column-reverse
.flex-container {
display: flex;
flex-direction: column;
width: 400px;
height: 250px;
background-color: lightgrey;
}justify-content 属性
定义
内容对齐justify-content属性应用在弹性容器上把弹性项沿 着弹性容器的主轴线main axis对齐
语法
justify-content: flex-start | flex-end |
center | space-between | space-around
.flex-container {
display: flex;
justify-content: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}align-items 属性
定义
align-items 设置或检索弹性盒子元素在侧轴纵轴方向上的对齐方式
语法
align-items: flex-start | flex-end | center1、flex-start 弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴起始边界
2、flex-end 弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴结束边界
3、center 弹性盒子元素在该行的侧轴纵轴上居中放置。如果该行的尺寸小于弹性盒子元素的 尺寸则会向两个方向溢出相同的长度
子元素上的属性
flex-grow
flex-grow 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
默认为0即如果存在剩余空间也不放大 如果只有一个子元素设置那么按扩展因子转化的百分比对其分配 剩余空间。0.1即10%1即100%超出按100%
<div class="flex-container">
<div class="flex-item1">flex item 1</div>
<div class="flex-item2">flex item 2</div>
<div class="flex-item3">flex item 3</div>
</div>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: gold;
}
.flex-item1 {
height: 150px;
background-color: red;
flex-grow: 1;
}
.flex-item2 {
height: 150px;
background-color: green;
flex-grow: 2;
}
.flex-item3 {
height: 150px;
background-color: blue;
flex-grow: 1;
}
</style>学习效果反馈
1.在弹性盒子模型中一个元素块上下左右居中如何实现{justify-content:center;align-items:center;}
浏览器内核
浏览器最重要或者说核心的部分是“Rendering Engine”可大概译 为“渲染引擎”不过我们一般习惯将之称为“浏览器内核”。负责对网 页语法的解释并渲染显示网页。 渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 不同的浏览器内核对网页编写语法的解释也有不同因此同一网页 在不同的内核的浏览器里的渲染显示效果也可能不同 一些较新的css3特性需要添加以上前缀兼容每个浏览器
<div class="root">
<div class="box"></div>
<div class="box"></div>
</div>
<style>
.root{
display: flex;
}
.box{
flex: 1;
-ms-flex: 1;
-moz-flex:1;
-webkit-flex:1;
}
</style>
学习效果反馈
1.下列哪个是Chrome浏览器前缀-webkit-