前端新手笔记之HTML&CSS

前端新手笔记之HTML&CSS

HTML5的语义化标签

什么是语义化及语义化标签

语义是指语言所蕴含的意义。语义化HTML标签，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到

标签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。

为什么要语义化？

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
• 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
• 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

“切片元素”

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，旨在让标签有让阅读者一眼就明白的含义。
更多切片元素

CSS书写规范

书写顺序

在书写时，应按功能进行分组。并以下列属性由上到下的顺序书写，可提高代码的可读性。

• 如果包含content 属性，应放在最前面。
• Formatting Model （布局方式、位置）相关属性包括：position / top / right / bottom / left /float / display / overflow 等
• Box Model （尺寸）相关属性包括：border / margin /padding / width / height 等
• Typographic （文本相关）相关属性包括：font / line-height / text-align / word-wrap 等
• Visual （视觉效果） 相关属性包括：background / color / transition / list-style 等

命名规则

• 规则命名中，一律采用小写加中划线的方式

书写规范

• 属性可缩写尽量缩写（padding,margin,background等）

P.S. 例：margin: 20px 40px 60px;（上20px；左、右40px；下60px。）

典型的弹性布局

关键元素高宽和位置都不变，只有容器元素在做伸缩变换。
文字流式：使用rem设置文字大小，以及外边距、内边距
控件弹性， 在已定大小的容器进行弹性划分的布局模式（弹性盒子模型）。
图片等比缩放：盒子定宽，图片百分百（为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小。）

Margin和Padding

Margin是盒子与盒子之间的间距
Padding是盒子的内容物与边框的间距

margin的负值

如果没有设定width属性

• 设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。
• margin-top为负值的时候向上位移，影响其后元素向上位移
• margin-bottom为负值的时候不会位移，而是会减少自身供css读取的高度，其后元素受影响(上移)

负margin应用：圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是为了实现 两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局 将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼 直接在div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

margin的重叠

• 水平边距永远不会重合。
• 2个或以上的块级盒模型相邻的垂直margin会重叠（根元素的垂直margin不会被重叠。）。

Float

元素浮动之后

• 当元素被设为浮动时，元素的width就变成了内容的宽度了，由内容撑开
• 浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。
• 高度不同所以可以叠在其他元素上面产生重叠或者使用负边距跑到父元素外

为了消除浮动带来的影响

• 给浮动元素的祖先元素增加高度：只要浮动在一个有高度的盒子里，这个浮动就不会影响后面的浮动元素
• clear:both
  • 设置父元素清除左右浮动，但如果盒子没有设置高度，则会出现margin属性失效的问题
  • 利用伪类清除浮动

.header:after{
         content:"."; 
         display:block; 
         visibility:hidden; 
         height:0; 
         clear:both;
 }

• overflow:hidden overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要裁切隐藏掉。但它的副作用可以清除浮动，且能够使margin生效

Position

static
默认值。没有定位，元素出现在正常的流中

fixed
生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置规定同absolute。浮动与文档流之上，并随滚动一直停留在屏幕之中。

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

• 绝对定位的元素是脱离文档流的。脱离后原来的位置相当于是空的，下面的元素会来占据位置。随着滚动并不一直停留在屏幕中。
• 元素在没有设置宽度的情况下，宽度由元素里面的内容决定。
• 如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，从margin开始的地方（即padding的左上角）开始定位，也就是忽略padding，当然并不会忽略margin和border。
• 如果同时设置了left和right，将实现水平拉伸；如果同时设置了top和botom，将实现垂直拉伸。
• 如果设置了width和height，则width和height覆盖拉伸（满屏拉伸）。

relative
生成相对定位的元素，相对于其正常位置进行定位。

• 相对定位元素经常被用来作为绝对定位元素的容器块。
• 实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。

子绝父相

一般绝对定位，是先让父容器相对定位，然后子元素绝对定位，通过top和left来调整位置。

但由于父盒子高度是由里面的子元素撑开的，而绝对定位的子元素脱离了父元素文本结构，撑不开父元素。不但撑不开，而且还会受到父元素宽度的限制。所以

无依赖的绝对定位

子绝父相的自适应而如果绝对定位后不调整top和left，而通过margin来控制位置，那么这样自适应就很好，而且父容器也不用定位。

给元素设置absolute定位属性，不通过top/right/bottom/left去控制元素位置，而是通过margin或者transform来控制。

• 图标定位
  • 父元素设置相对定位，图标设置绝对定位，再去调整top left的属性值。
  • 设置图标为绝对定位，再根据margin值去调整。
• 伸展容器
  设置绝对定位之后再设置元素的宽和高为100%
• 水平垂直居中
  尺寸限制、拉伸 与 margin:auto 同时出现就能实现绝对居中效果。

float和absolute、fixed的脱离文档流

• float 的元素脱离正常的文档流，但是还会占据文档流的文本空间。 即float脱离文档流不是完全脱离。 使用 float脱离文档流时，其他盒子会无视这个元素，但是其他盒子内的文本依然会为这个元素让出位置，环绕在周围；
• 对于使用absolute、fixed脱离文档流的元素，其他盒子与其他盒子内的文本都会无视他。
  当同时设置了 position:absolute / position:fixed 和 float:right，忽略float:right.

Flex弹性盒子

注：

• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性都将失效。
• 在flex布局的时候，需要注意行内元素（a, input, textarea, span, i等），需要根据情况设置成display:block;

通过设置display属性的值为flex或inline-flex来定义弹性容器。

• flex ：任何一个容器都可以指定为 Flex 布局。
• inline-flex ：行内元素也可以使用 Flex 布局。

容器常用属性
flex-direction 确立主轴。
justify-content 沿主轴排布方式。
align-items 沿交叉轴排布方式。

Bootstrap

BS是基于响应式（一个网站能够兼容多个终端）设计的一套框架，以栅格系统为基石辅以基础布局组件，再加上很多封装完好的css组件及js组件形成的快速开发的一整套框架

组件的基本构建思想利用了css的特性

基本样式+颜色样式+尺寸样式+状态样式（激活/禁用）+特殊样式（按钮组）+动画样式（例滚动条）

主要规则

• ① row必须在container中
• ② 在row中创建column
• ③ 具体内容放在column中
• ④ 栅格系统可嵌套

.container：固定宽度的栅格布局。
.container-fluid： 100% 宽度。
使用 .col-md-offset-* 类可以将列向右侧偏移。

响应式

• 设置meta标签
• 媒体查询@media screen and (max-width/min-width: ……px);