代表标签
代表标签
代表标签
元素显示模式转换
p 标签中不要嵌套 div p h 等块级元素
a 标签不能嵌套 a 标签
(1)盒子
标签可以看做是一个盒子
(2)盒子模型:
(3)盒子内容的宽高
.box {
width: 100px;
height: 100px;
}
/* 粗细 线条样式 颜色(不分先后顺序)*/
/* 默认4个方向都有*/
border: 10px solid red;
/* 单个方向 */
border-top: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
border-right: 10px solid red;
/* 单个属性 */
border-width: 边框粗细
border-style: 边框样式
border-color: 边框颜色
线条可选样式
布局顺序:从外到内,从上到下
/* 可取 4 个值、3 个值、2 个值、1 个值 */
padding: 上 右 下 左;
padding: 上 左右 下;
padding: 上下 左右;
padding: 上下左右;
/* 单个方向 */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
规律:顺时针,值不够看对边
<style>
.box {
border-top: 3px solid #ff8500;
border-bottom: #edeef0;
}
.box a {
/* 先写盒子大小 */
display: inline-block;
width: 80px;
height: 40px;
/* 推荐先写上背景,便于查看盒子大小 */
/* background-color: #edeef0; */
/* 再写文字样式 */
line-height: 40px;
text-align: center;
color: #4c4c4c;
font-size: 12px;
text-decoration: none;
}
/* 鼠标悬停效果 */
.box a:hover {
background-color: #edeef0;
color: #ff8044;
}
</style>
<div class="box">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">分类</a>
<a href="#">标签</a>
</div>
外边距 margin
设置值的方式和 padding 类似
使用 margin 让元素居中
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
清除浏览器默认样式
京东
* {
margin: 0;
padding: 0;
}
淘宝
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
常用的清除样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
去掉列表前的符号
<style>
.box-1 {
width: 100px;
height: 100px;
background-color: #698e6a;
margin-bottom: 50px;
}
.box-2 {
margin-top: 100px;
width: 100px;
height: 100px;
background-color: #7f9faf;
}
</style>
<div class="box-1"></div>
<div class="box-2"></div>
- 给父元素设置 border-top 或者 padding-top(分隔父子元素的 margin-top)
- 给父元素设置 overflow:hidden;
- 转换为行内块元素
- 设置浮动
<style>
.box-father {
width: 200px;
height: 200px;
background-color: #b2b6b6;
}
.box-child {
width: 100px;
height: 100px;
background-color: #7f9faf;
margin-top: 100px;
}
.resolve {
overflow: hidden;
margin-top: 20px;
}
</style>
<div class="box-wrap">
<!-- 元素的margin-top 作用在了父元素上 -->
<div class="box-father">
<div class="box-child"></div>
</div>
<!-- [完美解决方案]给父元素设置 overflow:hidden; -->
<div class="box-father resolve">
<div class="box-child"></div>
</div>
</div>
行内标签的 margin/padding
垂直方向不生效,使用行高 line-height 实现
<style>
.box {
border: 1px solid #eee;
}
.box span {
margin: 20px;
padding: 20px;
}
</style>
<div class="box">
<span>乾坤空落落,岁月去堂堂。</span>
</div>