background、盒子模型、表格、图片精灵、border、margin

最新推荐文章于 2024-08-04 20:38:28 发布

勇敢小阵

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量122

点赞数

分类专栏： CSS学习记录文章标签： css

本文链接：https://blog.csdn.net/weixin_45654590/article/details/119837360

版权

CSS学习记录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

背景
表格
盒子模型
- 边框盒子
- W3C盒子
图片精灵
border属性
margin设置

背景

背景颜色

background-color: pink;

背景图片

background-image: url('图片路径');

重复背景图像

background-repeat: repeat;

网页效果：
在这里插入图片描述
其它取值：

背景图像是否固定
规定背景图像是否固定或者随着页面的其余部分滚动

background-attachment: scroll;

其它取值：
在这里插入图片描述
背景图片尺寸

background-size: 400px;

深入学习: https://www.w3school.com.cn/cssref/pr_background-size.asp
背景图片起始位置

background-position: center;

深入学习: https://www.w3school.com.cn/cssref/pr_background-position.asp
背景图片定位区域

 background-origin: content-box;

在这里插入图片描述
背景的绘制区域

background-clip: content-box;

表格

表格是否合并边框

 border-collapse: separate;
 //默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
 border-collapse: collapse;
 //如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
 border-collapse: inherit;
 //规定应该从父元素继承 border-collapse 属性的值

网页效果：
（separate和collapse的区别）
在这里插入图片描述

边框

//简写方式
border：border-width border-style border-color；
border: 10px solid gainsboro;

表格单元格、行、列的算法规则

table-layout: fixed;
//fixed	列宽由表格宽度和列宽度设定
//automatic	默认。列宽度由单元格内容设定
//inherit	规定应该从父元素继承 table-layout 属性的值

表格标题的位置

caption-side: bottom;
//top	默认值。把表格标题定位在表格之上。
//bottom	把表格标题定位在表格之下。
//inherit	规定应该从父元素继承 caption-side 属性的值。

其它属性详细学习
https://www.w3school.com.cn/css/css_table.asp

盒子模型

边框盒子

又叫怪异盒子、IE盒子
内容区的宽：width-左右padding-左右border
高：height-上下padding-上下border
盒子的宽：width
高：height
所占屏幕宽：盒子的宽+左右margin
高：盒子的高+上下margin

<head>
		<style>
 div{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 2px solid red;
            padding: 20px;
            margin: 10px;

        }
        </style>
</head>

<body>
		<div></div>
</body>

网页效果：
在这里插入图片描述

W3C盒子

又叫内容盒子、标准盒子
内容区的宽：width
高：height
盒子的宽：width+borderLeft+borderRight+paddingLeft+paddingRight
高：height+borderTop+borderBottom+paddingTop+paddingBottom
页面中所占屏幕的宽：盒子的宽+marginLetf+marginRight
高：盒子的高+marginTop+marginBottom

<head>
		<style>
 div{
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            border: 2px solid red;
            padding: 20px;
            margin: 10px;

        }
        </style>
</head>

<body>
		<div></div>
</body>

网页效果：
在这里插入图片描述

图片精灵

{
background-image: url(../图片文件/sprites.jpg);
}

{
background-position: -116px -129px ;
}

详细学习: https://www.w3school.com.cn/css/css_image_sprites.asp

border属性

border-radius
未加该属性时：
在这里插入图片描述

该属性允许您为元素添加圆角边框

border-radius: 50px;
//定义圆角的形状

网页效果：
在这里插入图片描述

border-radius:50%;
//以百分比定义圆角的形状

网页效果：
在这里插入图片描述
border-style

border-style:dashed ;
//可以设置上下左右四个边框的属性
//dotted solid double dashed 
//点状、实线、双线、虚线

border-top/right/bottom/left

border-bottom: 100px solid violet;

border-width

border-width: length;

border-color

border-bottom: colorName;

margin设置

水平居中（元素布局）

margin: 0 auto;

单方向设置

margin-left: 50px;

勇敢小阵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
background、盒子模型、表格、图片精灵、border、margin

背景表格盒子模型边框盒子W3C盒子图片精灵border属性margin单方向设置背景背景颜色background-color: pink;背景图片background-image: url('图片路径');重复背景图像background-repeat: repeat;网页效果：其它取值：背景图像是否固定规定背景图像是否固定或者随着页面的其余部分滚动background-attachment: scroll;其它取值：背景图片尺寸background-size:.
复制链接

扫一扫

专栏目录