CSS样式学习（四）

本篇内容：
盒子模型CSS
border
box-sizing
表格细线
 圆角边框
 padding内边距
 margin外边距
 盒子居中
 盒子阴影

盒子模型CSS主要指的是div标签的布局
一个div的宽高就是盒子长宽，border就像盒子的厚度，padding就像盒子内容与盒子的距离，margin是盒子与其他盒子之间的间隙。

border

border是div的边框。

<style>
div {
    border:1px solid red;
}
</style>
<body>
    <div>盒子模型</div>
</body>

实现效果：
在这里插入图片描述
还可以单独对上、下、左、右边框分别设置样式

<style>
div {
    border-top: 2px solid red;
    border-left: 2px solid blue;
    border-right: 2px solid lawngreen;
    border-bottom: 2px solid violet;
    width: 100px;
}
</style>
<body>
<div>盒子模型</div>
</body>

在这里插入图片描述

box-sizing

box-sizing是比较好用的一个盒子属性

<style>
div{
	/*box-sizing: border-box;*/
	border: 1px solid red;
	width: 100px;
	height: 100px;
}
</style>

未使用该属性时的效果：
在这里插入图片描述

<style>
div{
	box-sizing: border-box;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}
</style>

加上box-sizing: border-box之后的效果：
在这里插入图片描述
简单来讲就是加上这个属性，就把border的宽度算在盒子以内，即left-border+width+right-border=100px.（如果有内外边距，也算在100px以内）

表格细线

<style>
/* table{
    border-collapse: collapse;
} */
td,th{
    
    border: 1px solid red;
}
</style>
<table>
    <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>1</td>
        <td>一班</td>
    </tr>
    <tr>
        <td>小白</td>
        <td>2</td>
        <td>二班</td>
    </tr>
</table>

但我们写了一个简单的表格之后，效果如下：
在这里插入图片描述
但是不够美观，于是对table设置 border-collapse: collapse; 让它自动合并边框

<style>
table{
    border-collapse: collapse;
} 
td,th{
    
    border: 1px solid red;
}
</style>

实现效果：
在这里插入图片描述

圆角边框

<style>
div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: inline-block;
}
div:first-child{
    /* 表示四个角都是10px的弧度 */
    border-radius: 10px; 
}
div:nth-child(2){
    /* 表示四个角都是50%高度和宽度的弧度 则会变成一个圆形 */
    border-radius: 50%; 
}
div:nth-child(3){
    /* 表示左上角和右下角都是10px,右上角和左下角是40px */
    border-radius: 10px 40px; 
}
div:nth-child(4){
    /* 表示左上角是10px,右上角和左下角是40px 右下角是80px*/
    border-radius: 10px 40px 80px; 
}
div:nth-child(5){
    /* 表示左上角是10px,右上角是40px 右下角是80px 左下角是100px*/
    border-radius: 10px 40px 80px 100px; 
}
div:nth-child(6){
    /* 表示四个角都是10px的弧度 */
    border-radius: 100%; 
    height: 100px;
}
div:nth-child(7){
    /* 表示四个角都是10px的弧度 */
    border-radius: 100px 0; 
}
</style>

显示效果：
在这里插入图片描述

padding内边距

设置内边距的方法：padding:xpx

<style>
div {
    height: 100px;
    width: 100px;
    border: 1px solid red;
    padding: 10px;
}
</style>

在这里插入图片描述
F12使用chrome的开发者工具查看，绿色部分就是padding

padding也可以分别设置上下左右的内边距，设置方法与border一致。
padding: top right bottom left
- 当这个语法只设置一个值a，则所有内边距都是a，如padding:10px。
- 当这个语法设置两个值，padding:10px 20px，则上下内边距为10px，二左右内边距为20px。
- 当这个语法设置三个值，padding:10px 20px 30px，则上内边距为10，右内边距为20px,下内边距为30px。
- 当这个语法设置四个值，则分别是上右下左内边距。
- margin也适用以上原则

margin外边距

<style>
div{
    border: 1px solid red;
    height: 100px;
    width: 100px;
}
div#internal{
    height: 100px;
    width: 100px;
    margin: 20px;
    border: 1px solid darkgoldenrod;
}
</style>
    <div>
    <div id="internal"></div>
</div>

在这里插入图片描述
用开发者工具查看，黄色部分就是margin。
margin的设置和padding一致。

盒子居中

将margin左右边距设置为auto，就可以让div外边距自适应，实现居中。
例如：margin: 10px auto;

盒子阴影

<style>
div{
    height: 200px;
    width: 200px;
    background: wheat;
    /* 参数依次是:水平位移,垂直位移,模糊距离,扩展半径,颜色,内外阴影(inset为内,默认为外) */
    box-shadow: 3px 4px 4px 4px rebeccapurple inset,
    -3px -4px 4px 4px rebeccapurple inset;
}
</style>

实现效果：
在这里插入图片描述

Lalo_isy

发布了26 篇原创文章 · 获赞 6 · 访问量 1493

私信关注