CSS前阶段总结

最新推荐文章于 2023-04-23 10:22:08 发布

CC鹿

最新推荐文章于 2023-04-23 10:22:08 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/m0_58600635/article/details/119579089

版权

引用第三方字体图标方法：

首先打开iconfont网站，然后选择自己想要的字体和图标，把它们加入购物车，再把它们添加至项目中，没有项目新建一个项目，然后进行下载，下载完成后进行解压，解压到你写代码的相关文件夹，然后在style 标签进行link链接你要用的字体和图标。

字体代码：

<!DOCTYPE html>

<head>

<style>

@font-face {

font-family: myFont2;

src: url(../font/myFont2.ttf);

}

.app {

width:50%;

/* font-size: 20px; */

padding: 1rem;

background-color: lightgreen;

/* 有衬线的字体 */

font-family: myFont2;

}

</style>

</head>

<body>

琴棋书画不会，洗衣做饭嫌累

</div>

</body>

</html>

图标代码：<!DOCTYPE html>

<head>

<style>

@font-face {

font-family: myFont3;

src: url(../font/myFont3.ttf);

}

div {

font-family: myFont3;

}

</style>

</head>

<body>

<div>



</div>

</body>

</html>

第三方图标引入作为列表的图标方法跟上述有相同之处，但是要注意类名命名方法，fontawesome第一个类名用fa 另外一个用图标的名字；iconfont第一个类名用iconfont 另外一个用图标的名字

具体代码如下：<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.u1 {

list-style-type: none;

}

.fa{

list-style-type: none;

}

.iconfont{

list-style-type: none;

}

</style>

</head>

<body>

</ul>

</ul>

</ul>

</body>

</html>

盒子模型的特性

padding:内边距

margin:外边距

速记写法：

padding：20px 30px 40px 50px

同等于padding-top :20px

padding-right :30px

padding-bottom :40px

padding-left:50px

margin:20px 30px 40px 50px 也是同理

padding:20px 代表距离上右下左的距离都是20px;

padding:20px 30px 第一个值代表距离上下的距离第二个代表左右的距离

padding:20px 30px 50px 第一个值代表上，第二个值代表左右，第三个值代表下

margin也是同理。

margin的特性：兄弟元素之间的margin外边距水平方向相加间隙垂直方向相叠间隙

css布局的水平居中：margin:0 auto;

盒子类型

1.W3C盒子也可以叫做默认盒子、content-box盒子、内容盒子

2.IE盒子 border-box 边框盒子

width=200px height=200px padding:20px border:20px margin:20px

1.box-sizing:content-box

内容区域值：200px*200px

盒子大小：200px（宽高）+20px*2（内边距）+20px*2（边框大小）=280px

占据屏幕大小：280px（宽高）+20*2（外边距）=320px

2.box-sizing:border-box

内容区域值：200px（宽高）-20px*2（内边距）-20px*2（边框大小）=120px

盒子大小：200px（宽高）

占据屏幕大小：200px（宽高）+20*2（外边距）=240px

border特性

border-style:solid (实线) dashed(横线虚线) dotted(点虚线) groove(凹槽边框) double(双实线)

border-weight: 单位px

border-color:边框颜色

速记写法

border: border-weight border-style border-style;

border-radius:边框圆角

像跑道一样的椭圆：

width:500px;

height:100px;

border-radius:50%

头像一样的正圆：

width:100px;

height:100px;

border-radius:50%

background特性

修饰背景图片的宽高：background-size:200px 100px;

只保留一张背景图片：background-size:cover；

拉伸图片宽高：background-size:contain;

background-repeat:repeat no-repeat repeat-x repeat-y

重复平铺不平铺沿x轴平铺沿y轴平铺

background-origin:content-box 从内容起始值开始平铺默认值为padding-box

background-origin:border-box 从边框开始平铺

background-clip:content-box 覆盖范围，默认值为padding-box

background-attachment:scroll 默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。

background-attachment:fixed 背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。

background-attachment:local 背景图相对于元素内容固定

background-image:url(‘’) 插入背景图片

可以利用background-image和background-position来做图片精灵，提高用户打开网页的速度，比如插入该图片

的第一列四个显示,其他不显示

<!DOCTYPE html>

<head>

<style>

div{

width:150px;

height:700px;

background-image: url('./sprites.jpg');

}

div>div:nth-child(1){

width:150px;

height:150px;

background-position: -110px -125px;

}

div>div:nth-child(2){

width:150px;

height:150px;

background-position: -110px -300px;

}

div>div:nth-child(3){

width:150px;

height:150px;

background-position: -110px -475px;

}

div>div:nth-child(4){

width:150px;

height:150px;

background-position: -110px -650px;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

运行结果如下

CC鹿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS前阶段总结

引用第三方字体图标方法：首先打开iconfont网站，然后选择自己想要的字体和图标，把它们加入购物车，再把它们添加至项目中，没有项目新建一个项目，然后进行下载，下载完成后进行解压，解压到你写代码的相关文件夹，然后在style 标签进行link链接你要用的字体和图标。字体代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp...
复制链接

扫一扫