CSS常用属性

2022-09-02 23:00:45 阅读：209 来源： 互联网

标签：box flex 常用主轴 position border display CSS 属性

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

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

Html代码:

<ul class="list3">

            <li>

                <span class="no1"></span>

                <b><a href="" title="书友1905622812" class="green">书友19056...</a></b>

                <i>盟主</i>

            </li>

            <li>

                <span class="no2"></span>

                <b><a href="" title="书友1905622812" class="green">书友19056...</a></b>

                <i>盟主</i>

            </li>

            <li>

                <span class="no3"></span>

                <b><a href="" title="书友1905622812" class="green">书友19056...</a></b>

                <i>盟主</i>

            </li>

           

        </ul>

 

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盒子模型

边框

设置边框

/*也可以设置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

定位

position: relative; /*相对定位：相对于自己本来的位置   在正常文档流中*/

position: absolute; /*默认是绝对于body 脱离正常文档流 如果它外面的盒子（父级元素）做了相对定位 则它绝对于外面的盒子  */

position: fixed; /*固定定位  脱离文档流  它不会随页面的滚动而滚动 */

position: static; /*默认定位（没有定位） 忽略 left top bottom right...*/

浮动

float:left 左浮动

float:right 右浮动

清除浮动:

content:""; /*

display: block;

height: 0px;

clear:both; /*

弹性盒子模型

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

编辑

详细兼容图:

对此属性做兼容需要在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反向

标签：box,flex,常用,主轴,position,border,display,CSS,属性
来源： https://www.cnblogs.com/daimenglaoshi/p/16651600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS常用属性

Display

边框

盒子模型

定位

浮动

​​​​​​​弹性盒子模型

弹性盒子模型