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

CSS常用标签(二)_宽高

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

CSS常用标签(二)_文档流_02

CSS常用标签(二)_盒子模型_03

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常用标签(二)_文档流_04

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;}

CSS常用标签(二)_盒子模型_05

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

CSS常用标签(二)_文档流_06

CSS常用标签(二)_盒子模型_07


定位

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

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

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

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

CSS常用标签(二)_宽高_08

浮动

   float:left 左浮动

   float:right 右浮动

   清除浮动:

.clearfix::after{

   

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

   

    display: block;

   

    height: 0px;

   

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

   

}

弹性盒子模型

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


CSS常用标签(二)_盒子模型_09

CSS常用标签(二)_宽高_10

详细兼容图:

  

CSS常用标签(二)_盒子模型_11

CSS常用标签(二)_文档流_12

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

更多了解

​https://edu.51cto.com/topic/3338.html​