css网页有哪些布局
这篇文章主要介绍了css网页有哪些布局,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联-专业网站定制、快速模板网站建设、高性价比福建网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式福建网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖福建地区。费用合理售后完善,10年实体公司更值得信赖。
1、左边固定,右边自适应布局的两种实现方式
效果图如下:
大屏展示:
小屏展示:
第一种实现方式通过负边距与浮动 实现左边固定,右边自适应的布局。 主要代码如下:
设置子元素的margin,然后父元素必须浮动。 用父元素包裹,主要是因为right会覆盖left,从而导致left内容不可以看到,如果直接在left上设置margin或者padding会导致布局变化,因此只能再用一个div包裹内容,并且去除right覆盖的宽度。-margin必须大于或等于自身的宽度才会上移
实现过程中需要注意的是:
1.自适应的容器需要容器包裹住,否则容器内的内容会被覆盖。
2.right容器的负边距必须大于或等于自身的宽度才会上移。
3.如果right容器负边距等于自身的宽度它会靠右对齐,如果负边距等于-100%,则会靠左对齐。
第二种 通过浮动布局来实现左边固定,右边自适应的布局
主要的代码如下:
左边固定宽度,右边自适应
实现过程中需要注意的是: 1.left需要脱离文档流,而right只需要正常显示就可以。
2.left只是覆盖在right上边,因此想要让right内容完整显示需要给right padding-left或者margin-left。
大屏展示:
小屏展示:
主要代码如下:
即左右固定,中间自适应,它可以利用margin-left为负数来实现,它的实现原理就是margin为负值可以改变float元素的排列位置当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移
实现过程中需要注意:
1.中间自适应的div需要放在left和right容器前面并且内容div需要用父容器包裹
2.left和right容器向同一个方向浮动。
主要代码如下:
左右固定宽度并且向两边浮动,中间的div设置两边的margin该方案有一个缺陷,在小屏幕情况下回导致right被挤下去,main没有了
实现过程中需要注意:
1.该方式只需要注意中间自适应的div需要放在left和right容器的后面。
2.left和right容器向两边浮动。
主要代码如下:
使用flex 实现“双飞翼布局” flex 语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
如果未了解过flex布局请移至文末点击链接查看 阮一峰大神写的关于flex语法
3、定位布局
这边就不絮絮叨叨的讲一些基础的css定位知识了(ps:不会的请自行到w3c官网查阅),我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。
第一:使用多个fixed时,注意自己需要基于什么定位,因为如果父级有用transform属性时,可能会导致子元素的fixed基于父元素容器定位,而不是基于body定位。效果如下:
在上图中我可以发现中间黑色的小框是基于父级来定位,并且宽度也基于父容器的50%。详细的请看下面代码:
关于position的定位的坑 -删除提示是否删除该项,点击确定确定取消+添加你是我的小可爱 关闭
如果我们尝试把父容器上的transform属性去除,我们可以看到 子容器没有基于父容器定位,而是基于body定位的,宽度也是基于body给的50%宽度。效果图如下:
详细请看代码:
关于position的定位的坑 -删除提示是否删除该项,点击确定确定取消+添加你是我的小可爱 关闭
第二:解决在手机上的抖动问题(ps:这个问题我参照了网上大神写的一篇博客请移至文末查看)
**一、**在webkit内核浏览器中 给fixed加上防抖样式 - webkit - transform: translateZ(0);
**二、**设置html 和body 的css {height:100%;overflow:auto;margin:0;} 这个影响全局样式不建议使用。
三、在fiexd内设置position:absolute,如下:
4、百分比布局 主要通过设置元素的宽度为百分比或者高度为百分比。比如:width:50%; height:50%; 这样的写法。
5、响应式布局(主要使用媒体查询来实现响应式设计) 主要使用CSS3 @media 来做不同终端的响应式设计
主要在css文件中写入
@media screen and (max-width:600px){ 写入当屏幕小于或等于600px时的样式 } @media screen and (min-width:900px){ 写入当屏幕大于或等于900px时的样式 } @media screen and (min-width:600px) and (max-width:900px){ 写入当屏幕在600px-900px之间的样式 } @media screen and (max-device-width: 480px){ 写入最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率 } @media only screen and (-webkit-min-device-pixel-ratio: 2){ 写入专门针对iPhone4的移动设备样式 } @media all and (orientation:portrait){ 写入设备在纵向时的样式 } @media all and (orientation:landscape){ 写入设备在横向时的样式 } @media not print and (max-width: 1200px){ not是用来排除某种制定的媒体类型 写入在除打印设备和设备宽度小于1200px下的所有设备的样式 } @media only screen and (max-device-width:240px){ only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。 写入只能在最大设备宽度为240px的屏幕下使用的样式 }
感谢你能够认真阅读完这篇文章,希望小编分享的“css网页有哪些布局”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网站名称:css网页有哪些布局
地址分享:http://scyanting.com/article/igsedi.html