css控制背景图片大小自适应
css怎么设置左边固定右边自适应?
css怎么设置左边固定右边自适应?
1.浮动
将左边固定区域设置浮动,右边margin设置为左边固定div的宽度。
2.绝对定位(absolute)
将左边固定区域设置相对定位,右边margin设置为左边固定div的宽度。
3.flex弹性布局
网格布局
5.左边浮动,让right单独成为一个BFC,BFC的区域不会与float box重叠。
如何实现自适应宽度?
css自适应宽度有2种方式:
1.是通过百分比来控制宽度;
2.可以通过块状元素自动占满父级的宽度的特性来实现PS:当然还有一些方法,比如css3的flex-box布局,用flex布局的话,非常的方便可以实现多种自适应布局,但是,只适用于移动端,PC端上面只有高版本的浏览器才兼容,低版本的浏览器是不兼容的。
css中基本布局?
css中基本的布局方式有以下几种:
1、静态布局
最传统的布局方式,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果大于这个宽度则内容居中外加背景
2、自适应布局
可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局(页面元素位置可能发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。
自适应布局页面里面元素的位置会变化,很好的解决了流式布局中的大屏空间利用率不高弊端。屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
3、流式布局(又别名 百分比布局 %)
网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局。
意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。
4、响应式布局:媒体查询
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。主要依靠是css的媒体查询。
每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
5、弹性布局 (rem/em flex布局)