引子

之前也自己陆陆续续地学了一些web方面的知识,包括前段和后端都有涉及到,自己也比较感兴趣,感谢peter老师,愿意无偿提供从零开始的教学,之前也看过peter老师的一些视频,节奏非常适合我,决心跟着peter老师系统地学习一遍。感谢peter!

1.CSS:层叠样式表

CSS,层叠样式表,层叠的意思是,作用域的范围越小则优先级越高,就像把样式一层一层叠起来。

通过建立CSS可以控制网页的样式,并且可以使内容和样式分离,这样更加便于管理样式,之前看过一个文章,当样式特别复杂的时候,用面向对象的思想来控制样式,非常有效。

为了使得CSS在网页中生效,需要在head标签中添加link:

<link rel="stylesheet" href="main.css">

main.css可以用相对路径(如上所示就是指在html文件的相同目录下)表示文件的位置。

CSS文件内容可以以一个标签开头,大括号里面的内容是该标签的样式,也可以是.class或者#id开头,用来精确控制样式:

body{
background: orange;
}
h1{
background: white;
color: green;
text-align: center;
}

以上内容可以发现虽然h1标签在body内,但是h1的样式还是以h1为准,因为h1的作用域更加小,表达的内容更加精确。

2.行内元素和块元素

html页面上的元素有两种:块级元素、行内元素(内联元素)

块元素:如h1等标签代表的元素,一行中只能有一个元素,如果有第二个块元素,则会另起一行;

行内元素:如i等表示格式的元素,同一行中可以有多个元素,如果出现第二个元素,并且一行没有满,则会跟着第一个元素出现在同一行中。

通过Chrom等浏览器的开发者工具:审查元素,可以查看到页面中的每个元素的详细信息,并且可以实时查看或者更改元素的样式,非常方便。

3.块元素的盒子模型

如上图所示,每个块元素都是这样的盒子模型占据网页空间。每个盒子模型由content、padding、border、margin组成,通过设置可以改变每个填充部分的宽度、颜色、填充形式等;

对块元素设置宽度和高度,改变的是content的高度和宽度。

4.元素的class和id

通过对元素设置class和id,可以更加精确地控制元素的样式。

对标签添加class属性,可以让元素继承某个class的所有格式,同一个class可以在多个元素上出现,

对标签添加id属性,可以给元素单独设置属性,同一个id只能是一个元素。

class和id一样遵循层叠原则,更加精确的id往往具有更高的优先级:

.welcome{
color: blue;
font-weight: bold;
}
#first_text{
font-weight: normal;
}

如上样式,如果一个p既有class=“welcome”属性,又有id=“first_text”属性,则他的样式为蓝色非粗体。

5.通过css设置块元素位置

了解了块元素的组成结构之后,通过设置块元素的margin,可以轻松调整块元素的位置

margin: 10px 20px 30px 40px 通过设置4个数值可以分别对上右下左(顺时针方向)四个边距进行调整;

margin: 10px 20px 通过设置两个数值,则这两个数值会被循环两次,得到四个边距值;

margin: 10px 同理,如果只设置了一个值,则会循环四次,得到四个边距值;

如果设置三个值,则会将第二个值同时用于左右方向;

除了用margin同时设置外,还可以单独设置margin-left、margin-right、margin-top、margin-bottom

如果要设置居中,则将左右margin设置为auto就能简单实现

padding、border同理

前端学习_01_css网页布局的更多相关文章

  1. web前端如何让网页布局稳定性和标准性?

    刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面.我们写的网页布局怎么样才是合理的, ...

  2. Day6前端学习之路——布局

    一.定位 1)静态定位  position:static(默认) 2)相对定位 position:relative(要配合top.bottom.left.right等属性来使用) 3)绝对定位 pos ...

  3. 【前端学习】网页tab键的实现 01

    友情提醒:阅读本文需要了解一些基本的html/Css/Javascript知识 前端常用tab键的实现,用到的原理是当点击一个元素时,通过javascript操作css的display属性,达到控制另 ...

  4. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  5. 前端学习(20)~css布局(十三)

    常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...

  6. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  7. 前端学习笔记--CSS布局--文件流定位

    1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. 前端学习笔记--CSS布局--盒子模型

    1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:

  9. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

随机推荐

  1. PHPstorm 函数时间注释的修改

    正常的PHPstorm里面函数方法的注释是没有动态时间设置的,但是看了PHP file里面有时间日期的注释,而PHP Function Doc Comment 却没有,让很多PHPer很头疼,今天在搜 ...

  2. Postgres是如何管理空值的

    创建表test,y字段插入null. test=# create table test(x bigint,y bigint,z text); CREATE TABLE test=# insert in ...

  3. Cs Round#56 D Find Path Union

    题意:有一棵如下的完全二叉树,求所有给定结点到根节点的路径的并有多少条边. 一开始联想到线段树,发现结点的排布很像线段树的标号.于是模仿线段树敲了一下,交上去发现3个点MLE了... 无心优化,跑去看 ...

  4. 如何配置 Health Check?- 每天5分钟玩转 Docker 容器技术(107)

    容器状态是 UP 的,应用就是健康的吗? 还真不一定!Docker 只能从容器启动进程的返回代码判断其状态,而对于容器内部应用的运行情况基本没有了解. 执行 docker run 命令时,通常会根据 ...

  5. AspNet Core 初步认识

    Core 的出现对我我没有很大的影响,当时在Core要发布的时候听到周围的人再聊再谈,我没有去太多关注,就是一个屌丝开发人员. 直到又一次偶然见到一位特别喜欢.net的老开发人员谈起Core时落泪了, ...

  6. 数据库 E-R模型

    数据库 E-R模型被定义被两种模型  "实体模型"  AND "关系模型" 1.1 实体模型 如图:这是一个"项目表" Project    ...

  7. C++ size_t 和size_type的区别

    为了使自己的程序有很好的移植性,c++程序员应该尽量使用size_t和size_type而不是int, unsigned size_t是全局定义的类型:size_type是STL类中定义的类型属性,用 ...

  8. Unity打包android的apk与数据包.obb分离和apk签名

    那么,通过以上图片.我相信大多数人已经知道怎么创建了,apk签名比較简单,假设之前没有签名文件.那么选择图中的Create New Keystore然后在以下两个password框中输入passwor ...

  9. 输入url会发什什么

    从输入url到页面加载完成发生了什么 整体来说有几个基本的点: 1.浏览器的地址栏输入url并按下回车 2.浏览器查找当前url是否存在缓存,并比较缓存是否过期 3.DNS解析url对应的IP 4.根 ...

  10. 5.python函数

    一.递归函数 如果一个函数在内部调用自身,那么这个函数就叫做递归函数. 1. 必须有一个明确的结束条件: 2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少: 3.递归效率不高,递归层次过 ...