一,border 边框属性设置
1.border 三要素 color width style
2.border 属性设置的顺序为 top right bottom left (上右下左)
3.border 四周属性可以单独设置 :如 border-top-width:1px;
border-top-color: pink;
border-top-style : solid;
4.border 属性设置遵循就近原则 :下面的属性设置会覆盖上面的设置
5.可以设置单个复合属性:border-style : solid double dashed dotted ;
border-width : 1px 2px 3px 4px ;
border-color : pink black green red ;
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框属性</title>
<style>
.box {
/* 设置盒子大小 */
width: 100px;
height: 100px;
/* 边框三要素 颜色 宽度 样式 */
border: 5px solid red;
/* 单独设置上右下左的属性 */
border-top-color: pink;
border-top-width: 1px;
border-top-style: dashed;
/* 单独设置四周边框属性 */
border-width: 1px 2px 3px 4px;
/* 就近原则 下面的属性会覆盖上面的属性 */
border-color: pink black green blue;
border-width: 3px 6px 9px 12px;
border-style: solid dashed dotted double;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
1.7 外边距 margin
外边距的应用:
外边距可以让
块级盒子水平居中,但是必须满足两个条件
1.块级盒子必须指定宽度widht
2.盒子左右外边距设置auto。
<style>
div {
width: 900px;
height: 200px;
background: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div>
我是块级盒子
</div>
</body>
注意:
行内元素或者行内块元素想要在父盒子中居中对齐
直接给父元素添加 text-align:center;
<style>
div {
width: 900px;
height: 200px;
background: pink;
margin: 100px auto;
/* 行内元素或者行内块元素想要在父盒子中居中对齐
直接给父元素添加 text-align:center;
<style>
div {
width: 900px;
height: 200px;
background: pink;
margin: 100px auto;
/* 行内元素或者行内块元素想要在父盒子中居中对齐
直接给父元素添加 text-align:center; */
text-align: center;
}
</style>
</head>
<body>
<div class="">
<!-- 行内元素 -->
<span>我是块级盒子中的行内元素</span>
</div>
</body>
1.8 外边距合并(设置子元素相对父元素的位置的外边距)
使用margin定义块元素垂直外边距时,可能会出现外边距的合并
对于两个嵌套的(父子关系)块元素,父元素上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距
解决方案:
-
可以为父元素定义边框;( 外面加个外墙,那就能给子盒子一个参考边来设置子元素的外边距)
-
可以为父元素定义内边距;
-
可以为父元素添加overflow:hidden.
<style>
.father {
margin: 5px;
background-color: pink;
width: 900px;
height: 200px;
border: 1px solid transparent;
padding: 1px;
overflow: hidden;
}
.son {
background-color: red;
width: 200px;
height: 100px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
son
</div>
</div>
</body>
1.9 清除内外边距
正常我们在布局前,首先去除网页元素的内外边距。
<style>
* {
margin: 0;
padding: 0;
}
span {
background: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>
456
</li>
</ul>
<span>789</span>
</body>
注意:
-
行内元素 尽量 只设置左右外边距 ,不设置上下外边距,上下不起作用。
-
但是,将 行内元素转成块元素 就可以自由设置上下左右的外边距了。