当前位置: 首页 > Web前端 > CSS

使用CSS进行网页布局

时间:2023-03-30 18:31:41 CSS

二栏式和三栏式布局更好的参考布局:也称为布局布局,是网页UI设计者对有限的视觉元素进行的有机排列组合。版面设计包括报纸、杂志、书籍装帧、产品样本、日历和网页的平面设计。网页作为新媒体,在设计上与传统纸质媒体存在一些差异,主要有以下两个特点:网页的宽度可以根据显示器的分辨率进行调整,网页的长度理论上是无限。不改变display属性,使用div实现逐列自适应布局:div单列布局:基本固定宽度,如百度首页一般做法:margin:0auto;

本页所有样式代码默认省略:height:500px;background:#ccc;div两栏布局:一般做法:float:left;float:right;
div三列布局:一般做法:同上,div多栏布局等等,四栏以上Hardly
特殊三栏布局:两侧固定宽度,中间栏自适应mixLayout:使用最多的,比如网站框架布局(比如left,headernavigation,bottombar,pagemainbody,rightpanelbar)</div>。主要{宽度:1000px;高度:600px;保证金:0自动;背景:#ccc;}.left{宽度:10%;高度:100%;向左飘浮;;高度:100%;浮动:左;}.right{浮动:右;宽度:10%;高度:100%;背景:橙色;}.navbar{宽度:100%;高度:100px;背景:黄色;}.content{宽度:100%;高度:400px;背景:绿色;}.footer{宽度:100%;高度:100px;background:red;}页面上的元素是block之间的关系,存在三种状态:blocknexttoblock,blocknestedblock,blockstackedblock通过css来正确放置这些block的位置,布局的网页自然就完美了。CSS浮动属性详解:在网页荒芜的时代,浮动设计的初衷只是:文字环绕效果。也就是说,将文本环绕在图像周围。在现代CSS中,任何元素都可以浮动。不管元素本身如何,浮动元素都会生成一个块级框。浮动与文档流半分离。和position:absolute一样,float也有脱离文档流的作用。不过,float虽然脱离了文档流,但还是会占据位置,其他文本内容会继续按顺序排列。浮动是魔鬼,会带来破坏:浮动会使父元素在高度上塌陷。清除浮动:主要解决子元素浮动导致父元素内部高度为0的问题。清除浮动的方法分为两类:一类是使用clear属性在浮动元素容器末尾添加一个空div,用clear:both属性关闭元素,或者使用:after伪元素在浮动元素容器的末尾添加一个带有clear的div。:具有both属性的元素。/*用伪元素清除浮点数*/.clearfix::after{content:'';明确:两者;可见性:隐藏;显示:块;高度:0;}二是触发BFC(BlockFormattingContexts,块级格式化上下文),让父元素可以包含浮动元素。例如,添加overflow:hidden/auto;到浮动元素的容器触发BFC清除浮动。BFC也可以用来实现两列自适应布局,非常好用。1.【什么是BFC?](https://zhuanlan.zhihu.com/p/25321647)Formattingcontext是CSS2.1规范中的一个概念。它是页面中的一个渲染区域,有一套渲染规则,决定了它的子元素将如何定位,以及与其他元素的关系和交互。最常见的格式化上下文是块格式化上下文(简称BFC)和内联格式化上下文(简称IFC)。具有BFC特性的元素可以看作是隔离的独立容器。容器内部的元素在布局时不会影响外部元素,BFC具有一些普通容器不具备的特性。通俗地说,BFC可以理解为一个封闭的大盒子,盒子里面的元素再大也不会影响到外面。2.触发BFC,只要元素满足以下任一条件,即可触发BFC。特性:*body根元素*浮动元素:floatvalue除了none以外*绝对定位元素:position(absolute,fixed)*显示是inline-block,table-cells,flex*overflowvisible以外的值(hidden,auto,滚动)