静态页面布局总结（新手）

sushi 发布于2019-08-29 17:30 / 1685人阅读

摘要：学习一个月了，对和页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面的布局就不会有太大的问题再说布局之前先说一下元素的显示模式分类。

学习HTML一个月了，对HTML和Css页面的静态布局进行一次总结

总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，
那么对于静态的页面的布局就不会有太大的问题
再说布局之前先说一下元素的显示模式分类。
    元素的显示模式分类可以分为块级元素，行内元素，行内块级元素。
    块级元素是垂直排列的，每个元素会独占一行，行内元素和行内块级元素不会独占一行，会水平排列。
    当然元素的显示模式是可以随便转换的。
下面先来说说垂直布局，
    垂直布局让元素在页面里面垂直排列，这个是比较简单的，我们知道在正常情况下页面里的
    块级元素都是从上到下依次排列的，那么这个垂直布局就相对来说简单点。只要把块级元素依次写在页面中，
    那么浏览器会默认的让这些块级元素垂直排列，如果有行内块级元素或行内元素
    则可以转化为块级元素来实现元素的垂直排列。
然后是来说水平布局，
    水平布局就是让元素在页面里面水平排列，这个比较垂直排列会相对复杂一些，因为水平排列会涉及到浮动，
    因此会出现很多问题，比如高度塌陷，覆盖等。而且一般都是通过浮动来实现水平布局，所以会遇到很多问题，
    这就要求我们对浮动有一定的了解，下面我会写一些布局的细节以及浮动的各种情况。
    首先最常用的就是居中显示，各种居中方式中我们最常用的就是text-align：center ， 
    text-align：center可以让下面几种情况居中：
       可以让该元素的文本内容水平居中，该元素中的行内元素和行内块级元素，
       但是不能让元素内部的块级元素水平居中
       垂直居中，用的最多的是让line-height=元素的height，还有vertical-align，
       也是垂直对齐，他一般是让图片右边的文本对齐图片的上中下。
    然后用的多的就是内外边距了，就是margin和padding，很好的理解和运用内外边距能够
    让你很方便的实现开头或结尾的一些距离等。
     然后就是定位了，页面布局的定位最常用的就是浮动（float）和定位（position），
     感兴趣的可以去我的日记了有详细的介绍。
     本人学习前段一个月，完全的菜鸟，希望大家多多指点。

云服务器 GPU云服务器页面布局 html页面布局 aspx页面布局 php开发页面布局

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

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

静态页面布局总结（新手）

摘要：学习一个月了，对和页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面的布局就不会有太大的问题再说布局之前先说一下元素的显示模式分类。学习HTML一个月了，对HTML和Css页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面...

MasonEast 2019-08-02 12:11 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
分享一些遇到的好文章

摘要：移动端布局总结移动端全兼容的移动端知识涵盖伪类等全移动端不得不讲的头标签移动端自适应方案移动端适配总结布局新旧混合写法详解兼容微信使用实现手淘页面的终端适配淘宝弹性布局方案实践理解所需的知识产生的小数像素问题高性能动画动画的性能优化处理和动移动端rem布局总结移动端全兼容的flexbox 移动端知识(涵盖、css、伪类等)【全】移动端不得不讲的头标签移动端自适应方案移动端适...

Tikitoo 2019-08-20 14:49 评论0 收藏0
设计架构

摘要：先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案，希望具有参考价值。，和都是常见的软件架构设计模式，它通过分离关注点来改进代码的组织方式。如何无痛降低 if else 面条代码复杂度相信不少同学在维护老项目时，都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差，有没...

graf 2019-06-24 17:56 评论0 收藏0