css属性

最新推荐文章于 2022-02-06 13:04:54 发布

男孩12

最新推荐文章于 2022-02-06 13:04:54 发布

阅读量281

点赞数

分类专栏： HTML 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_51666715/article/details/121841153

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

宽高

宽在css中的代名词是width,高在css中的代名词是height
他们的单位：px(像素)，em(字节),百分比,百分比vw和vh
代码及规范

<style>
    p{
      border: 1px solid #000;
    }
    p:nth-child(1){
      width: 200px;
      height: 200px;
    }
    p:nth-child(2){
      width: 50%;
      height: 30%;
    }
    p:nth-child(3){
      width: 50vw;
      height: 30vh;
    }
  </style>
</head>
<body>
  <p>我是以px作为单位</p>
  <p>我是以百分比作为单位</p>
  <p>我是以百分比vh和vw作为单位，但我的确认大小为可视化窗口的大小来调节</p>

字体

特性：
1.font-family样式指定了一个元素用什么样的字体
2.font-family可以对一个元素指定多种字体，如果浏览器不支持第一个字体，则会跳转到下一个字体，如果浏览器不支持第一种肢体，则可以尝试用下一种字体
3.字体可以继承
代码即规则如下：

<style>
 p{
      border: 1px solid #000;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
</style>

字体颜色

字体颜色在css中表示的是color
然后这个单位为：red 颜色表达式----red
#000000 编码式的颜色表达式，简写为#000

简写规则是当相邻的字符是相同的时候，则就可以使两个相邻的字符用一个字符表示

字体大小:font-size

字体的粗细

字体的粗细在css中的代名词为font-weight
它的单位可以是一个单词如blod
可以是px（像素）
代码即规则

<style>
    p{
      border: 1px solid #000;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-weight: bold;
    }
    p:nth-child(1){
      width: 200px;
      height: 200px;
    } 
    p:nth-child(2){
      width: 50%;
      height: 30%;
      font-weight: 700px;
    }
  </style>

行高l(lin-height)

一般的单位为px（像素），也可以为倍数

字体的对其方式

字体的对齐方式(text-aligth):其中的属性值为 1.left;2.right;3.center

背景图

背景图在css中的代名词是background-images 其中还有一些相关的属性
background-repace表示的是背景图是否重复,其中的属性值为 no-repace
代码和规范

 <style>
    p{
      width: 200px;
      height: 200px;
      background:url(http://zl.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <p></p>

backfround-size 表示的是背景图的大小

其中的属性值为:
contain:保持宽高比例，拉伸至任意一边为最大
cover：保持宽高比例拉伸至最短边拉伸值最大，如果其中多出来的部分截取
% % ；px px 任意的数值的px或者百分比
代码及规范

<style>
    p{
      width: 200px;
      height: 200px;
      background:url(http://zl.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png);
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <p></p>

背景图的位置

background-position对背景图片进行设置，有几种取值
(1).使用px像素作为单位
(2).使用百分比
使用top(上),bottom(下),left(左),right(右),center(居中)进行位置调控
代码及规范：

 <style>
    p{
      width: 700px;
      height: 700px;
      background:url(http://zl.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png);
      background-repeat: no-repeat;
      /* background-size: cover; */
      background-position: center;
    }
  </style>
</head>
<body>
  <p></p>

背景图片合并写法
背景的代名词为banckground
及它的语法：
background: 背景图片资源所在地是否重复图片位置
代码及规范

<style>
    p{
      width: 700px;
      height: 700px;
      background:url(http://zl.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png) no-repeat center;
    }
  </style>
</head>
<body>
  <p></p>

精灵图

精灵图使用的前提是
1.你要有一张精灵图,(精灵图又称雪碧图，它是由许多小图标组成的一张图片)
2.你要创建一个盒模型，让他当作精灵图的容器
----------------------------------好了做到这里你可以开始使用精灵图了
精灵图的核心属性是background-position来调控它来使得你能够得到你想要的小图标
代码和规范

<style>
    p{
      width: 20px;
      height: 20px;
      background:url(http://zl.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png) no-repeat;
      position: 0px 0px;
    }
  </style>
</head>
<body>
  <p></p>

内边距

定义：我们通常用padding来设置元素边缘跟元素内容之间的空白

外边距塌陷问题

外边距的塌陷经常会发生，外边距的塌陷会使得当你的子元素无论怎么调节你的margin和padding，你的父元素随时都跟随着你。

如何解决这些问题呢？
1.你可以给父元素设置一个边框
2.你可以给父元素添加一个overflew:auto
3.你可以给父元素添加padding-top

泄露问题

当文字超过了你的容器的时候，这个情况我们称之为泄露

如何处理泄露问题呢？
1.首先是你可以进行white-space进行换行处理
2.overflew进行对泄露的东西进行处理，其中的属性 auto表示的是自适应内容看是否生成轮轴
3.如果你想要设置为百度处理泄露的一样的话，其实是十分简单的，加上text-overflew:eslipsis，则可以成功

overflew除了对文字这样，对内容元素也是一样的

男孩12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css属性

宽高宽在css中的代名词是width,高在css中的代名词是height他们的单位：px(像素)，em(字节),百分比,百分比vw和vh代码及规范<style> p{ border: 1px solid #000; } p:nth-child(1){ width: 200px; height: 200px; } p:nth-child(2){ width: 50%; height: 30%
复制链接

扫一扫

专栏目录