CSS--布局模型,颜色值,长度值
目录
一、布局模型
网页布局模型:个人理解,就是对html中各个元素进行一个排列。而排列的方法可以分为三种:流动模型、浮动模型、层模型。
二、流动模型
这是网页默认情况的布局模式。
特征:
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。(独占一行)
- 内联元素都会在所处的包含元素内从左到右水平分布显示。(跟其他行内元素处于同一行)
三、浮动模型
用来解决块级元素的霸道特征,比如想让两个块级元素处于同一行,就可以使用浮动模型;
具体表现形式:可以用css的float属性,来控制元素浮动。
四、层模型
类似photoshop中的图层编辑功能一样,让每个html元素能够在网页中精确定位。
具体操作:用css的position属性来支持层模型。
层模型有三种形式:
1、绝对定位(position: absolute)
将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行定位。
如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
2、相对定位(position:relative)
相对于之前的位置进行偏移。移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
3、固定定位(position: fixed)
和absolute类似,不过他是相对于视图本身(屏幕内的网页窗口)。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,
除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。
4、absolute和relative的组合使用
回顾上面 absolute的关键点:1、参照物:它的父元素 2、并且参照物必须是定位元素。
relative的关键点:1、参照物:自己本身
所以如果需要将子元素相对父元素绝对定位时,就可以利用relative将父元素变为定位元素,子元素使用absolute,就可以进行绝对定位了。
五、颜色值
在网页中的颜色设置是非常重要,有字体颜色(color
)、背景颜色(background-color
)、边框颜色(border
)等,设置颜色的方法也有很多种:
1、英文命令颜色
比如:p{color:red;} 将颜色设置为红色。
2、RGB颜色
这个与 photoshop
中的RGB
颜色是一致的,由R(red)
、G(green)
、B(blue)
三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是RGB
设置,但是其每一项的值由 0-255
变成了十六进制00-ff
。
p{color:#00ffff;}
六、长度值
目前比较常用到px(像素)
、em
、% 百分比
,要注意其实这三种单位都是相对单位。像素指的是显示器上的小点(CSS规范中假设“
1、像素90像素=1英寸
”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px
)作为单位。
2、em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
特殊情况:当给 font-size 设置单位为 em 时,此时计算的标准以 它的父元素的 font-size 为基础。
3、百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。
CSS--布局模型,颜色值,长度值的更多相关文章
- CSS布局模型学习
转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习 参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- 前端之CSS布局模型
一.css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...
- 浅析css布局模型1
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- 从零开始学习html(十二)CSS布局模型——上
一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...
- CSS 布局模型
css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- CSS ? Layout Module : CSS 布局模型
1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...
随机推荐
- 洛谷 P1685 游览 解题报告
P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...
- 【django基础之ORM,增删改查】
一.定义 1.什么是ORM? ORM,即Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在具体的操作业务对象的时候, ...
- Python word_cloud 部分文档翻译 标签云系列(二)
转载地址:https://zhuanlan.zhihu.com/p/20436581上文末尾提到 Python 下还有一款词云生成器.amueller/word_cloud · GitHub 可以直接 ...
- R语言--时间序列分析步骤
大白. (1)根据趋势定差分 plot(lostjob,type="b") 查看图像总体趋势,确定如何差分 df1 = diff(lostjob) d=1阶差分 s4_df1=d ...
- K8S从私有仓库拉取镜像
通常来讲,我们在通过公共镜像仓库拉取docker镜像的时候,不需要任何的认证操作,但我们在构建了企业的私有镜像以后,就不得不在拉取镜像之前通过用户名密码来完成认证. 在docker单机环境中,我们可以 ...
- TOML 详解
TOML的由来 配置文件的使用由来已久,从.ini.XML.JSON.YAML再到TOML,语言的表达能力越来越强,同时书写便捷性也在不断提升. TOML是前GitHub CEO, Tom Prest ...
- tf.nn.conv2d 参数介绍
tf.nn.conv2d是TensorFlow里面实现卷积的函数,参考文档对它的介绍并不是很详细,实际上这是搭建卷积神经网络比较核心的一个方法,非常重要 tf.nn.conv2d(input, fil ...
- JVM小结--类文件结构
字节码是构成Java平台无关性的基石.实现语言无关性的基础是虚拟机和字节码存储格式. Java语言中的各种变量.关键字和运算符的语义最终是由多条字节码命令组成,因此字节码命令所能提供的语义描述能力肯定 ...
- 转:iOS-CoreLocation:无论你在哪里,我都要找到你!
1.定位 使用步骤: 创建CLLocationManager示例,并且需要强引用它 设置CLLocationManager的代理,监听并获取所更新的位置 启动位置更新 1 2 3 _manager = ...
- codevs 3327 选择数字
3327 选择数字 时间限制: 1 s 空间限制: 256000 KB 题目描述 Description 给定一行n个非负整数a[1]..a[n].现在你可以选择其中若干个数,但不能有超过k个连续 ...