对前端不离不弃的6day -css属性

好好学前端的欣欣同学

已于 2023-02-28 21:26:06 修改

阅读量71

点赞数

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

于 2023-02-27 21:13:51 首次发布

本文链接：https://blog.csdn.net/weixin_59418570/article/details/129249757

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的一些重要属性，包括背景颜色、背景图片的设置和平铺、背景图片的大小和定位、列表的属性以及如何设置字符间距、行高和内容溢出的处理。特别强调了背景图片的固定、列表项目符号的清除以及一行文字溢出时使用省略号的显示方法。此外，还详细讲解了盒模型的概念，包括content、border、padding和margin的设置。

摘要由CSDN通过智能技术生成

在此跟大家说明：个人习惯在周六日会停更在做练习和回顾，因此周一才会继续发文,有评论催博主更新，个人表示开心坏了！有人监督也是对我的一种期望！我会继续坚持学习！谢谢你们~

今天的内容主要是css一些重要的属性，如：背景图片/列表/内外边框.....私下结合了魅族官网的布局来练习新属性（等我优化了代码以后会发练习，虽然实现了但代码还是有点乱），可以实现中间的间隔分离！

1.背景属性

1.1 背景颜色

1.2 背景图片

1.3 background-repeat:; --背景图片是否平铺

1.4 background-size:背景图片的大小

1.背景属性

1.1 背景颜色

background-color:transparent(透明);

1.2 背景图片

background-image:url("...")

1.3 background-repeat:; --背景图片是否平铺

repeat:默认值平铺

no-repeat: 不平铺

repeat-x: 水平方向平铺

repeat-t: 垂直方向平铺

1.4 background-size:背景图片的大小

background-size : x y;

取值px % cover contain

只取一个值，表示宽度，高度等比例缩放

cover:覆盖，背景图片覆盖整个背景区域，但是背景图片可能显示不全

contain:内容.背景图片拉伸至最大，背景区域可能覆盖不全

1.5 背景图片定位：

background-position :0px 0px ;

取值px % left right center top box-bottom

当只取一个值，另外一个值默认居中

当取正值，背景图片往右下移动

取负值时，图片背景往左上移动

1.6背景图片是否固定

background-attachment:;

scroll: 默认值滚动跟着页面滚动

fixed: 固定

1.7简写

background: color url() repeat size position attachment;

颜色图片平铺大小位置是否固定

一个属性，多个属性之间使用空格隔开，不区分前后顺序

没有取值的属性为默认值

当简写属性和单个属性同时存在时，简写属性需要先写

当背景图片大小和背景图片定位取值px或%时不推荐简写

eg：（css）

<!--（居中显示-居中-不平铺-背景颜色-）-->
        
 .box{
     width: 100%;
     height: 600px;
     background: #f4f4f4 url("../魅族练习/images/58685f13-c007-40a7-acf9-ef44f096271e.jpg")   center no-repeat;
        }

（html）

<!-- 背景属性 -->

    <div class="box">

    </div>

效果：

2.列表的属性

2.1设置项目符号

list-style-type:none;

2.2简写

list-style :none;

3.设置字符之间的间距

letter-spacing 正负可取

4.设置一行文字的高度

line-height :;

可取px 数字

当行高等于元素的高，一行文字垂直居中

5.内容溢出

overflow:;

visible:; 默认值可见的

hidden: 溢出部分隐藏

【重要】hidden: 溢出部分隐藏

副作用:元素开启了BFC格式

[BFC格式]块级格式上下文变成独立的一块,布局不受子元素影响,也不会影响父元素

auto: 自动有溢出，显示滚动条；没有溢出，不显示滚动条

scroll: 滚动不管是否溢出,都显示滚动条

6.一行文字溢出省略号显示

6.1文字在同一行显示

white-space:nowrap;

6.2溢出部分隐藏

overflow:hidden;

6.3文字溢出省略号显示

text-overfloat:ellipsis;

7.盒模型 box model

7.1概念

html所有的元素都可以看成一个盒子在css中称为box model，盒模型主要用来布局

7.2组成部分

content + padding + border + margin

内容内边距边框外边距

7.3content 内容区域

width:; 宽度

height:; 高度

min-width:; 最小宽度

max-width:; 最大宽度

min-height:; 最小高度

max-weight:; 最大高度

【注意】

块级元素默认宽度100%（相对于父元素）;

行内元素默认宽度由内容撑开

块级元素和行内元素默认高度都由内容撑开

块级元素可以设置宽高；行内元素设置宽高不会生效

7.4 border 边框

1）设置边框样式 -必要属性。不能丢

border-style:;

solid:; 实线

none:; 不显示

dashed:; 虚线

dotted:; 点线

double:; 双实线

2）设置边框颜色:

border-color:#000;

3）设置边框高度

border-width:3px;

4）简写(掌握)四周的边框:

border:1px solid red;

border: solid ; 默认3px 黑色

border:2px pink ;不显示

5）单边的边框

border-top:1px solid red;

border-bottom:1px solid red;

border-left：....;

border-right.....;

7.5 padding 内边距

1)作用：

设置内容距边框的距离

不可以取负值 auto

2)属性：

padding-top:;

padding-bottom:;

padding-left:;

padding-right:;

3)简写

padding:20px; 四周的距离

padding:20px 30px; 上下左右

padding:20px 30px 40px:; 上左右下

padding:20px 30px 40px 50px :; 上右下左（顺时针方向）

7.6 margin 外边距

1）作用

设置元素四周的距离

可以取正负 auto

2）属性

margin-top:;

margin-bottom:;

margin-right:;

margin-left:;

3）简写

margin:20px; 四周的距离

margin:20px 30px; 上下左右

margin:20px 30px 40px:; 上左右下

margin:20px 30px 40px 50px :; 上右下左（顺时针方向）

4）作用

块级元素在页面水平居中

margin:0 auto;

5）注意

①外边距合并问题

垂直方向向上，外边距相撞时，取较大值

浮动元素不合并

②margin-top问题

第一个子元素设置margin-top,他的父元素会跟着一起往下移

解决方法：

1.父元素加overflow-hidden; (开启BFC)

2.父元素或子元素加float:left (开启BFC)

3.父元素加padding-top:1px; (父子上面不重合)

4.父元素加border-top:1px solid transparent (父子上面不重合)

③margin和padding不用%的原因