HTML,Css基础(2)~盒模型,浮动布局,弹性布局

本文深入探讨HTML与CSS的基础知识,包括盒模型、元素的外边距重叠、浮动布局的原理及应用,以及如何通过设置样式优先级来控制样式显示。此外,还详细介绍了如何实现元素的隐藏、弹性布局、2D和3D变形以及CSS动画,为网页布局和设计提供了全面的理解。
摘要由CSDN通过智能技术生成

1.图片精灵(雪碧图)

(1)Link标签:引入外部文件
	<link rel="stylesheet" href="sprite.css">
(2)用到图片精灵的时候如何设置背景大图的尺寸?
不用看大图的原有尺寸,先看纵向和横向有多少小图,然后分别用个数*元素对应轴的尺寸。
(3)图片精灵的定义:将很多张小图整合成一张大图片,然后通过css样式在页面中显示出来某个小图片,这种技术叫图片精灵。
(4)图片精灵的好处:1.减少页面的请求次数,2.提高页面的加载速度。

2.元素盒模型

(1)一个html元素,从里到外分为4个部分,内容盒(content),内间距(padding),边框(border),外间距(margin)。
(2)默认情况下,给元素设置的宽高,是内容盒的宽高,不包含边框与内间距。
(3)设置盒模型,默认是内容盒content-box。

	box-sizing: content-box;

(4)Border-box是边框盒。

	box-sizing: border-box;
(5)计算宽高时:
按照内容去结算的是内容盒;
内容+内边距+边框=是边框盒。

3.外边距重叠的条件

(1)必须是块元素,
(2)必须是向下的外边距,
(3)没有边框

4.浮动布局

(1)float,设置元素使用浮动布局,浮动有左浮动和右浮动。元素在使用浮动后,会脱离原有的文档流,在浮动文档流中,块元素是横向排列。
(2)注意:在最后一个浮动元素结束的地方必须清除浮动。方法:

  1. 在最后一个浮动元素后面添加一个元素,
	clear:both
  1. 浮动的元素,都会有一个共同的父元素,可以为这个父元素添加一个后缀伪元素 ,在后缀中清除浮动。
	.clear-fix:after{
		content: "";
		display: block;
		clear: both;
	}
  1. 使用after和bifore双类伪元素清除浮动

5.样式的优先级

(1)Id选择器>class选择器>标签选择器。
(2)Id选择器==100,class选择器==10;标签选择器==1;当不同的选择器连用时,优先级会增加。
(3)当两个选择器优先级一样时,会选择靠后的选择器样式,(!Important 样式等级==10000)。

6.元素的隐藏

(1)Rgba:颜色三基色(red,green,blue),a代表透明度,默认是1,0是透明。值的范围是0.0—1.0。
(2)Display:none,隐藏元素,在文档流中没有位置,
(3)Visibility:hidden,隐藏元素,在文档流中有位置。

7.弹性布局

(1)开启弹性布局:Display:flex;
(2)设置主轴的对其方式

flex-direction: row;
row默认的:主轴为水平方向,起点在左端 
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿

(3)设置项目(子元素)在容器(父元素)中主轴方向的占比。

 flex-basis: 15%;值是百分比

(4)更改项目在容器中的排列顺序,数字越大越靠后。

 order: 3;值默认是0

(5)项目在主轴的对齐方式(项目的排列方向)

justify-content:space-around;
flex-start(默认值):左对齐。
flex-end:右对齐。
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

(6)项目在交叉轴的对齐方式

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。   
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。   
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

(7)当容器变大的时候,项目也会随之变大。默认值是0不参与分配。

flex-grow: 1;

(8)当空间不够的情况压缩每个项目的比例

flex-shrink: 2;

(9)Flew-wrap:折行属性,规定项目如何换行。默认是不换。

flex-wrap: wrap;

(10)Flex总结

flex-direction:属性决定主轴的方向
   flex-wrap:换行的方式
   flex-flow:上述两种的简写
   justify-content:项目在主轴上的对齐方式
   align-items:交叉轴的对齐方式
   align-content:属性定义了多根轴线的对齐方式。
   如果项目只有一根轴线,该属性不起作用。

8.2d变形

(1)transform变形样式:
①translate移动
②rotate旋转
③scale缩放deg°

transform: rotate(30deg);

(2)设置变形的原点,默认是中心点50%,50%。

transform-origin: 100% 100%;

(3)平移变形:两个参数分别代表横向偏移量和纵向偏移量

transform: translate(50px,30px);

(4)缩放变形:两个参数分别代表横向缩放比和纵向缩放比

transform: scale(0.5,3.5);

9.3d变形

(1)属性定义了3d元素距离视图的间距,单位是像素。

perspective: 1000px;

10.css动画

  1. Css过渡动画:transition;
  2. Css关键帧动画:animation:ani1 3s linear infinite;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值