likes
comments
collection
share

极简页面布局知识手册（持续更新中）

作者站长头像
站长
· 阅读数 48

常识篇

@基础概念

HTML

  • 全写为HyperTextMarkupLanguage，直译为 超文本标记语言
  • 言下之意明明一段字符代码，浏览器在显示（渲染）时却能形成很炫的效果，因此它是“超级文本”；
  • HTML语言的基本元素是标签/元素；
  • 每个标签都有其特定的语义，特定的属性，浏览器能够根据标签的语义和属性，按约定方式去绘制特定的效果；
<div class="minsu">民宿推荐</div>
  • 在上面的HTML代码中 div就是标签名，我们注意到它是成对出现的，class="minsu"是它的一个属性；
  • HTML语言中有狠多标签和属性，每个标签名具体是何含义（语义），每个属性具体代表什么，浏览器应该怎么理解和渲染这些标签和属性，是有一整套标准的，即 W3C标准；

CSS

  • 全称CascadingStyleSheets，直译为层叠样式表；
  • 是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言；
  • CSS文件扩展名为 .css；
  • 通过使用CSS我们可以大大提升网页开发的工作效率；
  • CSS3现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

W3C

  • W3C 指万维网联盟（World Wide Web Consortium）
  • W3C 创建于1994年10月，由 Tim Berners-Lee 创建；
  • W3C 的工作是对 web 进行标准化，创建并维护 WWW 标准，用于规范浏览器对HTML和CSS的渲染行为；
  • W3C 是一个会员组织，其会员包括微软、苹果、谷歌...不一一列举了，凡是造浏览器的厂商都是会员；
  • W3C 标准被称为 W3C 推荐（W3C 规范）
  • “推荐”而非强制，但上一个不响应“推荐”的浏览器已经被其亲妈所抛弃了，即微软抛弃IE的故事；

HTML篇

@常用块级元素

div片区

  • 语义就是分块（division），常用于页面大块划分
  • 每个div标签在页面中独占一行

hx标题

p段落

分割线

@常用行内元素

img图片

span无题

a超链接

b加粗

i倾斜

@列表

@表格

@表单

@HTML通用属性

class类名

  • class属性定义了元素的类名;
  • CSS可以根据类名去定义一套样式，物以类聚，所有具有相同类名的标签/元素都将天下乌鸦一般黑，获得相同的样式；
  • 例如上面的案例中我们给一个div元素添加了类名名曰banner，在CSS样式(style)中，我们为其设置了元素高度、文本行高、背景色等样式，那么所有class为banner的元素都将具有这几个相同样式；
<div class="banner">BANNER</div>

.banner {
    height: 447px;
    line-height: 447px;
    background-color: green;
}

id身份标识

style行内样式

CSS篇

@CSS选择器

标签选择器

  • 选中所有特定的标签并同意添加样式
/* 标签选择器 选中所有div */
div {
    ...
}

类选择器

  • HTML标签上有属性class="xxx"时，CSS可以通过.xxx{具体样式}的方式来定位到所有具有该类名的元素，统一给它们添加相同的样式；
  • 例如上面的.banner

通配符选择器

  • 选中所有元素并统一添加样式！
* {
    ...
}

群组选择器

  • 通过逗号隔开的方式，一次性选中一堆选择器（可以是标签选择器、类选择器、通配符选择器以及我们后续会学的各种复杂选择器），并给命中的元素统一添加样式；
.banner,
.movie,
.minsu,
.likes,
.navi,
.links,
.footer {
    ...
}

伪类选择器

伪元素选择器

选择器权重

  • 大家应该已经注意到了，标签选择器、类名选择器、通配符选择器常常会同时命中同一目标！
  • 下面的例子中，类名为header的div元素会同时被三个选择器命中，如果这三个选择器的样式发生冲突的话，这个元素到底该听谁指挥呢？
* {...}

div {...}

.header {...}
  • 为解决这个问题，W3C就提出了选择器权重这一概念！

极简页面布局知识手册（持续更新中）

  • 多个选择器同时作用于相同元素且样式冲突的情况下，权重大的具有更高优先级；
  • 因此本例中通配选择器-标签选择器-类名选择器的权重分别为0-1-10，样式冲突的情况下类名选择器会起作用；
  • 后续随着我们的选择器种类越来越多、越来越复杂，相互交织和冲突的机会越来越多，我们在整体进行布局规划时就要尽量保持结构清晰、逻辑清晰！

@盒子模型

理论基础

极简页面布局知识手册（持续更新中）

  • 如图，我们把任何一个元素都看成是摆在页面上的一个盒子；
  • content部分是盒子中内容的宽高；
  • border部分是盒子的边框；
  • padding部分是内容距离边框的距离，我们称为内边距；
  • margin部分是盒子边框距离相邻元素或页面边界的距离，我们称为外边距；
  • 所以一个元素盒子真正在页面中占据的尺寸为：内容宽高 + 内边距 + 边框粗细 + 外边距；

demo

demos/002/盒模型.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        该元素盒子实际占用宽度
        =内容宽 + 左右内边距 + 边框 + 左右外边距
        =200 + 20 + 10 + 5 = 235px

        该元素盒子实际占用高度
        =内容高 + 上下内边距 + 边框 + 上下外边距
        =100 + 20 + 10 + 5 = 135px
        */
        .box {
            /* 内容宽高 */
            width: 200px;
            height: 100px;

            /* 内边距 */
            padding: 20px;

            /* 边框 */
            border: 10px solid black;

            /* 外边距 */
            margin: 5px;

            /* 背景色 */
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        哥是一个盒子
    </div>
</body>
</html>

极简页面布局知识手册（持续更新中）

怪异盒模型

@样式继承

@颜色的表示

@文字样式

@使用背景

@浮动与清除

@定位

@图标字体

@弹性盒

@网格布局

@H5新标签

@CSS3新特性

@CSS预处理

@尺寸单位

@媒体查询

@动画特效

坑与面试题

@布局常见的坑

@高频面试题

宽高居中你造几种方式？

CSS画三角形

怎么做响应式布局

撸个三列布局

撸个圣杯布局

转载自:https://juejin.cn/post/7206529406612701244
评论
请登录