一，盒子模型
CSS就三个大模块： 盒子模型 、 浮动 、 定位
1.盒子模型
所谓盒子模型：
-
就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
-
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
content(内容width/height)
padding(内边距)
boder(边框)
margin(外边距)
<style>
.con {
width: 200px;
height: 150px;
padding: 10px;
border: 20px solid red;
margin: 30px;
}
</style>
</head>
<body>
<!-- 盒子模型组成部分：
content(内容width/height)
padding(内边距)
boder(边框)
margin(外边距)
-->
<div class="con">十个勤天</div>
<div class="con">做大做强</div>
</body>二，边框
1.边框：border
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
<style>
.con {
width: 200px;
height: 100px;
/* 粗细 边框的样式 边框的颜色 */
border: 10px solid red;
}
.con1,
.con2,
.con3 {
width: 200px;
height: 100px;
margin: 20px;
}
.con1 {
/* 虚线 */
border: 10px dashed red;
}
.con2 {
/* 点线 */
border: 10px dotted blue;
}
.con3 {
/* 双实线 */
border: 10px double yellow;
}
</style>
</head>
<body>
<div class="con">十个勤天</div>
<div class="con1">边框样式1</div>
<div class="con2">边框样式2</div>
<div class="con3">边框样式3</div>
</body>2.边框的四个方向
<style>
.con1,
.con2,
.con3,
.con4 {
width: 200px;
height: 100px;
background-color: pink;
margin: 20px;
}
.con1 {
border-top: 2px solid red;
}
.con2 {
border-right: 2px solid red;
}
.con3 {
border-bottom: 2px solid red;
}
.con4 {
border-left: 2px solid red;
}
</style>
</head>
<body>
<!-- .con${边框$}*4 ,快捷写出下面四行代码 -->
<div class="con1">边框1</div>
<div class="con2">边框2</div>
<div class="con3">边框3</div>
<div class="con4">边框4</div>
</body>3.圆角边框
radius 半径（距离）
允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
border-radius: 左上角 右上角 右下角 左下角;
-
其中每一个值可以为 数值或百分比的形式。
-
技巧： 让一个正方形 变成圆圈
-
border-radius: 50%;
-
以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。
-
而我们这里矩形就只用 用 高度的一半就好了。精确单位。
<style>
.con1,
.con2,
.con3 {
width: 200px;
height: 100px;
background-color: pink;
margin: 20px;
}
.con1 {
/* border-radius: 10px 10px 10px 10px; */
/* 左上 右上 右下 左下*/
/* radius：圆角半径 */
border-radius: 10px;
}
.con2 {
border-radius: 10px 20px 30px 40px;
}
.con3 {
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<!-- .con${边框$}*3 -->
<div class="con1">边框1</div>
<div class="con2">边框2</div>
<div class="con3">边框3</div>
</body>三，边距
1.内边距
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
<style>
.con {
width: 200px;
height: 100px;
background-color: pink;
/* 1个值：上下左右都是20px */
padding: 20px;
/* 2个值：上下 左右 */
padding: 10px 20px;
/* 3个值：上 左右 下 */
padding: 10px 20px 30px;
/* 顺时针 上 右 下 左 */
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="con">十个勤天只能是十个勤天</div>
</body>2.外边距
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
<style>
.con {
width: 200px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div class="con">十个勤天</div>
</body>
3.外边距塌陷
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
/* 给元素设置边框:可以为父元素定义1像素的上边框或上内边距*/
/* border-top: 1px solid red; */
padding-top: 1px;
}
.son {
width: 100px;
height: 100px;
background-color: rgb(191, 241, 162);
/* 外边距塌陷 */
margin-top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">儿子元素</div>
</div>
</body>4.外边距盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
-
必须是块级元素。
-
盒子必须指定了宽度（width）
-
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：.header{ width:960px; margin:0 auto;}
<style>
/* 盒子居中的要素 */
/* 1.必须是块元素 div */
/* 2.版心 内容中心的宽度 */
/* 3.margin：0 auto */
.main {
width: 1000px;
height: 100px;
/* 盒子居中 左右用auto */
margin: 0 auto;
background-color: red;
}
</style>
</head>
<body>
<div class="main">文档的主题内容</div>
</body>
-
文字水平居中是 text-align: center
-
盒子水平居中:左右margin 改为 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */
5.清除外边距
为了更方便地控制网页中元素，制作网页时，可使用如下代码清除元素的默认内外边距：
注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。
<style>
/* 练习时可以用通配符 */
* {
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
.main {
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="main">文档的主题内容</div>
</body>6.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
<style>
div {
width: 200px;
height: 100px;
}
/* 1.不能这么写，给一个元素设margin即可 */
/* 合并时取最大值，30px */
.bro1 {
background-color: blue;
margin-bottom: 20px;
}
.bro2 {
background-color: red;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="bro1"></div>
<div class="bro2"></div>
</body>
7.嵌套的元素外边距合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。
<style>
.father {
width: 400px;
height: 200px;
background-color: red;
margin-top: 10px;
/* 1,给父元素设置1px的上边框或者1px内边距 */
/* border-top: 1px solid red; */
padding-top: 1px;
/* 2.overflow:hidden;溢出隐藏 BFC原理 */
overflow: hidden;
}
.son {
/* 合并时取最大值，20px */
margin-top: 20px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>8.插入图片与背景图片的区别
-
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
-
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 用 background-position */
}
四，盒子大小的计算方式：
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
-
1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值，其让元素维持W3C的标准Box Mode。
-
2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。
-
<style> /*1. 标准盒子模型：width/height + padding +border*/ /* 宽度：200+20+20+30+30 */ /* 2.IE盒子模型、怪异盒子模型 */ /* 宽度：width */ .box { width: 200px; height: 300px; padding: 20px; border: 30px solid red; margin: 40px; /* 标准盒子模型（默认的）原先的 */ box-sizing: content-box; /* IE盒子模型/怪异盒子模型 内容（内边距）盒子变小*/ box-sizing: border-box; } /* 总结： */ </style> </head> <body> <div class="box">box</div> </body>
五，盒子模型的分类
盒模型的分类（最重要的部分） 盒模型分为 ： W3C标准盒子 、IE盒子
1.W3C标准盒子（content-box）：
在这种盒模型下，我们所说的元素的 width ，实际上只包含 content
盒子总宽度 = margin + border + padding + width
2.IE盒子（border-box）：
又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。
在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border
盒子总宽度= margin + width
六，盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
注意:
前两个属性是必须写的。其余的可以省略。
默认是外阴影 (outset) ，不用设置， 想要内阴影设为 inset 。
X轴与Y轴如果有值，就改变了（正值 向右 向下）
<style>
.box {
width: 200px;
height: 300px;
margin: 50px auto;
border: 2px solid #666;
/* 盒子阴影 */
/* box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 */
/* 模糊距离越大越模糊 */
box-shadow: 10px 30px 50px 10px red;
}
</style>
</head>
<body>
<div class="box"></div>
</body><style>
body {
text-align: center;
}
.product {
width: 234px;
margin-top: 10px;
border: 1px solid #666;
/* 往上走的时候给个过渡 */
transition: all 0.5s;
}
.product:hover {
box-shadow: 0 15px 10px rgba(0, 0, 0, .5);
/* 往上走 */
margin-top: -1px;
}
</style>
</head>
<body>
<!-- <div class="box"></div> -->
<img src="img/xiaomi.png" alt="" class="product">
</body>
七， overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible(默认) : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid red;
/* 溢出隐藏 */
overflow: hidden;
/* 自动：当有内容超出时，自动出现滚动条 */
overflow: auto;
/* scroll:不管超出内容否，总是显示滚动条 */
overflow: scroll;
}
</style>
</head>
<body>
<div class="box">十个勤天只能是十个勤天，十个勤天做大做强</div>
</body>
图片溢出
<style>
.box {
width: 700px;
height: 700px;
border: 1px solid red;
/* 针对于图片然后，溢出隐藏 */
overflow: hidden;
border-radius: 30px;
}
.he {
width: 700px;
height: 700px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/xiaohe.jpg" alt="" class="he">
</div>
</body>
扫一扫
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
