星空网 > 软件开发 > 网页设计

学习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一些事(上)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

专业的关键词研究工具——Wordtracker:https://www.kjdsnews.com/a/1783190.html
AI 平台 Runway 让用户可以用文字转换图像、视频:https://www.kjdsnews.com/a/1783191.html
优爱腾芒还有必要坚持虚拟制作么?:https://www.kjdsnews.com/a/1783192.html
盒马再降价:“被惯坏”和“不信命” :https://www.kjdsnews.com/a/1783193.html
亚马逊多项新政,错过将影响账号安全!:https://www.kjdsnews.com/a/1783194.html
不到一个月,中东将迎来最大购物高潮!:https://www.kjdsnews.com/a/1783195.html
跨境支付百科——巴西支付篇:https://www.kjdsnews.com/a/1836648.html
大福地快捷酒店预订 大福酒店怎么走:https://www.vstour.cn/a/365187.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流