HTML5与CSS3详解及实战技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/java_vava2/article/details/114956847

本文详细介绍了HTML5的基本骨架，包括文档类型声明、标签使用，特别是超链接、图像、音频视频、表格和表单域的用法。接着深入探讨了CSS的样式表类型、属性、选择器和盒模型，以及CSS3的新特性，如过渡、位移、动画和新的布局方法如flex布局。最后，提到了响应式设计和REM布局，以及如何使用媒体查询实现不同设备的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+CSS

1.html基本骨架

1.1文档类型声明

<!DOCTYPE html>//html5版本特有

<html lang="zh-CN"> //语言：可以是en代表英文，浏览器解析时会提示是否翻译成中文
<mate chsrset="UTF-8">//字符集UTF-8或gb2312或gbk（增加繁体字是gb2312的扩展）注：UTF-8中的汉字占3个字节而gdk汉字占两个字节。网站中有大量汉字且对网页加载速度有要求使用gbk编码

<mate name="keywords" content="html,学习, javascript">  //关键字属性描述网页关键信息能提升搜索排名
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">//为选项卡添加logo
<mate name="description" content="拉钩教育时拉钩旗下的互联网人职场专业能力提示平台">

1.2标签

1.2.1 超链接标签

<head>
<base target="_blank">//base标签可以让整个页面的超链接以同种方式打开必须写再头标签内
</head>

blank 在一个新打开、未命名的窗口中载入目标文档
self 使得目标文档载入并显示在相同的框架或者窗口中
parent 使得文档载入父窗口或者包含来超链接引用的框架的框架集
top 使得文档载入包含这个超链接的窗口

（重要）标签之间的空格换行在浏览器解析时忽略，标签内部的多个换行空格解析折叠为一个空格

<a herf="#">url地址若使用相对路径，点击自动下载文件并发生跳转
    herf的值为#时点击跳转到页面顶部

1.2.定义预格式化标签

<pre>
    包围在per标签中的格式内容与展示在网页的格式完全相同
</pre>

1.2.3图像属性

src 图片路径。可选择本地图片或者网络图片

<img  src="https://assets.gitee.com/webpacks/popover_card-f8f6dbb28615dcff05a9.bundle.js">

border 边框标签
title 标签：鼠标悬停提示文本
alt属性：设置图片查找错误时出现替换的文本
搜索引擎抓取时会根据以上属性抓取关键字提示搜索引擎排名

1.2.4音频视频

属性值和属性名相同时可以省略属性值

音频标签：audiio

<audio src="" controls='control'>//必须写controls标签否则无法实现  
autoplay='autoplay' 自动播放(谷歌禁用改属性)
loop='loop' 循环播放
preload=preload 加载页面时加载音频

兼容写法：

<audio controls>
    <source src="media/snow.mp3" type="audio/mpeg">
    <source src="media/snow.ogg" type="audio/ogg">
    您的浏览器版本过低，不支持音频播放
</audio>

-视频标签video

<video src=" "controls="control" width=200px; height=100px; poster="images/pig.jpg" >
宽高给一个属性值即可等比缩放
poster:加载等待图片
用js控制前进后退，无需controls属性

谷歌浏览器中可添加muted="muted"可以实现静音自动播放

1.2.5 锚点跳转

同一页面跳转

设置锚点

<h2 id='demo'></h2>或<a name="demo"></a>  //id与name的值需唯一

添加链接

<a  href="#demo"></a>

跨页面跳转

设置锚点

<h2 id='demo'></h2>或<a name="demo"></a>  //id与name的值需唯一

添加链接

1.2.6列表

无序列表

<ul>
    <li>1</li>      //li标签属于容量级标签，里面还可以嵌套ul>li
    <li>2</li>
    <li>3</li>  
</ul>

有序列表

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

定义列表

<dl>
    <dt>主题</dt>
    <dd>解释项</dd>
    <dd>解释项2</dd>
</dl>           //通常项目中一个dl包含一组dd和dt

1.2.7表格标签

//border为边框宽度,
<table border="1" style="border-collapse: collapse;">
    <tr>
        <th></th>//th可作为表格头部，默认居中字体
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </table>

td标签属性：rowspan:跨行合并 colspan:跨列合并
分区标签：

caption：表格标题
thead: 表格头部
tbody: 表格主题
tfood: 表格页脚

1.2.8表单域标签

<from action="data.php" method="" name="">
    action 指定接受并且处理表单服务器程序的url地址
    method 提交的方式 get/post
    name 
</from>

impu属性
一.type值

radio 单选框
checkbox 复选框
button 普通按钮
reset 重置按钮
submit 提交按钮
fiel 上传文件按钮再设置multiple="multiple"可以同时上传多个文件
`
image 图片提交按钮需要有src属性
email 点击submit按钮时会验证格式
url 同email
date 日期
time 时间
month 年月
week 年周
number 限制只能输入数字
<imput="number" max="100" min="0" step="1">
range 滑动条
<imput="number" max="100" min="0" step="1">
16.tel 手机号码
search 搜索框
color 颜色选择器
二.属性值
required=“required” 必填项
placeholder=“请输入用户名” 提示信息用户输入内容后消失
autofocus=“autofocus” 打开网页光标闪动的属性
autocomplete=“off/on” 历史输入成功提交的值

        用户名：<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" autocomplete="on" name="随意">

textarea属性

<textarea rows="5" cols="30" style="resize:none">请输入自我介绍</textarea>
//有滚动条时显示的字符数，每行30字节
需要通过CSS的resize
属性防止用户拖拽文本域大小

下拉菜单

<select>
    <optgroup label="国内">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </optgroup>
    <optgroup label="国外">
        <option>纽约</option>
        <option>伦敦</option>
        <option>东京</option>
    </optgroup>
</select>

表单datalist

<datalist>

</datalist>

lable标签

<input type="radio" name="sex" id= man><lable for="man">男</input>
//for的值必须和id链接
或者： <lable>
    <input type="radio" name="sex">女</input>
</label>

cursor标签设置鼠标光标：pointer，鼠标经过变成手
default,光标
二. checked 默认被选中项

<input type="radio" name="sex"checked="checked">男

maxlength 输入最大长度

1.2.9 H5新增语义化标签

<header>
<nav>导航
<main>主题
    <aside>侧边栏
    <section>区段标签
    <article>独立内容标签
<footer>尾部标签

2.CSS

2.1样式表

2.1.1内联样式表

<div style="font-size:20px;">

2.1.2内嵌样式表

<head>
    <style type="text/css">
    div {
       font-size: 29px;
    }
</head>

2.1.3外联样式表

引用css文件

<link  herf="/***.css" rel="stylesheet">

link属性：

rel="stylesheet"表示引入的外部文件与css样式表
herf：引用的css文件路径
type：text/css

2.1.4导入式样式表

<style> //导入式样式表也可写在其他.css文件中
    @improt url(01.css);
</style>

浏览器会在HTML结构加载完毕以后编译导入式样式表。网速较慢时会首先加载出无css样式的html页面。

2.2 CSS属性

2.2.1颜色

灰色 #808080; rgb(128,128,128)

2.2.2字体

font-family: 可以设置多个，按照书写顺序选择，不支持第一个字体尝试选择下一个字体。故应先设置英文字体

中文一般宋体，微软雅黑。英文Arial或者consolas

注：不同的浏览器有不同的默认字体

2.2.3字号

每个浏览器有自己的默认字号和最小加载字号
实际应用中网页设置的最小字号是12px；

CSS选择器

标签选择器
id选择器
类选择器

同一个标签可以设置多个属性值，中间用空格隔开

<div class="demo ps">

通配符选择器

*{
    margin: 0;
    padding: 0;
}

后代选择器

 .box ur li {  } /*空格后写子标签*/

交集选择器
注：IE6以下不兼容

 p.demo {   }/*用.链接交集*/

并集选择器

 p,li {}  /*用逗号链接两个选择器*/

子级选择器

.demo>li {color: red;}
<div class="demo">
    <li>会选中</li>   
    <div><li>不会选中<li></div>
</div>

兄弟选择器
9.1 同一父元素中demo1元素之后的一个子元素

.demo1 h2 + p {}
<div class="demo1">
    <h2>不会被选中</h2>
    <p>会被选中</p>
    <p>不会被选中</p>
</div>
p + p {}
<div class="demo2">
<p>不会被选中</p>
<p>会被选中</p>
<p>会被选中</p>
<p>会被选中</p>

9.2 同一父亲中demo1后的所有demo2元素

 .box h2~p{}
 <div class="box">
    <p>不会被选中</p>
    <h2>不会被选中</h2>
    <p>会被选中</p>
    <p>会被选中</p>
</div>

结构伪类选择器

 .box :first-child /*或.box p:first-child 若   .box h2:first-chlid则错误 */
 {background-color:red;} 
<div class="box">
    <p>会被选中</p>
    <h2>不会被选中</h2>
    <p>不会被选中</p>
    <p>不会被选中</p>
</div>
同理：.box :last-child 
    .box :nth-child(n)/n为几就是第几个子元素.n可以为数字或关键字{even(偶数)odd(奇数)}或公式{2n或-n+5(前5个)等等 n从0开始}

分组

 .box p:first-of-type{}/*将p标签分组选中第一个p标签*/
<div class="box">
    <h2>不会被选中</h2>
    <p>会被选中</p>
    <p>不会被选中</p>
    <p>不会被选中</p>
</div>
同理：.box p:last-of-type和.box p:nth-of-type(n)

伪元素选择器
伪元素只能给双标签添加，：前不能有空格，元素中必须含有content:""; before 和after创建的时行内元素。在dom中无法看到该元素，所以叫伪元素

.box::before{} //box类内部的前面插入一个元素
<div class="box">

</div>

.box::after{} box元素内部的后面.box::first-letter{}选择box内的第一个字母
box::first-line{}选择box容器内的第一行文本

伪类：添加在一个已经存在的元素上，选中的是元素的某种状态，可能因为状态改变导致选中的内容动态发生变化。类似于在元素中添加了一个class类，在DOM中不会找到这样的类
伪元素：在DOM里新

属性选择器
会选中具有某些属性的元素

input[name] {//选中包含name属性的元素
      width: 30px;
}
    <input type="radio" name="sex" class="icon-dan"> 会选中
    <input type="checkbox" class="icon-duo"> 不会选中

选择type属性值为checkbox的元素

input[type="checkbox"] {}
<input type="checkbox" name="sex">

具有class属性以check开头的

    <input class="checkbox" name="sex">

选择以dan结尾的元素
input[class$="dan"]{}
选择包含o的元素
input[type*="o"]

2.3选择器权重

基础选择器：通配符选择器<标签选择器<类选择器<id选择器<行内式<important
注：选中目标标签的祖先级时就近原则>权重>书写顺序
伪类选择器、属性选择器的权重等于类选择器。
伪元素选择器的权重等于标签选择器

2.4CSS常用样式

2.4.1字体属性

font简写：
font{ 加粗或斜体字号/行高字体}

.demo {
    font: bold 14px/1.5em 宋体
}

字号/行高和字体的位置不可以改变

2.4.2文字样式

text-align:left/center/right
下划线text-decoration:none/overline/line-through/underline
缩进属性text-indent:px/em/ %(父级标签的百分比)。缩进区分正负方向

2.5 盒模型box-sizing属性

包括content-box（width和height只包括内容的宽高，宽高以外绘制内边距和边框）属性值和border-box（width包括内容内边距和边框，不含外边距。）属性值
div{box-sizing:border-box(默认)/border-box}

2.5.1盒模型属性

width
height
padding 内边距简写

p {padding:10px 20px 30px 40px }//上.右.下.左
p {padding:10px 20px 30px }//上.左右.下
p {padding: 10px 20}//上下.左右

border

p {border: 10px(宽度) solid #f00; 
    border-weigh:10px;
    border-style:none/deshed/solid
    border-color:
    /*以上属性均可采用单值到四值写法*/
5. vh单位表示视口单位 100vh表示100%可视范围

4.1 边框圆角

属性名：border-radius //IE8以下浏览器不兼容
属性值：x-radius/y-radius 水平半径/垂直半径得到椭圆角
radius水平和垂直设置成同一个值得到一个圆角
border-radius:50% 圆形

.box{width:200px; height:200px; padding:20px;border-radius:110}//圆角半径值为宽高和内边框和的一半时为圆形
border-top-left-radius:20//左右角圆角

三值法：左上角右上角和左下角右下角
两值法：左上右下右上左下
从四值法到单值法都
另：border-radius:50% 20% 40% /20% 30% ;
也可用%表示水平半径三值法垂直半径两值法

margin
p {margin: 10px(宽度) solid #f00;
margin-weigh:10px;
margin-style:none/deshed/solid
margin-color:
/以上属性均可采用单值到四值写法/

2.5.2文字阴影 text-shadow

属性值：h-shadow：3px//水平阴影位置必填
v-shadow：-2px//垂直阴影位置必填
blur：5px //模糊距离选填
color：选填
多层阴影：3px 3px red, 6px 6px yellow, 9px 9px green; 红色压盖黄色压盖绿色阴影。

2.5.3盒子阴影

/box-shadow:水平阴影垂直阴影模糊程度扩展大小颜色是否内边框阴影/
边框阴影默认外边框阴影，外边框不用写
box-shadow:20px 20px 10px 5px red inset； 前三个属性必写
可多层阴影用，隔开

2.5.4盒模型默认样式清除

清除内外边框

  *{
      margin:0
      padding:0
  }

清除列表前缀

  ul,ol {
      list-style: none;//清除列表前的圆点符号
  }

清除其他标签默认属性

  a {
      text-decoration:none;
      color: #fff;
  }

2.5.5 height属性

固定高度后，文本过多会产生溢出。可以利用overflow属性来解决.
overflow：
visible默认可见的溢出
hidden溢出部分直接隐藏，隐藏超过边框范围的内容
scroll溢出部分出现滚动条
auto 没有溢出正常显示，有溢出会出现滚动条
1.居中
单行文本水平居中：text-align: center/left/right 可以利用行高（line-heigth）等于盒子高度(height)实现垂直居中
多行文本垂直居中：让元素自适应或等于多行文字的高度再设置内边距padding使上下边距值相同。
元素水平居中：设置子盒子margin（外边距）左右为auto.或用translate
元素垂直居中：vertical-align:middle;

.demo{margin: 0 auto;}//auto只在水平方向有效果，div标签的右边外边距为auto,此方法子元素必须为相对定位。如果时绝对定位必须使用left：50%；margin-left：-(子元素宽度一半)px；或transform：translate(-50%);

元素垂直居中：同文字垂直居中

2.5.6塌陷现象

同级塌陷
上盒子有下边距，下盒子有上边距就会发生塌陷现象，使得两个盒子的间距为大的那个
父子级盒子塌陷
父子盒子再同一方向上的margin值会发生塌陷
父盒子外边框为0，子盒子有外边框会发生塌陷，导致父盒子下移

2.5.7margin塌陷解决方法

1.同级塌陷
将两个盒子的外边距之和加在一个盒子上
2.父子级塌陷
用父元素的border或者padding元素分隔开或者使用父级的padding代替margin

display: none 隐藏该模块不显示
display：inline-block可以将元素横向展示，但是会产生空白间距。可以用浮动替换
display:flex; flex布局，代替浮动且无浮动副作用，还可设置其他属性如justify-content:实现子元素平均分布效果。实现页面布局自适应

2.6浮动

2.6.1 浮动

各子元素浮动时，从父元素向前元素依次贴边。
当子元素既有左又有右浮动时，会分组贴边
注：没有特殊需求，不允许一个父元素中的子元素有的浮动有点不浮动（会导致某些低版本的浏览器不兼容）
应用：字围现象

2.6.2.浮动缺点

①父元素高度不能确定时，无法给出父盒子高度。子元素不会撑开父元素。可以通过设置父盒子的高度来解决该问题
②影响后面浮动元素的贴边效果。可以给两个盒子底层插入空的div。为空盒子设置clear属性

2.6.3清除浮动

清除标签元素自身受到前面元素的影响
clear：left/right/both(所有)

总结：父盒子内放置多个浮动的子盒子。子盒子无法撑开父盒子。且影响其他浮动的子盒子元素。为解决该问题有以下5中方法

为父级盒子设置固定的高度（父元素高度无法自适应）
为后面受影响的父盒子设置clear属性（父元素高度无法自适应且两个盒子间的间距无法显示）

.demo2{
            border:1px solid red;
            clear: left;

在两个父元素之前加入空的div元素隔开。在div标签加上clear属性值（父元素高度无法自适应）
在父元素内部，所有子元素之后设置空的div标签设置clear属性（大量浮动效果需要设置大量空的div标签）

.lc{clear: both}
<div class="demo1">
    <p></p>
    <p></p>
    <div class="lc"></div>
</div>
<div class="demo2">
    <p></p>
    <p></p>
    <div class="lc"></div> //该div标签清除之前p标签对其影响，占最下一行将父盒子撑开
</div>

5.将伪类添加给选中父盒子的选择器后面类名通常用clearfix

 .clearfix:after  {
    content: "1";
    display:block;
    height: 0;
    clear:both;
    visibility: hidden;/*隐藏但是会占原来的位置，display：none隐藏且不占位置*/
}
<div class="demo1 clearfix">
<p></p>
<p></p>
<p></p>
</div>
<div class="demo2 clearfix">
<p></p>
<p></p>
<p></p>
</div>

6.给内部浮动元素的父元素添加overflow：hidden属性。 >overflow:hidden隐藏超出高度的文本。
如果没有设置父盒子的高度同时设置溢出隐藏时，浏览器不论子元素时标准流还是浮动。都会将最大高度作为父盒子高度加载。父元素有了高度可以管理内部所有子元素。不会影响后面标签。

2.7伪类

2.7.1 a标签的伪类

伪类书写顺序： link，visited，hover，action（受权重影响）与类权重相同

2.8背景图

background-color会被background-image覆盖
background-image：url（img/ …/1.jpg),url(2.jpg) 1图会覆盖在2图上
背景渐变：background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
线性渐变（0度，自上而下颜色）

2.8.1 重复加载背景图

background-repeat：repeat/no-repeat/repeat–x/repeat–y。

2.8.2 背景定位

background-position背景图开始加载位置
backgound-position：left bottom;或
background-position：-100px 100px;或
background-position：10% 10%;

2.8.3背景附着

background-attachment 设置背景图片是否随着页面或者盒子的滚动而滚动
background-attachment：scroll/fixed；
fixed定位的参考点变为浏览器左上顶点，导致背景图固定在浏览器窗口的某个位置不会随页面滚动走。

总结：背景属性合写background：url（…jpg） no-repeat center top fixed #00F；无顺序

2.8.4背景图大小

background-size：20px 30px；/80%/cover(同比例缩放到与完全覆盖背景区域，溢出会隐藏)/contain（同比例缩放到完整显示图片的最大范围）

总结：隐藏内容

display：none 隐藏内容，不占元素空间
color：transparent设置为透明，占元素空间
visibility：hidden 不可见，但占空间
text-indent：-10px； overflow：hidden 文字向左缩进后把溢出内容隐藏
5.opacity 属性值0-1透明使用以后3D转换的坐标轴会消失。半透明效果是连着内部所有的子元素一起半透明。

2.8.5背景图应用

替换插入图
padding插入列表符号
精灵图

2.9定位

1.相对定位：

 position:relative
 left:10px;
 top:-10%;       //left正值等于right的负值

相对定位是以原有位置作为基准，偏移后原位置不会被占据
2绝对定位：

position: absolute;
left：100px；
top：50px；     //left正值不等于right的负值

绝对定位的参考点默认参考body标签，使用top属性和bottom属性时，参考点为body标签的上方或首屏的下方。例如使用top和left属性，参考点为body标签的左上点。若使用right和bottom，则以首屏右下作为参考点。且偏移后位置被其他元素占据。随着浏览器窗口大小变化也跟着变化

如果祖先级元素中有定位元素，就不会参考body。参考html最近的一个祖先元素的定位。绝对定位的元素会忽略参考元素的padding区域。

3.固定定位：

position:fixed; //参考位置时浏览器的四个顶点

固定定位会脱离标准流。以浏览器的顶点作为参考点。浏览器滑动时也会保持在原来位置。常常用于制作右下角的返回顶部按钮

2.9.1压盖顺序

z-index属性可以设置压盖顺序且属性值大的压盖属性值小的。
z-index属性只能作用于有定位的元素
父级盒子没有设置z-index子级盒子大的压盖小的。如果父级盒子设置了z-index属性，仅根据父级盒子确定压盖，子级盒子无效。

3.CSS效果

3.1 过渡属性（IE10 以上兼容）

transition：过渡属性时间运动曲线延时时间；
transition:none/all(所有变化的属性都过渡)/具体的属性名多个用逗号隔开时间以s为单位；

.box{
    width:100px; heigth:100px;
    transition: all 2s linear 0s;
    -webkit-transition: all 2s linear 0s;//Safari浏览器需要添加，为兼容需写两次
}//过渡前的效果
.box:hover{
    width:300px; heigth:200px;
} //过渡结束的效果

transition-timing-function(曲线)：linear(始终匀速)/ease(慢速开始变快以慢速结束)/ease-in(慢速开始)/ease-out(慢速结束)/ease-in-out(慢速开始和结束)/cubic-bezier（x1,y1,x2,y2）(x取0-1的值)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SrSV2G7H-1615996663474)(https://gitee.com/rfjwwz/resource/blob/master/notefile/%E8%BF%87%E6%B8%A1%E8%BF%90%E5%8A%A8%E6%9B%B2%E7%BA%BF.png)]

3.2位移属性 transform : 属性值为百分比时参照整个盒子的宽度

2D位移：translate(x,y) /translate(x)只有水平方向
3D位移：translateX(x) translateY(y) translateZ(z) 分别时位移的三个方向
scale(x,y)x,y为缩放宽高的倍数/scale(n)同时缩放/
scaleX(n)/scaleY(n)改变元素高度
3D旋转：rotateX(30deg)/rotateY(30deg)/rotateZ(30deg)
2D旋转：roftate(30deg)//旋转30度。先旋转再位移和先位移再旋转结果不同
skew(20deg，-30deg)水平倾斜20度垂直倾斜30度

3.3 调整基准点 transform-origin

transform-origin(x,y)可以单词、像素值、百分比

3.5透视 perspective

透视属性需设置给旋转元素的父级

.box { perspective:1000px;}//不设置透视属性无旋转效果   
.box img{
transform:rotateX(30deg)
}
<div class="box">
    <img src="images/1.jpg">
<div>

3.6 CSS3动画（IE10以上支持，Chrome和Safari需要加webkit-前缀）

@keyframes创建动画

@keyframes move{
    0%{}
    50%{}
    100{}
}

绑定动画:动画名称过渡时间速度曲线动画次数延时时间；

    .box{
        animation:move 2s linear 3 1s;
    }

icon图标

以favicon.ico命名，文件与index.html同级储存。
<link rel="shortcut inco" herf="favicon.ico" type="image/x-icon">

4布局

4.1流式布局

4.2flex布局：通过给父盒子添加flex属性控制子盒子位置和排列方式

父盒子设置为flex布局以后，子元素的float、clear和vertical-align属性都会失效,子元素可以直接设置宽高

4.2.1父项常见属性

flex-direction（设置主轴方向）：row/row-reverse/column/column-reverse默认主轴是x轴侧轴是y轴反向
justify-content(对齐方式):flex-start（默认）/flex-end/center/space-around/space-between
从头部开始/从尾部开始排列/在主轴居中对齐/平分剩余空间/先两边贴边，后平分剩余空间
flex-wrap(设置子元素是否换行)：nowrap(默认)不换行/wrap换行
不换行时超过父盒子宽度，子元素宽度会按比例缩小
align-items(侧轴上子元素排列方式（单行）)：flex-start从上到下/flex-end从下到上/center垂直居中/stretch拉伸（子元素不设置高度或宽度，拉伸到和父元素相同的高度或宽度）
align-content 侧轴子元素排列方式(多行)单行无效：flex-start/flex-end/center/space-around/space-between/stretch
flex-flow是flex-direction 和flex-wrap属性的符合属性：row nowrap

4.2.2子级常见属性

flex 子项目分配父盒子的剩余空间，用flex表示所占的份数：0（默认）
align-self控制子项自己在侧轴的排列方式：默认是auto，表示继承父元素的alingn-items属性，没有父元素等同stretch
order属性定义子项的排列顺序（前后顺序）：默认为0，等同于改变html书写顺序

4.3 rem布局

em：相对单位，参考父级元素的字号大小的倍数

.div{font-size:20px;}
.div span {width:2em; hight:4em;}//width:40px;

rem:参考根元素html的字号大小的倍数

4.3.1 媒体查询:设置不同宽度不同样式

@media mediatype and|or|not (meida feature ) {}
mediatype:all/screen/print
meida feature:width/min-width/max-width
或引入flexible文件自动查询视口宽度

@media  screen and (min-width :800px){
    body{font-size:12px}
}
media screen and (max-width:1200px) {
    body{font-size:14px}
}

4.3.2 less入门

//创建变量
//变量规则：必须以@开头，不能包含特殊符号，不能以数字开头
@color: pink;
@Color: deeppink;
@fs14: 14px ;
//变量使用
div {
  background-color: @color;
  font-size: @fs14 ;
}

1.less运算

运算前后单位不同取第一个数字的单位，less运算符左右必须加空格

height:300rem / @baseFont

可以引入flexible.js文件自动获取屏幕宽度。

4.4 响应式开发布局

原理：使用媒体查询对不同的设备进行布局和样式的设置，从而适配不同设备

4.4.1 栅格系统

Bootstrap中有container和contariner-fluid类。
前者适用于响应式布局的容器，固定宽度
后者适用于流式布局容器百分之百宽度适用制作移动端开发
注：可以给子级添加row类标签消除container的内边距