前端学习_01_css网页布局
引子
之前也自己陆陆续续地学了一些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网页布局的更多相关文章
- web前端如何让网页布局稳定性和标准性?
刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面.我们写的网页布局怎么样才是合理的, ...
- Day6前端学习之路——布局
一.定位 1)静态定位 position:static(默认) 2)相对定位 position:relative(要配合top.bottom.left.right等属性来使用) 3)绝对定位 pos ...
- 【前端学习】网页tab键的实现 01
友情提醒:阅读本文需要了解一些基本的html/Css/Javascript知识 前端常用tab键的实现,用到的原理是当点击一个元素时,通过javascript操作css的display属性,达到控制另 ...
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- 前端学习(20)~css布局(十三)
常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...
- 前端学习笔记--CSS布局--层定位
1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...
- 前端学习笔记--CSS布局--文件流定位
1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- 前端学习笔记--CSS布局--盒子模型
1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
随机推荐
- 直播二:iOS中硬编码(VideoToolBox)
硬编码相对于软编码来说,使用非CPU进行编码,如显卡GPU.专用的DSP.FPGA.ASIC芯片等,性能高,对CPU没有压力,但是对其他硬件要求较高(如GPU等). 在iOS8之后,苹果开放了接口,并 ...
- 小白的Python之路 day1
Python之路,Day1 - Python基础1 本节内容 Python介绍 发展史 Python 2 or 3? 一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van ...
- C#换行 System.Environment.NewLine。
为保持平台的通用性,可以用系统默认换行符 System.Environment.NewLine.
- springboot(一)
1,使用springboot开发需要以下配置: : Maven | Gradle | Ant | Starters code工具:IDE | Packaged | Maven | Gradle 系统要 ...
- spring boot系列03--spring security (基于数据库)登录和权限控制(上)
这篇打算写一下登陆权限验证相关 说起来也都是泪,之前涉及权限的比较少所以这次准备起来就比较困难. 踩了好几个大坑,还好最终都一一消化掉(这是废话你没解决你写个什么劲
- Mysql的安装和图形化界面的使用
访问mysql网址:https://dev.mysql.com/ 下面需要登录你的oracle账号进行下载就好~ 下载之后是一解压包形式存在的~ 解压之后的文件 这里我新建了my.ini的文件~将my ...
- java 的equals 与== ,null与isempty的区别
1 . == 是为了判断等号两边 变量 所对应 的 内存中的 值 是否 相等, 只是 值 的比较. 2. 假如 String s1 = new String("abc") ...
- 产品研发管理(二):使用SubVersion进行代码管理
概述 这是产品研发管理系列文章的第二篇:使用SubVersion进行代码管理. 介绍如何使用SubVersion的资料已经许多,这里不准备介绍如何使用SubVersion. 这篇文章主要介绍如何进行代 ...
- 一起读源码之zookeeper(1) -- 启动分析
从本文开始,不定期分析一个开源项目源代码,起篇从大名鼎鼎的zookeeper开始. 为什么是zk,因为用到zk的场景实在太多了,大部分耳熟能详的分布式系统都有zookeeper的影子,比如hbase, ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...