css元素样式大全


一、CSS元素类型

1、分类

  • 按显示方式:块级元素、行内级元素

  • 按内容方式:替换元素、非替换元素
    在这里插入图片描述

2、display属性:分类的实现
用于元素的显示方式。

  • display属性的常见4种取值:
1
2
3
4
display:block;//设置块级元素,类似的也有:
display:inline;//元素默认,用于设置行内级元素
display:inline-block;//设置为行内块级元素
display:none;//用于隐藏元素,并不占页面空间
  • display的补充
1
2
3
4
5
浏览器默认给元素加的display样式
display:table;//table元素
display:table-row;//tr元素
display:table-cell;//td元素
display:list-item;//li元素
  • inline-block特点

特点:
跟其他行内级元素在同一行显示;
可以随意设置宽高;
默认宽高由内容决定;
可以理解为:
对外是行内级元素;
对内是块级元素;
常见用途:
让行内级非替换元素(a、span等)可以设置宽高;
让块级元素(div、p等)能够跟其他元素在同一行显示。

3、visibility属性
用于元素的显示与隐藏。

与display:none;区别:
visibility设置隐藏时,元素看不见,但依旧占着原来的位置;
display设置隐藏时,元素看不见,不会占着任何位置,相当于删除。

1
2
visibility:hidden;//隐藏元素
visibility:visible;//显示元素,默认值

4、overflow属性
用于控制内容溢出时的行为。

1
2
3
4
5
overflow:visible;//默认值,超出div溢出的内容照样可见;
(会挡住div下面的块级元素的背景,文本还是可以看见;行内级元素在图片上方)
overflow:hidden;//超出部分直接裁剪
overflow:scroll;//超出部分不可见,但可以通过滚动条在区域内滚动查看,滚动条占宽高,内容会被覆盖一些
overflow:auto;//内容超出时出现滚动条,不超出正常显示。

在这里插入图片描述
还有overflow-x、overflow-y属性,用于设置水平、垂直方向的溢出后行为,一般用得少,因为有的浏览器还可能不支持。

5、元素之间的空格
行内级元素(包括inline-block元素)的代码之间如果有空格,会被解析显示为一个空格。

解决方案:

  • 元素代码之间不要留空格;
  • 注释掉空格;
  • 设置父元素的font-size=0,然后在元素上重新设置所需font-size
  • 给所需元素都加float属性,脱离标准流;(常用)

二、盒子模型

Html中每个元素都可以看做是一个盒子。
在这里插入图片描述
1、content内容,padding内边距,border边框,margin外边距

对于行内非替换元素:a、span、strong、label、

因为宽高不能用,
padding属性左右效果正常,但是上下显示也正常但是不占据空间只是表象;
margin只有左右效果,上下方向没有效果;
边框效果与padding类似;显示正常,但上下边框不占空间

对于行内替换元素:img、input、

  • 因为宽高可以使用,所以padding、margin属性在上下左右效果正常,占空间,边框及以内背景色;
  • 宽高为内容的;

对于块级元素:div、h1~h6、p、hr、form、ul、ol、li

  • 块级元素效果正常,边框内为背景色,边框的颜色覆盖背景色;
  • 垂直方向两个块级元素的外边距会重叠,以较大的外边距为实际间距;
  • 宽高为内容的;

注:宽度等于边框的距离,需要设置: box-sizing: border-box;

2、盒子模型常见属性
:margin、padding的百分比参照父元素的宽度
百分比参照自身的是:transform:translate(50%);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
width:20px;//宽度
min-width:20px;//最小宽度
max-width:20px;//最大宽度
height:20px;//高度
min-height:20px;//最小高度
max-height:20px;//最大高度
----
margin: 5px;//一般用于兄弟的间距
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px/50%;//百分比相对于父元素大小
----
padding: 5px;//一般用于父子间距
paddign-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px/50%;//百分比也是相对于父元素大小
----
border: 1px solid #000;//边框,不区分顺序

3、父子元素:上下margin-top/bottom传递

情况一:当两块级元素是父子关系时,子元素与父元素顶部线重叠时,子元素的margin-top会传递给父元素,自身没效果;
情况二:子元素的底部线与父元素底部线重叠,且父元素高度是auto,子元素的margin-bottom会传递给父元素,自身就没效果了;

解决:

  • 给父元素设置padding-top、padding-bottom,形成间距;
  • 给父元素设置边框border;
  • 触发bfc(block format context 块级格式化上下文),给父元素加结界,让父元素不受子元素影响;
    • 父元素中设置浮动float属性、绝对定位(positon)、固定定位(position)、inline-block(display)、flex(display)都可(副作用:脱流、行内级效果等,父元素由内容撑起);
    • 父元素设置overflow属性,值非默认值visible即可,一般为hidden,不会有副作用;

4、兄弟元素:上下margin重叠(collapse)

垂直方向两个块级元素的下外边距与上外边距会重叠,以较大的外边距为实际间距;

解决:只设置其中某一个元素的外边距;

5、边框border属性
应用:
实现三角形、箭头:(前提块级元素宽高=0)

  • 通过四条边框,设置三条透明;
  • 通过两条边框,设置一条透明;
1
2
3
4
5
6
7
8
 .box{
    margin: 20px;
    border-top: 100px solid transparent;//其中一个设置透明
    border-left: 100px solid #900;
    width: 0;
    height: 0;
    transform: rotate(-45deg);
  }

6、边的圆角属性:border-radius:50%(参考显示宽度:width+padding+border)
左上:border-top-left-radius
右上:border-top-right-radius
左下:border-bottom-left-radius
右下:border-bottom-right-radius

1
2
border-radius: 20px;//四个角都是圆角
border-top-left-radius: 20px 30px;//左上:左20px上30px,椭圆角

7、outline属性
效果:不占标准流空间;默认显示在border外面。
用途:

  • 去除a元素、input元素、textarea元素的focus效果;
    a,input,textarea{outline:none;}
  • 页面调试时查看元素;
    div{outline:1px solid #000;}

三、盒子背景设置

1、阴影

1
2
box-shadow: 5px 5px;
box-shadow:inset 5px 5px 5px 5px #009;

在这里插入图片描述
2、文字阴影:text-shadow

1
text-shadow:5px 5px 5px #009;//没有延伸距离,没有inset

适用于::first-line、::first-letter;

3、盒子尺寸:box-sizing
box-sizing:content-box;//宽度不包括内边距及边框(W3C标准盒子模型)
box-sizing:border-box;//宽度包括内边距及边框(IE8以前的浏览器)

4、水平居中效果
普通文本:text-align:center;(父元素)
行内元素:text-align:center;(父元素)
行内替换元素:text-align:center;(父元素)
行内块级元素:display:inline-block;(自身)text-align:center;(父元素)
块级元素(不是内部文本):margin:0 auto;(自身)

5、背景图片:background-image、background-repeat、background-size、background-position

1
2
3
4
5
6
7
8
9
10
11
background-image: url(""),url("");//类似进栈展示,第一张在最上面,不能显示,就会显示第二张;
background-repeat: no-repeat;//背景图片不平铺
background-repeat:repeat-x;//横轴平铺
background-repeat:repeat-y;//纵轴平铺
background-repeat:repeat;//默认值,平铺,不写这个属性就是平铺效果
background-size: cover;//图片等比拉伸填充背景
background-size: contain;//图片拉伸到一边到头即停止,正常全部展示,不一定覆盖背景空间
background-size: 30% 50%;//占背景的百分比,宽占总宽30,高占50,写一个就是宽,高自适应
background-size: 50px 60px;//宽 高
background-position: center/left/right center/top/bottom;//默认值居中,位置居中,宽 高
background-position: 10px 10px;//宽的开始点 高的始点

6、CSS Sprite精灵图、雪碧图(ps)
:是一种CSS图像合成技术,用于将小图片集中在一张图上,然后通过css背景定位(background-position)展示对应部分;

  • 减少网页的http请求,加快网页访问速度,减轻服务器负担;
  • 减少图片总大小
  • 解决图片太多不好命名问题

7、背景依托:background-attachment

1
2
3
background-attachment:local;//背景图跟随元素内容滚动
background-attachment:scroll;//默认值,跟随元素移动
background-attachment:fixed;//相对于浏览器窗口固定在那

8、背景属性缩写

1
2
background: image position/size repeat attachment color;
//size要写必须写在position后面;都可以省略;

9、background-image与img
在这里插入图片描述10、光标的样式:cursor

1
2
3
4
5
cursor:auto;//浏览器决定指针样式
cursor:default;//操作系统决定,一般是小箭头
cursor:pointer;//小手,也是移动到链接上的默认样式
cursor:text;//竖线,文本输入框的默认样式
cursor:none;//没有任何指针显示在元素上

四、标准流、定位

1、标准流Normal Flow(常规流、正常流、文档流【document flow】)

  • 从左到右、从上到下按顺序摆放
  • 默认情况下,互相之间不存在层叠现象(指兄弟元素之间)

2、利用margin、padding定位
在标准流中,可以使用内外边距定位;
缺点:

  • 设置某元素边距,通常会影响到标准流其他元素的定位效果;
  • 不便于实现兄弟元素层叠效果

3、利用position属性定位

  • 静态定位、相对定位,无论设置属性还是值(left、right、top、bottom)都不影响标准流;
  • 绝对定位、固定定位只要设置就会影响标准流;只是默认位置是标准流中原来的位置而已。
1
2
3
4
5
6
7
8
9
10
position:static;//默认值,静态定位,还在标准流(left、right、top、bottom没有效果)

position:relative;//相对定位,不脱离标准流,原有位置一直占着(子绝父相的由来),单纯设置这个属性,不影响其他标准流;
//left、right、top、bottom相对于自身位置,位移前自身位置依旧保存,位移后的元素相当于悬浮移动,不影响其他元素,可以实现层叠;

position:absolute;//绝对定位,设置后脱离标准流,不占原来位置,默认先在原有位置上方;
//left、right、top、bottom相对于参考的上级非static元素或浏览器视口;可以使用z-index属性;脱离标准流,但是不设置位置时,还在标准流所在位置,只是位置是虚的,会被其他元素占用,相当于悬浮在上面;

position:fixed;//固定定位,设置后脱离标准流,不占原有位置,默认在原有位置上方;
//left、right、top、bottom的设置相对于浏览器视口(viewport);

4、脱离标准流元素特点(flex布局没有脱离标准流)

原本为inline、inline-block、block的元素脱标后为block块级元素;只不过没有参考的父元素,不再占据整行,宽度由内容决定。

  • 可以随意设置宽高,一般变为块级元素
  • 宽高默认由内容决定,不占据整行,所以不能直接用margin:0 auto;水平居中;
  • 不再受标准流的约束
  • 不再与父元素有关联

5、绝对定位公式

  • left、right:auto;浏览器不会平分;
  • margin:auto;浏览器会平分;
  • margin默认为0;
    在这里插入图片描述
    6、绝对定位元素的层叠顺序
    在这里插入图片描述

五、浮动float属性

CSS中3种常用方法对元素进行定位与布局

  • normal flow :标准流、常规流、文档流(同类间不层叠)
  • absolute positioning:绝对定位(absolute、fixed)
  • float:浮动定位(同类间不层叠)

层叠高低:浮动定位>绝对定位>标准流

绝对定位、浮动定位让元素脱离标准流,宽高自身内容决定,不占据整行,实现更灵活的布局。

1、三个取值:

1
2
3
float:none;//默认,不浮动
float:left;//向左浮动
float:right;//向右浮动

2、六条规则:

  • 脱离标准流,朝着向左/向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止;
  • 浮动元素不能与行内级内容层叠,行内级内容会被浮动元素推出;(行内级元素、inline-block元素、块级元素的文字内容)–【图文环绕】
  • 行内级元素、inline-block元素浮动后,其顶部将与所在行的顶部对齐;
  • 如果元素向左/右浮动,浮动后的元素边界不会超出包含块的边界;
  • 浮动元素之间不能层叠;
  • 浮动元素的顶端不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端。

3、display:inline-block水平布局的缺陷

  • 代码换行引发元素间空隙(与font-size有关);
  • 元素中有文本,对齐方式会沿基线对齐;(与vertical-align: baseline;有关)

4、浮动的应用

  • 解决行内级元素、inline-block元素的水平间隙问题
  • 布局

5、margin负值的应用

  • 可用宽度:实际占据的宽度,没占据的可以被其他元素占据;影响布局;
  • 展示宽度:通过margin负值,可以比可用宽度大,但是多出去的不占空间;影响展示;
  • 父元素的展示宽度(width属性)为子元素的可用宽度。

问题描述一:
在进行布局时,同一行多个元素摆放后,设置margin-right让它们之间产生间距,那么最后一个元素设置的右边距总是多余的,怎么处理?

解决方案:

  • 方案一:每一行最后的元素,单独再加一个类,去除这个margin-right;
  • 方案二:通过伪类选择器;(兼容性问题:IE8以上才支持)
  • (最优)方案三:利用margin负值;
    .container固定宽度>.wrap过渡层auto宽度+margin负值>很多的item占据的是.wrap的宽度

    • .container:外层div,设置固定宽度,用于居中显示;
    • .wrap:关键过渡div,不设置宽度,总宽度(可用宽度)继承,内容宽度(展示宽度)用于内部浮动元素做可用宽度(内部浮动元素在可用宽度基础上做展示);
1
width of block(实际可用宽度/只能继承上一级展示宽度/浏览器视口) = content width(设置的展示宽度/auto/不能继承) + padding width(默认0) + border width(默认0) + margin width(默认0,用于补差)

问题描述二:
浮动元素设置边框时的中间边框重复问题?

解决方案:
给浮动元素设置margin-right:-1px;让边框重合;浮动元素的内容宽度是定值不变(可用宽度变小了),只是少占据了包含块1px的宽度,导致其他浮动元素左移覆盖;

6、清除浮动

浮动引发的不足:
浮动元素脱离标准流,不再向父元素汇报高度,父元素无法计算浮动子元素的高度,如果不设置高度没法被浮动子元素撑起来,导致高度坍塌问题;
清楚浮动目的:
让父元素计算总高度时,把浮动子元素的高度也计算进去,便于页面布局。
清楚浮动方案:

  • 给父元素设置固定高度(不推荐);
  • 利用clear样式属性,给空div元素设置,来做浮动元素结尾分割(可以写在父元素内或外)(不推荐);
  • 利用br标签的clear属性,类似clear样式效果(可以写在父元素内或外)(不推荐);
  • 利用伪元素+clear属性,给某个类添加伪元素,后续谁需要谁添加这个类;(推荐
    .clear-float::after{content:""; clear:both; display:block;}
  • 给父元素设置 overflow:hidden(非默认值皆可);(触发父元素BFC,会计算内部浮动元素高度)
1
2
3
clear:left;//要求该元素的顶部低于之前生成的所有左浮动元素的底部
clear:right;//要求该元素的顶部低于之前生成的所有右浮动元素的底部
clear:both;//要求该元素的顶部低于之前生成的所有浮动元素的底部

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、transform形变

1、transform形变属性

CSS transform属性允许通过函数传值,旋转、缩放、倾斜、平移给定元素,不占标准流,悬浮会挡住其他元素。

  • 平移(函数):translate(x,y)//数值、百分比(参照元素自身大小)
    transform: translate(5px);//x轴移动
    transform: translate(5px,5px);//x、y轴移动,不影响标准流,相当于悬浮,会挡住其他元素
  • 缩放(函数):scale(x,y)//数字、不支持百分比,函数必须加逗号
    transform: scaleX(2);
    transform: scale(2); //x、y放大
  • 旋转(函数):rotate(40deg/-40deg)
  • 倾斜(函数):skew(deg,deg)
  • 变形的原点(属性):transform-origin:center top;//x、y一起设置

2、transition过渡属性

1
transition:all 300ms linear 2s;

在这里插入图片描述

七、vertical-align垂直对齐方式

1、定义
vertical-align 会影响行内级元素在一个行盒中的垂直方向的位置。

行盒(inline-box):行内级元素(div文本)产生每一行的行高,一行的行高撑起一行的行盒,总的行盒撑起div高度;

  • 包含了内部元素的可用空间:行内级元素、inline-block元素及边距

2、取值
默认值:baseline;
行内级盒子:行内替换元素、inline-block元素

1
2
3
4
vertical-align: baseline;//默认,基线对齐
vertical-align: top;//让行内级盒子顶部与行盒顶部对齐
vertical-align: bottom;//让行内级盒子底部与行盒底部对齐
vertical-align: middle;//让行内级盒子中心与行盒中X的中心对齐

3、vertical-align:middle;做行内级盒子垂直居中的不足

不足:
因为行内级盒子中心是与X的中心(比基线高比中线低)对齐的,而行盒通过line-height=height居中,是中线居中;所以导致行内级盒子会相对偏下一些。
弥补:
配合设置父元素的字体font-size:0;
x的中心就是中线就是基线了;字体不能显示。
真正居中方法:
利用定位:img{position:relative;top:50%;tranform:translate(0,-50%)}

八、html5、css3