目录
一, CSS 盒子模型
- 1.1 content(内容区域)
- 1.2 padding(内填充)
- 1.3 border(边框)
- 1.4 margin(外边距)
二, 块级元素, 行内元素和行内块级元素的转换关系
2.1 display:inline 转化为行内元素
2.2 display:block 转化为块级元素
2.3 display:inline-block 转化为行内块级元素
2.4 display:none 隐藏当前的标签
三, 浮动
3.1 浮动定义
3.2 浮动的作用
四, 清除浮动
4.1 给父盒子设置高度
4.2 内墙法
4.3 伪元素清除法
4.4 overflow:hidden
4.5 overflow 溢出
一, CSS 盒子模型
html 文档中的每个元素都被描绘成矩形盒子, 这些矩形盒子通过一个模型来描述其占用空间, 这个模型称为盒子模型.
盒子模型通过四个边界来描述: margin(外边距),border(边框),padding(内填充),content(内容区域), 如图所示:
- <style>
- div {
- background-color: rgb(30, 33, 184);
- width: 300px;
- border: 25px solid green;
- padding: 25px;
- margin: 25px;
- }
- </style>
显示效果: 红色边框实际是没有的
1.1 content(内容区域)
盒子的内容, 显示文本和图像. CSS 中的 width 和 height 属性直接作用的区域.
width: 指的是内容的宽度, 而不是整个盒子真实的宽度.
height: 指的是内容的高度, 而不是整个盒子真实的高度.
1.2 padding(内填充)
padding 即内边距, padding 的区域是有背景颜色的. 且背景颜色和内容区域的颜色一致.
内边距的距离: 边框到内容之间的距离.
1.padding 有四个方向, 所以能够分别描述四个方向的 padding.
2.padding 描述方法分两种:(1) 小属性;(2) 综合属性 (空格隔开)
小属性设置 -- 控制每个方向的宽度
- /* 小属性设置 控制每个方向上的宽度 */
- padding-top: 30px;
- padding-right: 30px;
- padding-left: 30px;
- padding-bottom: 30px;
综合属性设置 -- 用空格隔开, 顺时针方向设置
- /* 综合属性, 用空格隔开 顺时针方向 上右下左 */
- padding: 20px 30px 40px 50px;
没有设置四个值的时候
- /* 只设置了三个值: 上 左右 下 */
- padding: 20px 30px 40px;
- /* 只设置两个值: 上下 左右 */
- padding: 35px 45px;
- /* 只设置一个值: 上下左右 */
- padding: 20px;
一般搭建网站要清除默认的 padding, 但是这样写效率低, 可参考 (CSS-reset 代码 https://segmentfault.com/a/1190000009369872 )
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- </style>
- 1.3 border(边框)
border 是边框的意思, 边框有三要素: 粗细, 线性, 颜色.
值 | 描述
none | 无边框
dotted | 点状虚线边框
dashed | 矩形虚线边框
solid | 实线边框
三要素的特性:
border: 5px solid blue;
如果颜色不写 (blue), 默认是黑色;
如果粗细不写 (5px), 默认是不显示的.
如果只写了线性样式 (solid), 默认上右下左 (顺时针)3px 的宽度, 默认是黑色
- /* 基础 3 要素 */
- border-width: 5px;
- border-style: solid;
- border-color: red;
- /*3 要素进阶 */
- border-width: 5px 10px; /* 上下: 5px 左右: 10px */
- border-style: solid dotted dashed double ; /* 顺时针: 上: 实线边框 右: 点状虚线 下: 矩状虚线 左: 双线 */
- border-color: red green red; /* 上: 红 左右: 绿 下: 红 */
按照方向设置 border 样式
- /* 按照方向去分 */
- /* 上 */
- border-top-width: 10px;
- border-top-color: red;
- border-top-style: solid;
- /* 右 */
- border-right-width: 10px;
- border-right-color: red;
- border-right-style: solid;
- /* 下 */
- border-bottom-width: 10px;
- border-bottom-color: red;
- border-bottom-style: solid;
- /* 左 */
- border-left-width: 10px;
- border-left-color: red;
- border-left-style: solid;
按照方向设置可以设置
border-left: 10px solid red;
设置 border 样式为空
- /* 清除 border*/
- border: none;
- /* 设置一边的 border 没有样式 */
- border-right: none;
- border-top: 0;
- 1.4 margin(外边距)
margin: 外边距, 指的是元素与元素之间的距离.
margin 特性:
margin 的 4 个方向
margin 会改变实际大小, 背景色不会渲染到 margin 区域 这个区域会以空白显示, 但是也属于盒子的一部分
margin 是添自身的, 如果哪个想要改变自己的位置, 就给谁添加 margin HTML 的部分标签自带 margin padding p body ul
margin 垂直方向塌陷问题及解决:
两个兄弟盒子设置垂直方向的 margin 时, 以较大的 margin 值为准, 这种现象称为 "塌陷".
- <head>
- <meta charset="UTF-8">
- <title>margin 的塌陷 </title>
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- .box1{
- width: 300px;
- height: 200px;
- background-color: red;
- margin-bottom: 20px;
- }
- .box2{
- width: 400px;
- height: 300px;
- background-color: green;
- margin-top: 50px;
- }
- </style>
- </head>
这里的 margin-bottom: 20px 没有起作用, 只有下面的 margin-top: 50px 起作用了, 上面的 20 只是嵌到了 50 中所以最终显示效果就是 50px.
解决: 浮动的盒子垂直方向不会塌陷, 可以解决 margin 塌陷问题.
- <head>
- <meta charset="UTF-8">
- <title>margin 的塌陷 </title>
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- .father{
- width: 400px;
- overflow: hidden;
- }
- .box1{
- width: 300px;
- height: 200px;
- background-color: red;
- margin-bottom: 20px;
- float: left;
- }
- .box2{
- width: 400px;
- height: 300px;
- background-color: green;
- margin-top: 50px;
- float: left;
- }
- </style>
- </head>
- <body>
- <div class="father">
- <!--
- 浮动的盒子垂直方向不塌陷
- -->
- <div class="box1"></div>
- <div class="box2"></div>
- </div>
- </body>
水平方向上的 margin 是不会塌陷的.
盒子的水平居中
- /* 水平居中盒子 */
- margin: 0 auto;
- /* 水平居中另一种表示 */
- margin-left: auto;
- margin-right: auto;
二, 块级元素, 行内元素和行内块级元素的转换关系
在 CSS 选择器内, 可以通过 display 属性对块级元素, 行内元素, 行内块元素进行转换, 从而调整显示效果.
display 的功能: 1. 控制 HTML 元素的显示和隐藏 2. 块级元素与行内元素的转换.
2.1 display:inline 转化为行内元素
通过 display:inline 将 div 这种块级元素转化为了行内元素, div 内的内容在一行内显示.
- <style type="text/css">
- .box1{
- display: inline; /* 通过 inline 将块级元素转化为行内元素 */
- width: 200px;
- height: 40px;
- border: 1px solid red;
- }
- <body>
- <div class="box1"> 内容 </div>
- <div class="box1"> 内容 </div>
- </body>
2.2 display:block 转化为块级元素
- <span > 是行内元素, 行内元素的特点就是元素的高度, 宽度及边距不可设置, display:block 转化为块级元素后, span 内的内容分行显示, 且高度, 宽度设置生效.
- <style type="text/css">
- span{
- background-color: yellow;
- width: 100px; /* 给行内元素设置高度宽度是不起作用的 */
- height: 40px;
- display: block; /* block 将行内元素转化为块级元素 */
- }
- <body>
- <span>alex</span>
- <span>alex</span>
- </body>
2.3 display:inline-block 转化为行内块级元素
把 < div > 这个块级元素转化为了行内块级元素. box1 的元素都在一行上; 元素的高度, 宽度等都可设置.
- <style type="text/css">
- .box1{
- display: inline-block; /* 通过 inline-block 将块级元素转化为行内块级元素 */
- width: 200px;
- height: 40px;
- border: 1px solid red;
- }
- </style>
- <body>
- <div class="box1"> 内容 </div>
- <div class="box1"> 内容 </div>
- <div class="box2"> 内容 </div>
- </body>
2.4 display:none 隐藏当前的标签
display:none 隐藏标签不占位置. 在此需要注意和 visibility:hidden 进行区分.
- img{
- width: 300px;
- height: 300px;
- display:none; /* 隐藏当前的标签 不占位置 */
- }
- img{ /* 行内块级元素, 可以设置高度和宽度, 也都在一行内展示 */
- width: 300px;
- height: 300px;
- /*display: none; /* 隐藏当前的标签 不占位置 */*/
- visibility:hidden; /* 隐藏当前的标签 占位置 */
- }
三, 浮动
3.1 浮动定义
将元素从普通的布局排版中拿走, 其他盒子在定位时会当作该元素不存在进行定位, 可以理解为不在一个平面上,
3.2 浮动的作用
使元素脱离文档流, 按照指定的方向发生移动, 遇到父级的边界或者相邻的浮动元素就会停下来.
文档流: 元素在排列的时候有默认开始位置以及他们所占的区域.
浮动的目的: 为了实现指定的布局, 让指定元素定位在指定位置, 并且可以设置浮动后的行级元素的宽高, 最初的设计就是用来实现文字环绕.
浮动的副作用: 会导致父级标签塌陷的问题,
四, 清除浮动
4.1 给父盒子设置高度
4.2 内墙法
在浮动元素最后加一个空的块元素, 且块元素不浮动, 设置其属性为 clear:both, 以此来清除别人对我的浮动影响.
- .clear{
- clear: both;
- }
4.3 伪元素清除法
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- Document
- </title>
- <style>
- .c1{ background-color: red; height: 100px; width:100px; float: left; }
- .c2{ background-color:aqua; height:100px; width: 100px; float: right; }
- .c3{ background-color:pink; height:200px; } .cc{ /* height: 100px; */ }
- .clearfix:after{ /* 以下三句是必须要写的 */ content:''; display: block; clear: both;
- }
- </style>
- </head>
- <body>
- <div class="cc clearfix">
- <div class="c1">
- </div>
- <div class="c2">
- </div>
- </div>
- <div class="c3">
- </div>
- </body>
- </HTML>
4.4 overflow:hidden
box 是父级元素的属性.
- .box{
- width: 400px;
- overflow: hidden;
- }
4.5 overflow 溢出
overflow 属性规定当内容溢出元素框时发生的事情.
这个属性定义溢出元素内容区的内容会如何处理. 如果值为 scroll, 用户代理会提供一种滚动机制. 可能导致元素放得下也会用滚动条.
- <style type="text/css">
- div{
- width: 300px;
- height: 300px;
- border: 1px solid red;
- overflow: auto; /* 内容变多时出现滚动条 */
- }
- </style>
名称 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
来源: http://www.bubuko.com/infodetail-3655074.html