CSS常用属性（二）

╰+攻爆jí腚メ 2024-04-07 12:21 30阅读 0赞

/*
    *作者：呆萌老师
    *☑csdn认证讲师
    *☑51cto高级讲师
    *☑腾讯课堂认证讲师
    *☑网易云课堂认证讲师
    *☑华为开发者学堂认证讲师
    *☑爱奇艺千人名师计划成员
    *在这里给大家分享技术、知识和生活
    *各种干货，记得关注哦！
    *vx：it_daimeng
    */

**在li中添加span等标签 设置背景图片**

![2cd24e9f29694c99b0b3de02d6122865.png][]

Html代码:

Css代码

.list3 span{
        display: inline-block; /*行内块标签*/
    
        width: 24px;
    
        height: 14px;
        background: url(../img/num_sprite.png) no-repeat;
    
    }
    
    span.no1{
    
       
    
        background-position: 0px 0px; /*设置背景图的位置*/
    
    }
    
    span.no2{
    
    
        background-position: 0px -14px;}

## **Display** ##

**display: block** **块标签，独立占一行**

**display: inline-block** **行内块标签，不换行 但可以设置宽高**

**display: inline** **内联标签，不换行 不能设置宽高**

**display: none****不显示**

**display: flex****盒子模型**

## **边框** ##

**设置边框**

*border*: 10px solid red; /\*边框\*/

**也可以设置top,bottom,left,right边框**

*border-top*: 2px solid green;

**也可以设置圆角边框：**

*border-radius*: 0px;

*border-top-left-radius*: 30px;

*border-bottom-left-radius*: 30px;

## **盒子模型** ##

**分两种:**

**content-box:padding****和border不算在width和height中**

**Border-box:padding****和border算在width和height中**

**默认一般是content-box**

*box-sizing*: content-box;

*box-sizing*: border\-box;

**外边距：margin**

**边框:border**

**填充:padding**

**宽:width**

**高:height**

![66f1c4ea8922457e9f2c35ffa686daab.png][]

## **定位** ##

position: relative; /*相对定位：相对于自己本来的位置   在正常文档流中*/
    
    position: absolute; /*默认是绝对于body 脱离正常文档流 如果它外面的盒子（父级元素）做了相对定位 则它绝对于外面的盒子  */
    
    position: fixed; /*固定定位  脱离文档流  它不会随页面的滚动而滚动 */
    
    position: static; /*默认定位（没有定位） 忽略 left top bottom right...*/

## **浮动** ##

**float:left** **左浮动**

**float:right** **右浮动**

**清除浮动:**

.clearfix::after\{

*content*:""; /\*在 div 后面 追加一个内容 \*/

*display*: block;

*height*: 0px;

*clear*:both; /\*清除浮动\*/

## **弹性盒子模型** ##

flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。**主要思想是给予容器控制内部元素高度和宽度的能力**。目前已得到以下浏览器支持：

![e01bcdd6c29741368e225f74619b5ca2.png][]

详细兼容图:

![afa5f30e46f94f69ba09e75ab92a2b37.png][]

对此属性做兼容需要在css中添加：

display:-webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。

此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。

**容器属性详述**

1.flex-direction

决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse

**row:主轴为水平方向，项目沿主轴从左至右排列**

**　　　　column：主轴为竖直方向，项目沿主轴从上至下排列**

**　　　　row-reverse：主轴水平，项目从右至左排列，与row反向**

**　　　　column-reverse：主轴竖直，项目从下至上排列，与column反向**

[2cd24e9f29694c99b0b3de02d6122865.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9e3404b53def4c81b36fc4c095cfedf1.png
[66f1c4ea8922457e9f2c35ffa686daab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/713ecfbe26bc42678763e907884751ee.png
[e01bcdd6c29741368e225f74619b5ca2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0e82851588794b03a59610e6e943ee3d.png
[afa5f30e46f94f69ba09e75ab92a2b37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/73d95d42f06e40d78ca5981dca166f63.png