引子

之前也自己陆陆续续地学了一些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. Java消息服务初步学习(基于Spring In Action的整理)

    几个名词 Java消息服务(Java Message Service)是一个Java标准,定义了使用消息代理的通用API. 消息代理(message broker):类似于邮局的作用,确保消息被投递到 ...

  2. 这个接口管理平台 eoLinker 开源版部署指南你一定不想错过

    本文主要内容是讲解如何在本地部署eoLinker开源版. 环境要求 1.PHP 5.5+ / PHP7+(推荐) 2.Mysql 5.5+ / Mariadb 5.5+ 3.Nginx(推荐) / A ...

  3. js比较日期大小

    第一种方法: var starttime = "2007-1-2 7:30"; var endtime = "2007-2-31 8:30"; alert(Co ...

  4. Python爬虫(十九)_动态HTML介绍

    JavaScript JavaScript是网络上最常用也是支持者对多的客户端脚本语言.它可以收集用户的跟踪数据,不需要重载页面直接提交表单,在页面嵌入多媒体文件,甚至运行网页游戏. 我们可以在网页源 ...

  5. Android官方技术文档翻译——Gradle 插件用户指南(5)

    昨晚把第五章未译完的几句话攻克了.只是第六章没怎么译,明后天又是周末,假设周一前第六章翻译完的话,周一再发第六章. 本文译自Android官方技术文档<Gradle Plugin User Gu ...

  6. HDOJ 题目3555 Bomb(数位DP)

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  7. Android的init过程:init.rc解析流程

    这几天打算看下安卓的代码,看优秀的源代码也是一种学习过程,看源代码的过程就感觉到,安卓确实是深受linux内核的影响,不少数据结构的使用方法全然一致.花了一中午时间,研究了下init.rc解析过程,做 ...

  8. 你为什么还坚持.NET

    C#换什么比较合适? 从TIOBE来看,Java.C++.C.Python都好,对了,还不能忘了JS. Sql Server换什么比较合适? MySql挺好,Oracle也不错,也还有不少选择. 都挺 ...

  9. Ubuntu 下使用 ZTE ME3630 4G 模块

    之前在 AM5728 开发板上使用过这个模块,用来在野外采集数据上传到服务器.最近接触另外一个项目,做一个演示用的样机,需要移动的,也是采用了这个模块来上传数据.样机环境是 Ubuntu 16.04 ...

  10. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...