学习CSS一些事(上)

p.s:这是我在学习中总结出来知识,如有不对,请多包涵。谢谢。

CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则。

一、HTML+CSS布局分为三大类,一是流式布局,二是浮动布局,三是绝对定位布局。

1、流式布局

  流式布局,如同水经过不同通道,呈现出不一样的方式。流式布局也是如此。流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

2、浮动布局

  利用float(浮动)属性来并排定位元素,并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果,例如环绕在照片周围,但是当你把它应用到一 个<div>标签上时,浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页(或者其他包含块)的一边。任何显示在 浮动元素下方的HTML都在网页中上移,并环绕在浮动周围。

3、绝对定位布局

  通过设置position属性实现的布局,是CSS中规定的第三种定位机制,能够实现横向多列布局及较为复杂的定位。position属性:(1)静态定位(2)相对定位(3)绝对定位
可设置4个属性值:static(静态定位)| relative(相对定位)| absolute(绝对定位)| fixed(固定定位)。

二、W3C标准

  如图所示:

  学习CSS一些事(上)

三、CSS规定的定位机制

  1.标准文档流:

    标准文档流:从上而下,从左到右,输出文档内容。由块级元素、行级元素构成。

    块级元素:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行。如<div>、<ul>、<li>、<dl>、<dt>和<p>等等.....

    行级元素:能在同一行内显示,不会改变HTML文档结构,无法设置宽高,如果想设置宽高,需加入display:block 或者inline-block;如:<span>  、<img>和大部分表单元素。

    块级元素和行级元素都属于盒子模型。

    盒子模型=网页布局的基石,由4部分组成:
        1、边框(border)
        2、外边距(margin)
        3、内边距(padding)
        4、盒子中的内容(content)

    如图所示:

    学习CSS一些事(上)

        学习CSS一些事(上)

      盒子模型尺寸:border+padding+margin+盒子内中尺寸。

      

上一篇:学习CSS一些事(下)


下一篇:LeetCode 164. Maximum Gap[翻译]