CSS开发常识
- 一般会清除元素自带的外/内边距
* {
padding: 0;
margin: 0;
}
- <img>和<p>之间,即使清除默认的边距,也会有3px的间距,如何解决 --- 块级展示 即可
image {
display: block;
}
- <p>元素里面,不要去嵌套<div>标签
- div容器默认宽度 100% ,没有默认高度(或者说默认高度为0)
- 浏览器默认字体大小是: 16px
默认行高是: 21px
- 文字的垂直居中效果:行高和高度相同即可
- 单位:百分比,是相对父元素而言
- <body>的宽度是100%,但是高度是0,它的高度是依赖 内容 撑起来的
相当于,建高楼,地基(宽度)已打好,至于建多高,全靠你自己
overflow: hidden 解析
- 定义:超出的部分,剪掉
- 其他用途
- 用来清除浮动
- 解决'父子容器'外边距无效问题
- 示例: 新建150*150布局的容器div,放入一张超过150*150px的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{ # 指定宽高
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<div>
<img src="mid-autumnday.jpg" alt="">
</div>
</body>
</html>
- 效果:图片会正常显示,整个div容器会被撑开(容器div的实际像素不变)
- 需求:容器div占多少像素,图片就占多少像素,多余的就切掉!就用到了 overflow:hidden
......
<style>
div{
height: 150px;
width: 150px;
overflow: hidden; # 容器有多大,图片就多大
}
</style>
<body>
<div>
<img src="mid-autumnday.jpg" alt="">
</div>
</body>
</html>
- 注意,此时图片多余的部分被隐藏起来了,而不是说,图片进行了等比例缩放
text-align: center / margin: auto
-
text-align: center 让容器里面的元素相对于'该容器'水平居中(不管对div容器还是对p文本 使用这个属性,都是一样的效果)
-
margin: auto 让容器本身相对于'浏览器窗口'水平居中(容器里面的元素会一起被移动)(把这个属性加在容器上面)
-
实例,文字标题和段落的排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<h1 style="text-align: center"> <!--使标题居中-->
<span style="background-color: black;color: white">千峰教育</span>
</h1>
<div style="width: 600px;margin: auto"> <!--使段落居中-->
<p>
千锋教育_国内IT职业教育良心品牌,专注Java培训,HTML5+WEB前端培训,Python+人工智能培训,Linux云计算培训,全链路UI培训,大数据培训,unity游戏开发,软件测试,PHP,互联网营
</p>
<p>
千锋教育_国内IT职业教育良心品牌,专注Java培训,HTML5+WEB前端培训,Python+人工智能培训,Linux云计算培训,全链路UI培训,大数据培训,unity游戏开发,软件测试,PHP,互联网营
</p>
<p>
千锋教育_国内IT职业教育良心品牌,专注Java培训,HTML5+WEB前端培训,Python+人工智能培训,Linux云计算培训,全链路UI培训,大数据培训,unity游戏开发,软件测试,PHP,互联网营
</p>
</div>
</body>
</html>
css 权重
- 权重顺序.权重计算
- 行内样式(1000) > ID选择器(100) >类选择器(10) >标签选择器(1) > 通用选择器(0)
- 选择器选择的范围越小越精确,优先级就越高
- 示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
color: blue;
}
*{
color: orange;
}
.pp {
color: green;
}
p {
color: red;
}
</style>
</head>
<body>
<p class="pp" id="p1" style="color: slateblue"> # 权重最大
猜猜我是什么颜色
</p>
</body>
</html>
- 示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#news {
list-style: none;
width: 370px;
}
#news li{
height: 40px;
line-height: 40px;
border-bottom: dashed 1px purple;
}
#news li a {
color: gray;
text-decoration: none;
}
#news .last { # 这里若写成'last'是没有效果的
border: none;
}
</style>
</head>
<body>
<ul id="news">
<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 class="last"><a href="">新闻六号</a></li>
</ul>
</body>
</html>
css文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1 {
color: red; /* 字体颜色 */
}
.p2 {
font-family: 华文行楷; /* 字体 */
}
.p3 {
font-size: 26px; /* 文字大小默认16px */
}
.p4 {
font-weight: bold; /* 字体加粗 */
}
.p5 {
font-style: italic; /* 斜体效果 */
}
.p6 {
text-indent: 60px; /* 首行缩进 这种效果也可以使用 margin-left 来做*/
}
.p7 {
text-align: center; /* 居中 */
}
.p8 {
line-height: 180px; /* 行高 */
}
.p9 {
height: 100px;
background-color: gray; /* 水平方向上垂直居中 */
line-height: 100px;
}
.p10 {
text-decoration: underline; /* 下划线 */
}
</style>
</head>
<body>
<ul>
<li class="p1">文字效果一</li>
<li class="p2">文字效果二</li>
<li class="p3">文字效果三</li>
<li class="p4">文字效果四</li>
<li class="p5">文字效果五</li>
<li class="p6">文字效果六</li>
<li class="p7">文字效果七</li>
<li class="p8">文字效果八</li>
<li class="p9">文字效果九</li>
<li class="p10">文字效果十</li>
</ul>
</body>
</html>
- 注意事项: 字体是可以连续选择的
h1 { # 先找华文行楷,找不到就继续找宋体,若有,就不继续找
font-family: 华文行楷, 宋体, 华文中宋;
}
- 实现文字的两端对齐和完全居中对齐
- text-align: justify;
- 使用 line-height 和 text-align:center,实现文本的完全居中
<!DOCTYPE html>
<html>
<head>
<style>
.box2 {
width: 500px;
height: 100px;
background-color: yellow;
line-height: 100px; # 关注之处
text-align: center;
}
</style>
</head>
<body>
<div class="box2">
大家好
</div>
</body>
</html>
- 字符间隔/单词间隔/首行缩进/删除文本样式/字母大小写
- letter-spacing: 字符之间的间距
- word-spacing: 单词之间的间距(若负值,单词之间就交叉了)
- text-indent: 首行缩进
- 介绍单位'em',倍数
<style>
.p1 {
font-size: 16px;
text-indent: 2em; # 上面的两倍,也就是 32px
}
</style>
- text-decoration: none; # 一般用来删除<a>标签的默认样式(下划线)
- text-transform: capitalize; # 单词首字母大写
- lowercase: 全部小写
- uppercase: 全部大写
背景图的使用
- 元素宽高的百分比,是相对于父元素而言,若父元素高度为0
即使子元素高度100%,大小也是0
html元素大小是相对与浏览器窗口而言
- 实例:检查<body>元素,是没有高度的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 100%; # 设置高度
}
</style>
</head>
<body>
</body>
</html>
- 此时,如何使<body>有高度呢,依据概念,父元素<html>设置高度即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body {
height: 100%; # html和body均设置高度
margin: 0; # 删除滚动条
}
</style>
</head>
<body>
</body>
</html>
- 背景图相关css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body {
height: 100%;
margin: 0;
}
body {
# 背景图片默认'平铺'方式无限展开
background-image: url("mid-autumnday.jpg");
# 不重复平铺图片
background-repeat: no-repeat;
# 图片的位置:左右 上下
# background-position: right bottom; 图片位于右下角
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
- 补充
- background-image 与 <img> 在 div 块中的区别
- 当设置一个div区域时,假如div尺寸(宽度和高度)比较小,而<img>包裹的图片比较大时
<image>里面的图片会把 整个div区域撑开,不受 div块区域的束缚
而 background-image 受 div区域的束缚,示例代码
<style>
.d1 {
width: 300px;
height: 300px; # 设定尺寸
background-color: yellow;
background-image: url("pwd.png"); # 不管小图片/大图片,效果都受约束
}
</style>
<div class="d1">
Hello
</div>
- background-repeat 的几个值
- repeat
- repeat-x
- repeat-y
- no-repeat
- background-position 的几个值
- background-position: 20px 20px; # 可以通过调试工具,动态跳转图片的位置
- background-position: 10% 30%; # 相对于'长度'和'宽度'的百分之多少(用得比较少)
- background-position: center center; # 方便排序
- background-size: 设置背景图片的大小
- 实例1,把图片大小设置成和div块一样,铺满整个div块(图片被拉伸,失真了)
<style>
div{
width:300px;
height:400px;
background-color:yellow;
background-image: url('pretty.png');
background-repeat:no-repeat;
background-size: 300px 400px; # 设置成一样
}
</style>
body>
<div>
</div>
</body>
- 注意:这里 background-size: 100% 100%; 也是可以的,一样的效果
- background-size的其他两个值学习
- background-size: cover; 图片会尽量扩大覆盖整个div块,图片多余的部分被裁减掉
- background-size: contain; 图片会'不失真'的适应div块的'高度'和'宽度',但是无法铺满整个div块,会空出多余div块
- 当滚动条时,保持图片显示/被滚动 background-attachment 介绍
- 定义:使图片固定在容器内(占满整个容器)/随着容器滚动
- background-attachment: fixed; 把背景图片固定在'浏览器左上角'
- background-attachment: scroll; 默认值
- 实例1: 正常效果,随着鼠标滚动,图片消失
<style>
.box{
width:300px;
height:3000px;
background-color:yellow;
background-image: url('pretty.png');
background-repeat:no-repeat;
background-attachment: scroll; # 默认效果
}
</style>
<body>
<div class="box">
</div>
</body>
- 实例2: 不管再怎么拖动滚动条,图片不会消失,永远显示在浏览器左上角
<style>
.box{
width:300px;
height:3000px;
background-color:yellow;
background-image: url('pretty.png');
background-repeat:no-repeat;
background-attachment: fixed; # 永远显示
}
</style>
<body>
<div class="box">
</div>
</body>
- 实例3:神奇效果,当把div块移到中间的时候,图片即使fixed,也看不见,为什么?
<style>
.box{
width:300px;
height:3000px;
background-color:yellow;
background-image: url('pretty.png');
background-repeat:no-repeat;
background-attachment: fixed;
margin:0 auto; # 把div块移动到中间
}
</style>
<body>
<div class="box">
</div>
</body>
- 解析: 此时图片还是位于'左上角',但由于div块的移动,图片由于被固定,不会跟随着移动,所以不被显示,还是存在的,只是看不见
改回'scroll'就可以了
- 实例4: 固定两张图片,然后看效果
- 属于第一张的区域,就显示第一张
- 当滚到到第二张的区域,就显示第二张
- 有一种图片被替换掉的效果
<style>
div {
width:300px;
height:1000px;
}
.box1{
background-color:yellow;
background-image: url('pretty.png');
background-repeat:no-repeat;
background-attachment: fixed; # 固定
}
.box2{
background-color:yellow;
background-image: url('handsome.png');
background-repeat:no-repeat;
background-attachment: fixed; # 固定
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
- 实例5:把实例4小改,图片放到中间
<style>
div {
height:760px; # 重复的部分,放到div
background-color:yellow;
background-repeat:no-repeat;
background-size: cover;
background-position:center center;
background-attachment: fixed;
}
.box1{
background-image: url('pretty.png');
}
.box2{
background-image: url('handsome.png');
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
- 实例6: 知乎登录界面,背景图不会被滚掉
<style>
* {
padding: 0;
margin: 0;
}
div{
width:400px;
height:500px;
background-color: darkblue;
margin: auto; # 整体居中,但是紧贴窗口上方
margin-top: 200px; # 与窗口上方拉开边距
}
body{
background-image: url('bg.jpg');
background-attachment: fixed;
}
</style>
<body>
<div></div>
</body>
- 注意事项
- 如果想移动'background-attachment: fixed;'的'背景图'
- margin:0 auto; # 无效果
- background-position:center center; # 有效果
表格
- <table> 表示表格
- tr 表示'行'
- td 表示'单元格'(支持嵌套标签,比如<p>)
- 快速创建表格:包含两行两列,table>tr*2>td*2
- 表格的合并
- colspan: 要合并的'列数'
- rowspan: 要合并的'行数'
- 合并原则: 合并多少列/行,就要删掉被合并的列/行
- 实例:3行3列的改造
<table border="1" width="300">
<tr>
<td>1</td> # 保持原样
<td colspan="2" rowspan="2">2</td>
</tr>
<tr>
<td rowspan="2">4</td>
</tr>
<tr>
<td colspan="2">8</td>
</tr>
</table>
css的语法和引入css的两种方式
- 语法
选择器(符) {
属性:属性值1 属性值2 属性值3;
}
- 外部引用的两种方式
- link(推荐,兼容性好)
<link rel="stylesheet" href="kinds.css">
- import
<style>
@import url('kinds.css');
</style>
伪类选择器(和标签相关)
- 引入场景:改变<a>标签的默认颜色
<style>
a {
background-color: red; # 如果这么写,那么该标签永远是红色,不会再有变化
}
</style>
<a href="http://www.baidu.com">百度</a>
- 鼠标的<a>标签上面的状态有4种
a:link: 链接的初始状态
a:visited: 链接被访问过后的状态
a:hover: 鼠标停留在a标签上面的状态
a:active: 鼠标按下时,链接的状态
顺序: link-visited-hover-active
- 所以,上述示例可以这么改
<style>
a:link {
background-color: red; # 好处在于,a标签不会永远是红色
}
</style>
- 把上述说明依次示例
<style>
a:link {
background-color: red; # 初始状态
}
a:visited{
background-color: green; # 访问过后的状态
}
a:hover{
background-color: orange; # 鼠标停留状态
}
a:active{
background-color: aqua; # 鼠标点击时的状态
}
</style>
- 注意事项
- 使用的时候,一定要按照顺序来,否则某个样式会被覆盖掉
- 最常用的,就是 a:hover {}
- 新闻导航条示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0; # 清除导航条边距
}
.navigation {
width: 100%; # 宽高
height: 30px;
background-color: slateblue; # 背景色,行高
line-height: 30px;
display: flex; # flex 布局
flex-direction: row;
justify-content: space-around;
}
a {
color: black; # 黑色字体
}
a:hover {
background-color: red; # 鼠标停留就显示红色
}
</style>
</head>
<body>
<div class="navigation">
<a href="http://www.baidu.com/news">新闻</a>
<a href="http://www.baidu.com/animal">动物</a>
<a href="http://www.baidu.com/nature">自然</a>
<a href="http://www.baidu.com/fruit">水果</a>
<a href="http://www.baidu.com/vagetable">蔬菜</a>
</div>
</body>
</html>
列表属性
- list-style-type
- 实心圆: disc
- 空心圆: circle
- 实心方块: square
- none # 实战最常用(列表属性学这个就可以了)
- list-style-image: 将图片代替'实心圆'
- list-style-position: 将'实心圆'放里面/外面
- list-style: 简写(上面三个属性的位置,可以随意)
- 实例1:当清除所有元素的边距时,列表的默认样式(小圆点)也会被清除
<style>
* { # 清除所有边距
margin: 0;
padding: 0;
}
</style>
<ul> # 无样式
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
- 实例2:清除列表默认样式(最常用的)
<style>
ul {
list-style-type: none;
}
</style>
- 实例2: 把列表的序号换成'图片'(这里图片的位置无法调整)
<style>
ul {
list-style-type: none;
}
.l1 {
list-style-image: url('1.png');
}
.l2 {
list-style-image: url('2.png');
}
.l3 {
list-style-image: url('3.png');
}
</style>
<ul>
<li class="l1">111</li>
<li class="l2">222</li>
<li class="l3">333</li>
</ul>
- 实例3:给列表项添加边框,并把图片序号放进框里面
<style>
ul {
list-style-type: none;
}
.l1 {
list-style-image: url('1.png');
list-style-position: inside; # 把图片序号放入边框里面
}
.l2 {
list-style-image: url('2.png');
list-style-position: inside;
}
.l3 {
list-style-image: url('3.png');
}
li {
border:1px solid red;
list-style-position: inside;
}
</style>
<ul>
<li class="l1">111</li>
<li class="l2">222</li>
<li class="l3">333</li>
</ul>
浮动 float
- 作用
- 让竖直的东西横着来(主要)
- 其他文本围绕该元素显示
- 特点:见缝插针,尽可能节约空间
- 参数
- float:left/right/none
- 测试环境:三个相同尺寸的颜色块(颜色不同)
<style>
div {
width: 100px;
height: 100px;
}
.d1 {
background-color: red;
}
.d2 {
background-color: green;
}
.d3 {
background-color: purple;
}
</style>
......
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
- 实例1: d1开始浮动,由于d1浮起来了,所以d2,d3向上挤压
由于d1和d2的尺寸相同,d2的颜色块被d1遮起来了,所以看到的只有两个色块
<style>
div {
width: 100px;
height: 100px;
}
.d1 {
background-color: red;
float: left; # 添加浮动效果
}
.d2 {
background-color: green;
}
.d3 {
background-color: purple;
}
</style>
- 此时,若更改 d2的尺寸,比如变大,是可以看到颜色的
.d2 {
background-color: green;
width: 300px; # 可以很明显看到颜色块了
}
- 实例2: 若三个颜色块均设置浮动,效果就是都浮起来,然后横向紧贴在一起
<style>
div {
width: 100px;
height: 100px;
}
.d1 {
background-color: red;
float: left; # 均设置浮动
}
.d2 {
background-color: green;
float: left;
}
.d3 {
background-color: purple;
float: left;
}
</style>
- 实例3: 若颜色块大小: 红>绿>紫,当都浮动的时候,就是'见缝插针'效果
三个颜色块不是紧贴在一起,而是 红+绿紫(不是 红+绿+紫) 效果
<style>
div {
width: 100px;
height: 100px;
}
.d1 {
background-color: red;
float: left;
height: 500px; # 最大尺寸
width: 500px;
}
.d2 {
background-color: green;
float: left;
height: 400px; # 第二大尺寸
width: 400px;
}
.d3 {
background-color: purple;
float: left;
height: 300px; # 最小尺寸
width: 300px;
}
</style>
- 实例4:文本环绕'浮动元素'效果,本来 文字 应该被颜色块覆盖的,但是文字却围绕浮动元素显示
这就是'float'的另一种效果
<style>
div {
width: 100px;
height: 100px;
}
.d1 {
background-color: red;
float: left; # 浮动
}
.d2 {
background-color: green;
height: 400px; # 大块颜色区域
width: 400px;
}
.d3 {
background-color: purple;
}
</style>
......
<div class="d1"></div>
<div class="d2">文字有什么效果</div> # 测试文字(不会被颜色块覆盖)
<div class="d3"></div>
- 清除浮动 clear
- 作用
- 当子元素浮动起来的时候,会造成父元素尺寸之一的'高度塌陷',即父元素高度变为0
解决'高度塌陷'的方法有好几种,而其中'清除浮动'是一种比较好的解决方案
- 参数
- clear:none 允许有浮动对象
- clear:both 不允许有浮动对象
- clear:left 不允许左边有浮动对象
- clear:right 不允许右边有浮动对象
- 注意: 清除浮动只是改变元素的排列方式,该元素还是漂浮着,不占据文档位置
- '高度塌陷'实验环境:父元素div,包裹两个子div块浮动,此时检查父div的尺寸就会发现高度为0
<style>
.box1,.box2 {
width: 200px;
height: 200px;
float: left;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
}
.box {
width: 300px;
height: 300px; # 大颜色块
background-color: purple;
}
</style>
......
<div class="container"> # 高度变为0
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box"></div>
- 解决方式一: 既然父元素此时没有高度了,那么设置一个高度即可
# 在原来的样式上加上这句
.container {
height: 200px; # 设置和子元素高度相同即可
}
- 再次检查 父div高度,有高度了
- 而且,原来的'大颜色块'不再插入'两个颜色块'的空间,回到'两个颜色块'下方的位置
- 解决方式二: 对于'浮动元素'的下一个元素,应用 clear:both,一模一样的效果
# 恢复实验环境
.box {
width: 300px;
height: 300px;
background-color: purple;
clear: both; # 加这句即可
}
- 解决方式三:新增'浮动元素'的"兄弟元素",不设置宽高 clear:both,一模一样的效果
# 恢复实验环境
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear: both"></div> # 新增
</div>
- 解决方式四: 对父元素应用 overflow: hidden 让浮动元素计算高度(可以先不懂)
.container {
overflow: hidden; # 新增
}
- 示例: 实现图片的横向排列
- 实现方式一: 对父元素使用flex 布局
<style>
.imageList { # flex 布局
display: flex;
flex-direction: row;
justify-content:flex-start;
}
p {
text-align: center;
}
img {
margin-left: 20px; # 图片之间加边距
}
</style>
......
<div class="imageList">
<div>
<img src="pretty.png" alt="">
<p>文字效果</p>
</div>
<div>
<img src="pretty.png" alt="">
<p>文字效果</p>
</div>
<div>
<img src="pretty.png" alt="">
<p>文字效果</p>
</div>
</div>
- 实现方式二:使用'浮动'
<style>
div {
float: left; # 对于每个div块设置浮动
margin-left: 20px; # div块之前拉开下边距,不然紧凑一起,很挤
}
div img {
width:187px;
height:125px;
}
div p{
font-size:12px;
text-align:center;
width:187px; /*宽度和图片宽度保持一致,所以居中;否则默认是相对于浏览器窗口居中,效果很差*/
background-color:darkcyan;
}
</style>
......
<div>
<img src="pretty.png" alt="">
<p>文字效果</p>
</div>
<div>
<img src="pretty.png" alt="">
<p>文字效果</p>
</div>
<div>
<img src="pretty.png" alt="">
<p>文字效果</p>
</div>
- 再次美化,添加鼠标移动到文字的效果,背景变色
<style>
div {
float: left;
margin-left: 20px;
}
div img {
width:187px;
height:125px;
}
a { # 增加效果
display: block;
font-size:12px;
text-align:center;
background-color:darkcyan;
text-decoration: none;
}
a:hover {
background-color:red;
}
</style>
......
<div>
<img src="pretty.png" alt="">
<a href="#">文字效果</a>
</div>
<div>
<img src="pretty.png" alt="">
<a href="#">文字效果</a>
</div>
<div>
<img src="pretty.png" alt="">
<a href="#">文字效果</a>
</div>
盒子模型的四个构成要素
- 外边距: margin
- 边框: border
- 内边距: padding
- 元素本身
- 内边距: padding
- 实例演示:没有加padding之前,文字与div块之间,是紧挨一起的
<style>
div {
width: 500px;
height: 300px;
background-color: yellow;
text-align: justify; # 文字两端对齐
}
</style>
<div>
lorem 测试文字...
</div>
- 现在,加上内边距
<style>
div {
width: 500px;
height: 300px;
background-color: yellow;
text-align: justify;
padding: 30px; # 文字与div块之间,有了间隔,效果好很多
}
</style>
- 内边距效果:让子元素和父元素拉开距离
- 背景色也会蔓延到 padding
- 边框: border和外边距: margin
- 双边框效果: double
<style>
div {
width: 500px;
height: 300px;
background-color: yellow;
border:10px double red; # 边框厚度高,但是双边框效果
}
</style>
<div>
</div>
- 清除html标签默认的外边距,以 h1标签为例
<style>
div {
width: 500px;
height: 300px;
background-color: yellow;
border:10px double red;
}
h1 {
margin: 0; # 默认情况下,h1和div是有距离的,因为h1默认有外边距
}
</style>
<div></div>
<h1>测试标题</h1>
- 元素的居中效果
<style>
div {
width: 500px;
height: 300px;
background-color: yellow;
border:10px double red;
margin: 0 auto; # 上下边距为0,水平方向居中
}
h1 {
margin:0;
text-align: center; # 文字居中
}
</style>
<div></div>
<h1>测试标题</h1>
- margin 的两个疑难杂症解析
- 兄弟关系,两个盒子的垂直外边距与水平外边距问题
- 垂直边距:外边距取最大值
<style>
div {
width: 200px;
height: 200px;
}
.d1 {
background-color: yellow;
margin-bottom: 50px; # 底部边距
}
.d2 {
background-color: green;
margin-top: 100px; # 上方边距
}
</style>
......
# 它们之间的边距(垂直)为 100px,而不是150px
<div class="d1"></div>
<div class="d2"></div>
- 水平边距:合并处理
<style>
div {
width: 200px;
height: 200px;
}
.d1 {
background-color: yellow;
float: left;
margin-right: 50px; # 右边距
}
.d2 {
background-color: green;
float: left;
margin-left: 100px; # 左边距
}
</style>
......
<div class="d1"></div>
<div class="d2"></div>
- 父子关系,给 子 加外边距,会作用于 父容器 上面,此时该如何解决
<style>
.parent {
width: 400px;
height: 400px;
background-color: red;
}
.child {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 50px; # 加上外边距,但作用于 父容器上了
}
</style>
......
<div class="parent">
<div class="child"></div>
</div>
- 解决办法1: 把子容器的 margin-top: 50px 变成 父容器的 padding-top: 50px;
同时注意计算高度
<style>
.parent {
width: 400px;
height: 350px; # 高度的变更
background-color: red;
padding-top: 50px; # 新增
}
.child {
width: 200px;
height: 200px;
background-color: yellow;
/*margin-top: 50px;*/ # 注释掉
}
</style>
......
<div class="parent">
<div class="child"></div>
</div>
- 该给父容器加边框即可(原先的子容器,并不知道父容器的边框在哪里,所以不知道怎么办)
<style>
.parent {
width: 400px;
height: 350px;
background-color: red;
border: 1px solid purple; # 加边框,实现预计的效果(transparent)
}
.child {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 50px; # 边距
}
</style>
- 拓展:这里可以把边框的颜色,设置成'透明效果',实际是存在的,只是由于透明,所以看不到
有一种'掩耳盗铃'的效果: border: 1px solid transparent;
- 解决办法3:使两个容器不在同一个平面上即可,加'浮动'
<style>
.parent {
width: 400px;
height: 350px;
background-color: red;
}
.child {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 50px;
float: left; # 浮动
}
</style>
- 解决办法4: 父容器加这句 overflow: hidden;也可以实现效果(Question)
