常见的CSS布局样式

derek_334892 发布于2019-08-30 11:20 / 1317人阅读

摘要：在定义样式前要设定一些默认样式一列布局两个要点页面内容区域有一个固定宽度。自适应宽的列根据浏览器窗口的大小自动判断宽度，主要放置主体内容。

在定义样式前要设定一些默认样式

*{margin:0;padding:0;}
html body{height:100%;}

一列布局

两个要点

页面内容区域有一个固定宽度。
页面内容区域在浏览器窗口中自适应居中

实现方法：

页面内容区域box{width: 自定义宽度；margin：0 auto;}

两列布局

*{margin:0;padding:0;}
html,body{height:100%;}
aside,main{height:100%;}
aside{background:#72C7A1;}
.main{background:#E0C569;}

aside{width:200px;float:left;}
.main{margin-left:200px;}

一列固定宽，一列自适应宽：

固定宽度的列：通常称为边栏（左右均可），主要放置一些固定性的内容，如导航，菜单之类。
自适应宽的列：：根据浏览器窗口的大小自动判断宽度，主要放置主体内容。

应用场景：

后台管理、用户中心、博客等

三列布局

特点：

三列布局，中间宽度自适应，两边定宽。
中间列放置主体内容，在浏览器中优先展示渲染。

原理：

当元素处于浮动状态时，设置负margin >= 子元素宽度时，子元素会覆盖到兄弟元素之上

*{margin:0;padding:0;}
html,body{height:100%;}
main,.sidebox-left,sidebox-right{height:100%;}
main{background:#1A2F90;color:#ffff;}
.sidebox-left{width:200px;background:#CDE36D;}
.sidebox-right{width:300px;background:#FB81E7;}

main,.sidebox-left,sidebox-right{float:left}
main{width:100%;
** box-sizing:border-box; **这个是将标准盒模型转化为框架盒模型
padding-left:200px;}
.sidebox-left{margin-left:-100%;}
.sidebox-right{maring-left:-300px;}

云服务器 GPU云服务器 css的样式 html的css样式样式和布局 iOS书架布局样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114925.html

前端常见知识点汇总（面试）-HTML和CSS部分

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 评论0 收藏0
前端常见知识点汇总（面试）-HTML和CSS部分

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

wuyangnju 2019-08-02 13:58 评论0 收藏0
css常见的各种布局上（两列布局）

摘要：目录一大结构上的导航栏和内容区域两栏布局博客园为例腾讯课堂个人中心页慕课网个人中心页个人中心页二版的结构三类似九宫格布局的两列结构四图文两列布局左图右文字非垂直居中，左图，右固定行数的文字，右侧文字和左边图片垂直居中。目录：一、大结构上的导航栏和内容区域两栏布局1、博客园为例2、腾讯课堂个人中心页3、慕课网个人中心页4、github个人中心页二、mini版的nav+cont结构三、类似九宫格...

番茄西红柿 2019-04-23 11:40 评论0 收藏0
css权重与常见布局（1）

摘要：实战例题某厂前端工程师笔试题基于以下的结构和样式，文本的颜色是计算权重权重最大因为所以文本显示的这种颜色 CSS的选择器类型与权重值通配符选择器权重值为 0 元素选择器，和伪元素(例如::before) 权重值为 1 类选择器(class)，属性选择器，伪类(:hover) 权重值为 10 ID选择器权重值为 100 行内样式权重值为 1000 ！impor...

CoderStudy 2019-08-30 11:03 评论0 收藏0
CSS常见问题小结

摘要：常见问题小结一行内样式内联样式外部样式行内样式代码写在具体网页中的一个元素内比如一般不需要担心样式优先级与样式覆盖在制作页面的时候需要为很多的标签设置属性，所以会导致页面不够纯净，文件体积过大不利于，后期维护成本高。 CSS常见问题小结一、行内样式、内联样式、外部样式行内样式：代码写在具体网页中的一个元素内；比如：一般不需要担心样式优先级与样式覆盖在制作页面的时...

ivyzhang 2019-08-30 10:48 评论0 收藏0