专栏首页wfaceboss页面布局规划

页面布局规划

首先,根据事先设计好的图片对页面进行模块划分   “回”字原理(自我总结)

然后,开始使用Html+css进行架构

   页面实现知识要点:

第一,页面元素分为块级元素与行内元素

第二,     元素位置

   1)块级元素会在文档中单独占有一行  ----------------在文档流中  在位置   即从上到小排列

   2)行内元素不单独占一行                             -----------------------------------即从左到右排列

3)

   *1:行元素转换为块元素:使用display:block     *2:块元素转换成行元素:使用display:inline    *3:display:inline-block 使元素具有行元素不占一行,及块元素收到height及width的影响

第三,改变元素的位置的方法-------浮动

    何谓浮动?  

html 的样式使用float使块级元素脱离文档流( 使之从左到有一个跟随一个,若要其中某一个A不跟随之前的可对A的样式进行clear设置 )

  clear的取值有三种:

 left:清除该元素A左边的浮动

right:清除该元素A右边的浮动

both:清除该元素A两边的浮动

    特技:谁浮动引起则在本元素中使用清除,并且是清除谁。

第四,顺序

行内元素与块级元素遵循从上到下,从左到右的顺序依次渲染在页面上,所有在设计是需注意元素顺序

第五,盒子模型-------针对块级元素

例如:

(1)padding:10px       表示以内容为中心从上右下左个扩展10px       (只有1个值)

(2)padding:10px  5px   表示以内容为中心从上下各扩展10px, 左右各扩展5px       (只有2个值)

(3)padding:10px  5px  10px   表示以内容为中心从上10px  左右各5px  下10px   (有3个值)。

(4)padding:10px  9px  1px  7px  表示以内容为中心从  上10px,   右9px, 下1px,    左7px   (有4个值)

设置padding会扩大boder的大小,若要使boder保持原样大小, 原则是:以内为准 上边,左边的相对位置不变,右边,下边变化

margin:由于隔开块元素与块元元素

  (5)控制div的外框: 使用boder padding margin

第六:CSS定位----------position 

1.absolute :绝对定位

 特点:

(1)脱离文档流,不会单独占满一行  

 (2)方位受top ,left,right,bottom影响

        *1:一个块的top ,left,right,bottom是相对于什么呢?

     1)如果它的父元素做定位,则相对于最近的一个父元素。

    2)父元素没有定位则相对于body

2.相对定位:relativ

特点:

   (1)相对定位没有脱离文档流,会单独占一行,

     (2)方位受top ,left,right,bottom影响。

    (3)相对定位的top ,left,right,bottom相对于块的最近的一个父元素

3.固定定位  fixed

特点:(1)脱离文档流,不单独占一行    (2)top ,left,right,bottom的值相对于body

top ,left,right,bottom只有设置了定位(绝对,相对,固定)的时候才可以用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单编程思想

    在编写程序的时候,经常会想一下:我要做什么,我在做什么,更好的方法是把详细需求落实到文档,并时刻核对文档(有文档前提下)。

    wfaceboss
  • 控制器到视图的传值方式

    (3)TempData        TempData实际上保存在Session中,控制器每次执行请求时都会从Session中获取TempData数据并删除该S...

    wfaceboss
  • jquery随笔

    首先,jQuery对象 绰号$ ,只要是对象就会有属性和方法。针对jQuery对象是可以传递参数给他的,不同的参数有不同的意图,该对象可以自动辨别。

    wfaceboss
  • 前端学习(13)~css学习(七):浮动

    上图中可以看到,h1标签是块级元素,占据了整行,span标签是行内元素,只占据内容这一部分。

    Vincent-yuan
  • CSS 让div,span等块级、非快级元素排列在同一行

    <div style="height: 40px;width: 80px;background-color: red" >

    授客
  • CSS3 box-shadow属性设置阴影效果用法大全

    CSS3 box-shadow 属性用来向边框添加一个或多个阴影效果,该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 ins...

    赵帆同学GXUZF.COM
  • 可视化格式模型-clear特性

    ‘clear’特性 该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatt...

    练小习
  • URL 跳转漏洞的利用技巧

    https://www.example.com/?go=https://www.google.com/

    HACK学习
  • tooltip(title美化)教程——jquery的特效

    Youngxj
  • css3 3d变换和动画——回顾

    1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d ...

    用户1197315

扫码关注云+社区

领取腾讯云代金券